HTML 5教程(三) - 块级元素

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

aside

figure

dialog

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

aside

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

.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 边栏。

.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。

Figure 2. Install Mozilla XForms dialog

图 1. Install Mozilla XForms dialog