《Web前端开发精品课 HTML与CSS进阶教程》——2.3 图片语义化-阿里云开发者社区

开发者社区> 人工智能> 正文

《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元素


<a href=https://yqfile.alicdn.com/26cc9c2cbd087955b09f96817836a511aee67fac.png" >

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

<div class="img-list">
   <img src="" alt=""/>
   <span>HTML入门教程</span>
<div>

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

语法:

<figure>
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure>

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
人工智能
使用钉钉扫一扫加入圈子
+ 订阅

了解行业+人工智能最先进的技术和实践,参与行业+人工智能实践项目

其他文章