曲径通幽论坛

标题: <img> -- 向网页中链入图像 [打印本页]

作者: easy 时间: 2013-3-30 11:49
标题: <img> -- 向网页中链入图像
<img> 标记向网页中链入一幅图形，它不是一个成对标记。
它需要有两个属性： src 和 alt 。

src 指出图片的地址，这个地址可以是一个 URL 的绝对地址，如果是图片位于本站，可以使用相对路径来表示。

alt 属性给出一段文字，当浏览器还没完全读入该图像时，它显示这段文字。

示例代码：

<img alt="歪歪私房之白色蕾丝- 请耐心等待图片打开" src="http://img.d843.com/uploads/allimg/20130328/1-13032Q24539.jpg" >

在上面的代码中，可能由于图片有点大，而网速有点慢，下载图片的过程也会相应较慢，在图片尚未读入时，浏览者会看到：“歪歪私房之白色蕾丝- 请耐心等待图片打开” 这段文字。

在某些场合，比如在论坛的帖子中，我们可能不需要整张大图加载在帖子里，这样会把版面撑开，从而影响美观，此时可以使用 width 和 height 这两个属性来限制图像显示的宽度和高度，效果就相当于缩略图，比如：

<img alt="歪歪私房之白色蕾丝- 点击图片进入下一页" src="http://img.d843.com/uploads/allimg/20130328/1-13032Q24539.jpg" width="500" height="500">

在一些场合，我们会看到点击图像时，会转到另一个网址链接，实现这种效果，可以这么做：

<a href="http://www.baidu.com/">
<img alt="歪歪私房之白色蕾丝- 点击图片进入下一页" src="http://img.d843.com/uploads/allimg/20130328/1-13032Q24539.jpg" width="500" height="500">
</a>

上面，当你点击图像时，就会跳转到百度。
还有一个 title 属性，添加了该属性，如果鼠标悬停在图片上，会看到有 title 值所示的说明文字。

因此在添加图片时，alt 和 title 建议都同时使用。

欢迎光临曲径通幽论坛 (http://www.groad.net/bbs/)