HTML5的結構與語意(3):語意性的區塊級元素_html5教學技巧

　　HTML5也增加了一些純語意性的區塊級元素：
　　aside　　figure　　dialog
　　我在文章和書中一直使用前兩個元素。第三個元素我不常用，它主要用於書面文字。
aside
　　aside元素代表說明、提示、邊欄、引用、附加註釋等，也就是敘述主線之外的內容。例如，在developerWorks文章中，常常會看到用表格形式寫的側邊欄，見程式碼3用HTML4編寫的developerWorks側邊欄。

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}

.xf-valueThe.xf-valueselectorusedherestylestheinputfieldvaluebutnotitslabel. ThisisactuallyinconsistentwiththecurrentCSS3draft.Theexamplereallyshouldusethe::valuepseudo-classinsteadlikeso:input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em} However,Firefoxdoesn'tyetsupportthissyntax.
　　在HTML5中，可以用更有意義的方式寫這個邊欄，見程式碼4用HTML5寫的developerWorks邊欄。

.xf-value

The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitsel.Thisisactually 🎜>pseudo- classinsteadlikeso:

::value

input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}However,Firefoxdoesn'tyetsupportthissynt.
However,Firefoxdoesn'tyetsupportthissynt.

However,Firefoxdoesn'tyetsupportthissynt.

　　瀏覽器可以決定把這個邊欄放在哪裡（可能需要用一點兒CSS代碼）。

figure

　　figure元素代表一個區塊級影像，還可以包含說明。例如，在許多developerWorks文章中，可以看到程式碼5用HTML4編寫的developerWorks圖這樣的標記其結果見圖1。
Figure2.InstallMozillaXFormsdialog

MillaftSmoc​​okft.Dcem>YoYYYYoY;25;205&Ft.Sformi​​UF.UpiUp.iTem>MiformatSc​​Um​​Um​​Um​​_ift. ="317"hspace="5"vspace="5"width="331"/>

圖1.InstallMozillaXFormsdialog

　　在HTML5中，可以用更有語意的方式寫這張圖，見程式碼6用HTML5寫的developerWorks圖。



Figure2.InstallMozillaXFormsdialog
MozillaXForms0.7Unsignedinstallthefollowingitem:MozillaXForms0.7Unsigned "hspace="5"vspace="5"width="331"/>

　　最重要的是，瀏覽器（尤其是螢幕閱讀器）可以明確地將圖和說明連結在一起。 　　figure元素不只可以顯示圖片。也可以使用它來為audio、video、iframe、object和embed元素加說明。

dialog
　　dialog元素表示幾個人之間的對話。 HTML5dt元素可以表示講話者，HTML5dd元素可以表示講話內容。所以，在老式瀏覽器中也可以以合理的方式顯示對話。程式碼7顯示在Galileo的「DialogueConcerningtheTwoChiefWorldSystems」上的一段著名對話。
　　程式碼7.用HTML5寫的Galilean對話

Simplicius


AccordingtothestraightlineAF,

andnotaccordingtothecurve,suchbeingalreadyexcluded
ButIshouldtakeneitherofthem,

seeingthatthestraightlineAFrunsobliquely.Ishould

drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe pointAtoeveryotherpointoftheopposite

lineCD.

Salviati

Yourchoiceandthereasonyou

adduceforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;thesecondn,namely,breadmensionisdeterminedbyastraightline;thesecondn,namely,breadth), kp3,breadi; determinesthelength.Thuswehavedefinedthetwo
dimensionsofasurface;thatis,lengthandbreadth .


Butsupposeyouhadtodetermineaheight—for
example,howhighthisplatformisfromthepavementdown

belowthere.Seeingthatfromanypointintheplatformobelow,whichofalltheselineswouldyoumakeuseof?

　　對於這個元素的準確語法還有爭議。有些人希望在dialog元素中嵌入非對話文本（例如劇本中的舞台說明），也有人不喜歡擴展dt和dd元素的作用。儘管在具體語法方面有爭議，但是大多數人都認為以這樣的語義性方式表達對話是好事情。
　　
　　（待續）