16.img，图片（内联元素）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>img标签</title>
</head>
<body>
img标签向网页中插入图片。例：<br><br>
<img src="/images/demo1.jpg" width="134" height="98" alt="减号" title="减号">
<img src="http://www.kuke.com/images/logo.png" width="125" height="41" alt="时尚酷客logo">
<img src="none.jpg" width="200" height="50" alt="本图不存在" style="border:1px solid #cccccc;">
</body>
</html>效果如下：
（图2-20）
img标签有5个重要属性：src、width、height、alt、title。
img标签的src属性用于指定图片路径，路径分为绝对地址和相对地址。（后面章节中另行讲解）
width指定图片的宽度，height指定图片的高度。（各种宽和高的情况在后面章节中另行讲解）
img标签的alt属性有三个作用：
（1）当图片不存在或显示不了时，显示alt属性的值（文字）以代替；
（2）当盲人使用屏幕阅读器时，图片alt属性里的文字将用于表述图片（代替图片），增强访问性；
（3）让搜索引擎精准的收录图片。由于搜索引擎难以识别图片里的内容，比如难以识别图片里是一只狗还是一只猫，是一朵莲花还是一朵昙花，甚至很多情况下不能识别图片里是什么内容。alt属性里的文字可代替图片被搜索引擎收录，比如一张莲花图片我们设置alt属性的值为“莲花”，则搜索引擎会收录该图片为莲花图片，当我们在搜索引擎搜索莲花图片时，就有可能找到它。（说搜索引擎难以识别图片里的内容是相对文字而言，搜索引擎的收录技术一直在进步，一些搜索引擎也做到了对图片的简单识别，还能够收录Flash里的文字内容，淘宝网站里也有识别商品图片的功能，能够识别用户上传的图片而搜索出相关的商品。）
img标签的title属性作用：当鼠标停留在图片上1-2秒不动时，将显示title的提示文字。在W3C标准里，鼠标响应显示的是img标签的title属性，不响应alt属性，但IE不按W3C标准，鼠标响应显示的却是alt属性。所以很多情况下，为了更高的兼容性及更好的表述图片，alt和title属性会被一起设置为相同的值。
2136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
