HTML5的結構和語義(3)-語義性的塊級元素_0

2020-03-24 18:45:49

字體：大中小

來源：轉載

供稿：網友

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-html' target='_blank'>value span > p
The codetype= inline .xf-value /code selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrent CSS3draft.Theexamplereallyshouldusethe
codetype= inline ::value /code pseudo-classinsteadlikeso:
/p
tableborder= 0 cellpadding= 0 cellspacing= 0 width= 100%
tbody tr td > pre >#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 selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
codetype= inline ::value /code pseudo-classinsteadlikeso:
/p

pre >#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
forsuchause. /dd

dt Sagredo /dt
dd ButIshouldtakeneitherofthem,
seeingthatthestraightlineAFrunsobliquely.Ishould
drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe
infinitenumberoflongerandunequaloneswhichmaybe
drawnfromthepointAtoeveryotherpointoftheopposite
lineCD. /dd

dt Salviati /dt
dd p Yourchoiceandthereasonyou
adduceforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;
thesecond(namely,breadth)byanotherstraightline,and
notonlystraight,butatrightanglestothatwhich
determinesthelength.Thuswehavedefinedthetwo
dimensionsofasurface;thatis,lengthandbreadth. /p

p Butsupposeyouhadtodetermineaheight for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below,whichofalltheselineswouldyoumakeuseof? /p
/dd
/dialog
對于這個元素的準確語法還有爭議。一些人希望在dialog元素中嵌入非對話文本（比如劇本中的舞臺說明），還有人不喜歡擴展dt和dd元素的作用。盡管在具體語法方面有爭議，但是大多數人都認為以這樣的語義性方式表達對話是好事情。

（待續）html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html文件中flash視頻格式(flv、swf)文件的嵌入方法

下一篇：HTML和XML的區別分析