第二章网站开发基础之HTML教程 - 二、常用HTML标签：img，图片（内联元素）

最新推荐文章于 2021-06-09 23:00:44 发布

陈子2005

最新推荐文章于 2021-06-09 23:00:44 发布

阅读量221

点赞数 2

分类专栏：陈子-零基础网站开发教程文章标签： html css javascript html5 前端

本文链接：https://blog.csdn.net/klyz505/article/details/105380195

版权

陈子-零基础网站开发教程专栏收录该内容

48 篇文章 2 订阅

订阅专栏

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="减号"> &nbsp; 
<img src="http://www.kuke.com/images/logo.png" width="125" height="41" alt="时尚酷客logo"> &nbsp; 
<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属性会被一起设置为相同的值。