《Web前端开发精品课 HTML与CSS进阶教程》——2.3　图片语义化

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第2章，第2.3节，作者： 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 图片语义化

在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面来深入探讨一下。

（1）alt属性和title属性。

（2）figure元素和figcaption元素。

2.3.1 alt属性和title属性
img标签有两个重要属性：alt和title。

alt属性用于图片描述，这个描述文字是给搜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字。

title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。

语法：

 img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)" 

说明：
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会查看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。

请一定要注意：alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。

2.3.2 figure元素和figcaption元素

https://yqfile.alicdn.com/26cc9c2cbd087955b09f96817836a511aee67fac.png"

对于如图2-4所示的这种“图片+图注”的效果，我们可以使用如下代码来实现。

 div 

 img src="" alt=""/ 

 span HTML入门教程 /span 

 div 

但是这种实现方式的语义并不好。在HTML 5中，引入了figure和figcaption两个元素来增强图片的语义化。

语法：

 figure 

 img src="" alt=""/ 

 figcaption /figcaption 

 /figure 

说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

前端之Web Assembly的未来在哪里？ Web Assembly是一种新的二进制格式，可以在浏览器中运行，它可以将C/C++等高级语言编译为低级的字节码，以提高Web应用程序的性能。随着移动设备的普及和Web技术的发展，Web Assembly已经成为前端开发的一个重要方向。那么，Web Assembly的未来在哪里呢？
前端之Web Components的未来在哪里？ Web Components是一种用于创建可重用Web组件的标准，可以使开发者更加容易地创建、共享和重用自定义元素和功能。它的出现为前端开发者提供了更多的工具和技术，使得开发可重用、可维护的Web应用程序变得更加容易。那么，Web Components的未来在哪里呢？
【web前端开发】HTML知识点超详细总结 网页是构成网站的基本元素，是承载各种网站应用的平台.网页通常是指HTML格式的文件 文件扩展名为.html或.htm 它通过浏览器来阅读 HTML不是一种编程语言,而是一种标记语言.
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节 本节书摘来自异步社区《Web前端开发精品课——HTML5 Canvas开发详解》一书中的第1部分，第2章，作者：莫振杰 著，更多章节内容可以访问云栖社区“异步社区”公众号查看
《Web前端开发精品课 HTML与CSS进阶教程》——导读 近年来，Web前端技术飞速发展，作用也日趋重要。在Web前端技术中，HTML和CSS是最基础的知识。当前市面上同类书籍很多，但大部分都是介绍基础性的HTML标签和CSS属性，缺乏一本真正体现前端开发水平的书籍。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。