HTML5的结构和语义(3):语义性的块级元素

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

　　
aside　　figure　　dialog

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


aside

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

<tablealign=”right”border=”0″cellpadding=”0″cellspacing=”0″width=”40%”>

<tbody><tr><tdwidth=”10″>

<imgalt=””src=”//www.ibm.com/i/c.gif”height=”1″width=”10″></td>

<td>

<tableborder=”1″cellpadding=”5″cellspacing=”0″width=”100%”>

<tbody><tr><tdbgcolor=”#eeeeee”>

<p><aname=”xf-value”><spanclass=”smalltitle”>.xf-value</span></a></p>

<p>

the<codetype=”inline”>.xf-value</code>lectorudherestylestheinput

fieldvaluebutnotitslabel.thisisactuallyinconsistent

wi中专有什么专业ththecurrentcss3draft.theexamplereallyshoulduthe

<codetype=”inline”>::value</code>pudo-classinsteadlikeso:

</p>

<tableborder=”0″cellpadding=”0″cellspacing=”0″width=”100%”>

<tbody><tr><tdclass=”code-outline”>

&l耳鸣保健操t;preclass=”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,firefoxdoesn’tyetsupportthissyntax.

</p>

</td></tr></table>

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

<aside>

<世界上最大的半岛是h3>.xf-value</h3>

<p>

the<codetype=”inline”>.xf-value</code>lectorudheres就业指导心得体会tylestheinput

fieldvaluebutnotitslabel.thisisactuallyinconsistent

withthecurrentcss3draft.theexamplereallyshoulduthe

<codetype=”inline”>::value</code>pudo-classinsteadlikeso:
台风预警颜色
</p>

<preclass=”displaycode”>input::value{width:20em;}

#ccnumber::value{width:18em}

#zip::value{width:12em}

#state::value{width:3em}</pre>

<p>

however,firefoxdoesn’tyetsupportthissyntax.

</p>

</aside>

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


figure

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

<aname=”fig2″><b>figure2.installmozillaxformsdialog</b></a><br/>

<imgalt=”awebsiteisrequestingpermissiontoinstallthefollowingitem:

mozillaxforms0.7unsigned”

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

<br/>

图1.installmozillaxformsdialog

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

<figureid=”fig2″>

<legend>figure2.installmozillaxformsdialog</legend>

<imgalt=”awebsiteisrequestingpermissiontoinstallthefollowingitem:

mozillaxforms0.7unsigned”

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

</figure>

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

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


dialog

　　dialog元素表示几个人之间的对话。html5dt元素可以表示讲话者，html5dd元素可以表示讲话内容。所以，在老式浏览器中也可以以合理的方式显示对话。代码7显示在galileo的“dialogueconcerningthetwochiefworldsystems”上的一段著名对话。

　　代码7.用html5编写的galilean对话

<dialog>

<dt>simplicius</dt>

<dd>accordingtothestraightlineaf,

andnotaccordingtothecurve,suchbeingalreadyexcluded

forsuchau.</dd>

<dt>sagredo</dt>

<dd>butishouldtakeneitherofthem,

eingthatthestraightlineafrunsobliquely.ishould

drawalineperpendiculartocd,forthiswouldemtome

tobetheshortest,aswellasbeinguniqueamongthe

infinitenumberoflongerandunequaloneswhichmaybe

drawnfromthepointatoeveryotherpointoftheopposite

linecd.</dd>

<dt>salviati</dt>

<dd><p>yourchoiceandthereasonyou

adduceforitemtomemostexcellent.sonowwehaveit

thatthefirstdimensionisdeterminedbyastraightline;

thecond(namely,breadth)byanotherstraightline,and

notonlystraight,butatrightanglestothatwhich

determinesthelength.thuswehavedefinedthetwo

dimensionsofasurface;thatis,lengthandbreadth.</p>

<p>butsuppoyouhadtodetermineaheight—for

example,howhighthisplatformisfromthepavementdown

belowthere.eingthatfromanypointintheplatformwe

maydrawinfinitelines,curvedorstraight,andallof

differentlengths,totheinfinitepointsofthepavement

below,whichofallthelineswouldyoumakeuof?</p>

</dd>

</dialog>

　　对于这个元素的准确语法还有争议。一些人希望在dialog元素中嵌入非对话文本（比如剧本中的舞台说明），还有人不喜欢扩展dt和dd元素的作用。尽管在具体语法方面有争议，但是大多数人都认为以这样的语义性方式表达对话是好事情。

　　

　　（待续）