web标准教程，帮你走进web标准设计的世界第二讲

2024-07-11 08:26:31

字体：大中小

来源：转载

供稿：网友

上一讲我主要讲解了一下网页的基本结构与网页主体部分的基本结构，以及常用的html标签。

非常感谢网友对我的大力支持，谢谢你们给我的鼓励！

我继续上一讲：又开始实战了，代码敲起来！

复制代码

代码如下:
<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>

So easy !

标签4：img

使用指数：****

功能：导入图片

类型：内联元素

常用属性：id，class，title

特别属性：1.src:导入图片总要知道图片在哪不是，src就解决这个问题。他的值就是图片存放的路径啦。

　　　　 2.alt:与title功能类似，都是提示功能，我们知道有的时候一个网页的图片不一定及时（或者就是不能成功）加载，那么为了给用户一个友好的说明，故用此属性

例子：1.在E盘新建两个文件夹，命名为html，和images。在html文件夹中建一个html文件命名为：index.html，复制一张你比较喜欢的图片到images文件夹中（例如images.jpg），ok，代码开始了：

index.html：

复制代码

代码如下:
<body>
<img alt="我是图片" title="Hello!" src="../images/images.jpg" />
</body>

So easy !

插播广告：../images/images.jpg：..代表返回到上一级文件，什么意思呢，我们的目的是找到html文件夹外面的images文件夹中的images.jpg文件，那我们就一步一步的进行，首先从html文件夹跳出来（..），这是我们已经指向E盘了，然后找E盘中的images文件夹（/images）;最后找到文件（/ images.jpg）;光听我讲是不行的，要多实践哦！

当然img标签还有两个常用属性width和height，分别来限制显示图片的宽度和高度；默认为图片的实际尺寸，不妨试试这段代码，你就明白啦：

复制代码

代码如下:
<body>
<img alt="我是图片" title="Hello!" src="../images/images.jpg" />
<img alt="我是图片" title="Hello!" src="../images/images.jpg" width="20" height="20" />
<img alt="我是图片" title="Hello!" src="../images/images.jpg" width="200" height="200" />
</body>

So easy !
好，我们继续头部讲解,导航的搜索框部分代码被我省略了，表单元素准备单独进行将讲解。

复制代码

代码如下:
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ul>
</div>

上一篇：web标准教程，帮你走进web标准设计的世界第三讲（html终结篇）

下一篇：CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

发表评论

共有条评论