html5 em语义变化,HTML5的结构和语义——语义性的块级元素(三)

最新推荐文章于 2024-06-02 09:58:03 发布

腾讯体育

最新推荐文章于 2024-06-02 09:58:03 发布

阅读量93

点赞数

文章标签： html5 em语义变化

本文介绍了HTML5中新增的三个语义性块级元素：aside、figure和dialog。aside常用于表示文章或书籍中的补充信息，如边栏和注释；figure元素用于包裹图像并可以包含说明，有助于屏幕阅读器理解内容；dialog元素则用于表示对话，可以配合dt和dd元素呈现多人交谈场景。通过这些元素，开发者可以创建更具语义性和无障碍性的网页内容。

摘要由CSDN通过智能技术生成

HTML 5 还增加了一些纯语义性的块级元素： aside figure dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。 aside aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWo

HTML 5 还增加了一些纯语义性的块级元素：

aside　　figure 　　dialog

我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。

aside

aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWorks 文章中，经常会看到用表格形式编写的边栏，见代码3 用 HTML 4 编写的 developerWorks 边栏。

示例代码 [www.dedecms.com]

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em }

However, Firefox doesn't yet support this syntax.

在 HTML 5 中，可以按照更有意义的方式编写这个边栏，见代码4 用 HTML 5 编写的 developerWorks 边栏。

示例代码 [www.dedecms.com]

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em }

However, Firefox doesn't yet support this syntax.

浏览器可以决定把这个边栏放在哪里(可能需要用一点儿 CSS 代码)。

figure

figure 元素代表一个块级图像，还可以包含说明。例如，在许多 developerWorks 文章中，可以看到代码5 用 HTML 4 编写的 developerWorks 图这样的标记其结果见图1。

示例代码 [www.dedecms.com]Figure 2. Install Mozilla XForms dialog

src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />

图 1. Install Mozilla XForms dialog

在 HTML 5 中，可以按照更有语义性的方式编写这个图，见代码6 用 HTML 5 编写的 developerWorks 图。

示例代码 [www.dedecms.com]

Figure 2. Install Mozilla XForms dialog

src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />

最重要的是，浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。

figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。

dialog

dialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者，HTML 5 dd 元素可以表示讲话内容。所以，在老式浏览器中也可以以合理的方式显示对话。代码7 显示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段闻名对话。

代码7. 用 HTML 5 编写的 Galilean 对话

示例代码 [www.dedecms.com]

Simplicius According to the straight line AF,

and not according to the curve, such being already excluded

for such a use.

Sagredo But I should take neither of them,

seeing that the straight line AF runs obliquely. I should

draw a line perpendicular to CD, for this would seem to me

to be the shortest, as well as being unique among the

infinite number of longer and unequal ones which may be

drawn from the point A to every other point of the opposite

line CD.