HTML 5 還增加了一些純語(yǔ)義性的塊級(jí)元素：   aside  figure   dialog   我在文章和書(shū)中一直使用前兩個(gè)元素。第三個(gè)元素我不經(jīng)常用，它主要用于書(shū)面文本。 aside &…
HTML 5 還增加了一些純語(yǔ)義性的塊級(jí)元素：
aside figure dialog
我在文章和書(shū)中一直使用前兩個(gè)元素。第三個(gè)元素我不經(jīng)常用，它主要用于書(shū)面文本。
aside
aside 元素代表說(shuō)明、提示、邊欄、引用、附加注釋等，也就是敘述主線之外的內(nèi)容。例如，在 developerWorks 文章中，常常會(huì)看到用表格形式編寫(xiě)的邊欄，見(jiàn)代碼3 用 HTML 4 編寫(xiě)的 developerWorks 邊欄。
Example Source Code [www.qiegegongcheng.com]
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="http://www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> 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
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
</td></tr></tbody></table><br>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</td></tr></table>
在 HTML 5 中，可以按照更有意義的方式編寫(xiě)這個(gè)邊欄，見(jiàn)代碼4 用 HTML 5 編寫(xiě)的 developerWorks 邊欄。
Example Source Code [www.qiegegongcheng.com]
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> 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
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>
瀏覽器可以決定把這個(gè)邊欄放在哪里（可能需要用一點(diǎn)兒 CSS 代碼）。
figure
figure 元素代表一個(gè)塊級(jí)圖像，還可以包含說(shuō)明。例如，在許多 developerWorks 文章中，可以看到代碼5 用 HTML 4 編寫(xiě)的 developerWorks 圖 這樣的標(biāo)記其結(jié)果見(jiàn)圖1。
Example Source Code [www.qiegegongcheng.com]
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />
圖 1. Install Mozilla XForms dialog
.jpg)
在 HTML 5 中，可以按照更有語(yǔ)義性的方式編寫(xiě)這個(gè)圖，見(jiàn)代碼6 用 HTML 5 編寫(xiě)的 developerWorks 圖。
Example Source Code [www.qiegegongcheng.com]
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>
最重要的是，瀏覽器（尤其是屏幕閱讀器）可以明確地將圖和說(shuō)明聯(lián)系在一起。
figure 元素不只可以顯示圖片。還可以使用它給 audio、video、iframe、object 和 embed 元素加說(shuō)明。
dialog
dialog 元素表示幾個(gè)人之間的對(duì)話。HTML 5 dt 元素可以表示講話者，HTML 5 dd 元素可以表示講話內(nèi)容。所以，在老式瀏覽器中也可以以合理的方式顯示對(duì)話。代碼7 顯示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名對(duì)話。
代碼7. 用 HTML 5 編寫(xiě)的 Galilean 對(duì)話
Example Source Code [www.qiegegongcheng.com]
<dialog>
<dt>Simplicius </dt>
<dd>According to the straight line AF,
and not according to the curve, such being already excluded
for such a use.</dd>
<dt>Sagredo </dt>
<dd>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. </dd>
<dt>Salviati </dt>
<dd><p> Your choice and the reason you
adduce for it seem to me most excellent. So now we have it
that the first dimension is determined by a straight line;
the second (namely, breadth) by another straight line, and
not only straight, but at right angles to that which
determines the length. Thus we have defined the two
dimensions of a surface; that is, length and breadth. </p>
<p> But suppose you had to determine a height—for
example, how high this platform is from the pavement down
below there. Seeing that from any point in the platform we
may draw infinite lines, curved or straight, and all of
different lengths, to the infinite points of the pavement
below, which of all these lines would you make use of? </p>
</dd>
</dialog>
對(duì)于這個(gè)元素的準(zhǔn)確語(yǔ)法還有爭(zhēng)議。一些人希望在 dialog 元素中嵌入非對(duì)話文本（比如劇本中的舞臺(tái)說(shuō)明），還有人不喜歡擴(kuò)展 dt 和 dd 元素的作用。盡管在具體語(yǔ)法方面有爭(zhēng)議，但是大多數(shù)人都認(rèn)為以這樣的語(yǔ)義性方式表達(dá)對(duì)話是好事情。
