曲径通幽论坛

 找回密码
 立即注册
搜索
查看: 3461|回复: 0
打印 上一主题 下一主题

[HTML] <img> -- 向网页中链入图像

[复制链接]

716

主题

734

帖子

2946

积分

超级版主

Rank: 9Rank: 9Rank: 9

积分
2946
跳转到指定楼层
楼主
发表于 2013-3-30 11:49:54 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<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 建议都同时使用。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|曲径通幽 ( 琼ICP备11001422号-1|公安备案:46900502000207 )

GMT+8, 2025-5-4 13:59 , Processed in 0.078413 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表