《HTML5开发手册》——第2章 组合、文本级和重新定义的语义 2.1 初学者“菜谱”:使用figure和figcaption元素插入图片和图注

第2章 组合、文本级和重新定义的语义

前一章中,我们介绍了一些用于构建页面结构的HTML5元素。本章中,读者将接触到更多的HTML5元素(figure、time、details和mark等)和一些重新定义的元素(address、s、cite、ol、dl、small、b、strong、i、em、abbr和hr)。后面还会介绍到新的块类型(block-level)的链接和WAI-ARIA。由于这些元素都与页面内容密切相关,所以将它们统称为组合元素或文本级元素。

2.1 初学者“菜谱”:使用figure和figcaption元素插入图片和图注

figure元素用于插入某张图片并添加描述。在HTML5以前,需要插入图片时只有额外使用div之类的元素才能将文本添加到页面中。这样做的缺点在于图片和图注之间并无任何关联。而现在添加figure之后,可以再利用figcaption为图片添加图注。

虽然figure通常用来插入图片,但它也可以是一段代码、图表、音乐或者视频。通常情况下,figure主要用于图片。图2.1所示为一个示例。用于创建图2.1的代码如代码2.1所示。
代码2.1 带图注的图片

读者一定会为是否仍需要为figure元素加入alt文字(为不支持图片显示的浏览器提供的替代文字)而感到困惑。在figure之外的img元素总是需要alt。但如果图片只是为了提供展示,而不需要被辅助技术来识别时,就可以使用空的alt属性。不过,由于当今浏览器和辅助技术的支持问题,这很有可能会影响可访问性。

我们建议无论在哪种情况下都应为图片加上alt属性以防万一。在代码2.1中,图注的描述已经很清晰。但对于使用屏幕阅读器的用户,他无法知道分析数据是如何表现的,所以alt文字可以提供此信息。

虽然例子中直接插入了图片,但我们也可以利用Canvas或者SVG1绘制图像。

注意:
最初,规范中推荐使用legend元素而不是新的figcaption元素。但是由于跨浏览器样式差别的问题,开发者都倾向于使用figcaption而不是legend。
如图2.2所示,figure元素中不仅仅只能包含一张图片,可以使用figure元素来显示多张图片。代码2.2解释了如何在figure元素中插入多张图片。

代码2.2 figure中插入多张图片

显示图片内容的时候是否总是使用figcaption元素?如果单纯是为了显示某张图片(或图表等),那么使用普通的img标记足以。不过,如果它包含了额外的有助于内容描述的信息,那么就应该使用figure和figcaption。最后注意,figure中只能包含一个figcaption。

时间: 2024-09-24 11:22:44

《HTML5开发手册》——第2章 组合、文本级和重新定义的语义 2.1 初学者“菜谱”:使用figure和figcaption元素插入图片和图注的相关文章

《HTML5开发手册》——导读

前言 HTML(超文本标记语言)是构建网页的核心语言.在过去的20多年里,无数的开发者编写着 HTML.在 HTML 诞生的前几年,这门语言经历了翻天覆地的变化,直到 1990 年后才相对稳定了起来.不过,现在一切开始改变. HTML的简史 在1991年,Tim Berners-Lee撰写了一篇名叫"HTML Tags"(HTML标记)的文档.文档中描述了20个可以用来编写Web文档的标记.到1993年中期,IETF(因特网工程任务组)发布了第一个HTML规范的提议,该提议最后过期.而

《HTML5开发手册》——2.10 中级“菜谱”:在HTML5中使用WAI-ARIA

2.10 中级"菜谱":在HTML5中使用WAI-ARIA HTML5开发手册Web Accessibility Initiatives Accessible Rich Internet Applications(WAI-ARIA)也称作ARIA,是一个旨在提高Web应用和Web页面可访问性的草稿规范.ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容.通常,辅助技术无法知道一个组件(widget)是什么,组件也一般无法使用键盘访问.同样,试想一下

《HTML5开发手册》——1.6 中级“菜谱”:使用新article元素

1.6 中级"菜谱":使用新article元素 HTML5开发手册article元素和section元素(下一节讨论)是否是HTML5结构元素中最重要的两个,还有待讨论.不过它们肯定是最让人困惑的. article元素是一个独立的内容块,它既可以独立存在,也可以被重用.RSS订阅中的内容就非常有代表性,因为每项基本都是独立的文章.你完全可以把某项从中抽取出来,而它仍然是具有意义的. HTML5规范给出了一些如何使用article元素的示例:论坛的帖子.杂志或新闻的文章.一篇博文或用户提

《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接

2.8 初学者"菜谱":为多个元素添加相同的超链接 HTML5中一个非常实用的新特性是将某些元素组合起来,显示单个链接来提供更宽的点击空间.而在以前,我们需要使用JavaScript或一系列组合元素才能完成这种功能. 在HTML 4中,在编写新闻或博客主页等含有众多文章链接的页面时,我们需要使用代码2.13的方法使每个项目都可点击. 代码2.13 在HTML 4中包裹链接 代码2.14所示为在HTML5中直接使用一个a元素做到这一点. 代码2.14 在HTML5中包裹链接 虽然可以直接

《HTML5开发手册》——第1章 HTML5中新的结构元素 第1章 HTML5中新的结构元素

第1章 HTML5中新的结构元素 HTML5并不是一种具有JavaScript API和酷炫视频的交互式巫术.它有20多个新的元素,可以用来开发Web页面.添加语义以交付容易访问的可重用内容. 在后面章节,我们将学习新的HTML5表单控件和多媒体元素.本章主要讲解新的结构元素,如header.hgroup.nav.footer.article.section和aside.你将知道何时以及如何单独或组合使用这些新元素.实际上,你还将学会利用这些新元素创建一个基本的网站模板,如图1.1所示. 1.1

《HTML5开发手册》——1.4 初学者“菜谱”:使用hgroup元素组合标题

1.4 初学者"菜谱":使用hgroup元素组合标题 使用新的HTML5元素hgroup,可以为header添加更多信息. 这个元素用来对多个相关联的h1-h6标题进行分组.如果你的网站有副标题,可以使用代码1.3所示的元素,这将生成图1.4所示的布局.虽然hgroup是一个有效的分组选项,但是它主要是用来告知文档大纲(后面将讨论)哪个标题是最重要的.在代码1.3中,文档大纲只会包括最顶层的标题,在本例中是h1. 代码1.3 除h1之外,不包含其他所有标题 在代码1.3中,h2标题是与

《HTML5开发手册》——2.7 现存元素的变化

2.7 现存元素的变化 在第1章中,我们介绍了用于创建页面布局和添加内容的新元素.在本章前半部分,我们介绍了更多的HTML5新元素,但是它们关注的是内容自身,比如图片.一直介绍新元素并不代表现存的元素都被我们忽略了.事实上,其中一些现有元素的角色发生了变化. 2.7.1 cite元素 HTML5对cite元素的定义进行了很大的修改.在HTML 4中,cite元素允许内容开发人员显示引用内容的作者或发言人. 虽然从技术上来说是错误的,但cite元素还是经常在blockquote中使用. 然而,HT

《HTML5开发手册》——2.4 初学者“菜谱”:使用address元素提供通信信息

2.4 初学者"菜谱":使用address元素提供通信信息 规范中将address元素定义为"分节元素",与nav或article类似.不过,我们将它放在本章讲解,主要因为我们认为它作为文本级语义更为合适,原因是它的用法与文字内容相关,而不是页面布局. 多年以来,Web开发人员一直错误地使用了address元素.它并非显示通用邮寄地址(通常在某个"联系我们"页面中)的通用方式.因此,下面这种使用方式是错误的: https://yqfile.ali

《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航

1.5 初学者"菜谱":使用nav元素创建导航 顾名思义,nav元素的作用是提供导航.它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录). nav最常用的用途是作为网站的主导航.很多情况下,开发者都使用无序列表编写导航,如代码1.4所示. 代码1.4 传统的导航编写方式 在HTML5中创建nav元素时,该代码没有太大变化.生成图1.5所示的代码看起来如代码1.5所示. 代码1.5 HTML5中的导航编写方式 https://yqfile.alicdn.com/f5