HTML5的結(jié)構(gòu)和語(yǔ)義(3)-語(yǔ)義性的塊級(jí)元素

2020-03-24 17:02:43

字體：大中小

供稿：網(wǎng)友

HTML5還增加了一些純語(yǔ)義性的塊級(jí)元素：
aside figure dialog
我在文章和書(shū)中一直使用前兩個(gè)元素。第三個(gè)元素我不經(jīng)常用，它主要用于書(shū)面文本。
aside
aside元素代表說(shuō)明、提示、邊欄、引用、附加注釋等，也就是敘述主線之外的內(nèi)容。例如，在developerWorks文章中，常常會(huì)看到用表格形式編寫(xiě)的邊欄，見(jiàn)代碼3用HTML4編寫(xiě)的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中，可以按照更有意義的方式編寫(xiě)這個(gè)邊欄，見(jiàn)代碼4用HTML5編寫(xiě)的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

瀏覽器可以決定把這個(gè)邊欄放在哪里（可能需要用一點(diǎn)兒CSS代碼）。
figure
figure元素代表一個(gè)塊級(jí)圖像，還可以包含說(shuō)明。例如，在許多developerWorks文章中，可以看到代碼5用HTML4編寫(xiě)的developerWorks圖這樣的標(biāo)記其結(jié)果見(jiàn)圖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中，可以按照更有語(yǔ)義性的方式編寫(xiě)這個(gè)圖，見(jiàn)代碼6用HTML5編寫(xiě)的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

最重要的是，瀏覽器（尤其是屏幕閱讀器）可以明確地將圖和說(shuō)明聯(lián)系在一起。
figure元素不只可以顯示圖片。還可以使用它給audio、video、iframe、object和embed元素加說(shuō)明。
dialog
dialog元素表示幾個(gè)人之間的對(duì)話。HTML5dt元素可以表示講話者，HTML5dd元素可以表示講話內(nèi)容。所以，在老式瀏覽器中也可以以合理的方式顯示對(duì)話。代碼7顯示在Galileo的 DialogueConcerningtheTwoChiefWorldSystems 上的一段著名對(duì)話。
代碼7.用HTML5編寫(xiě)的Galilean對(duì)話
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
對(duì)于這個(gè)元素的準(zhǔn)確語(yǔ)法還有爭(zhēng)議。一些人希望在dialog元素中嵌入非對(duì)話文本（比如劇本中的舞臺(tái)說(shuō)明），還有人不喜歡擴(kuò)展dt和dd元素的作用。盡管在具體語(yǔ)法方面有爭(zhēng)議，但是大多數(shù)人都認(rèn)為以這樣的語(yǔ)義性方式表達(dá)對(duì)話是好事情。

（待續(xù)）html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML中col標(biāo)簽里的漢字如何居中？HTML col標(biāo)簽的用法詳解

下一篇：html如何去掉超鏈接下劃線？html超鏈接去掉下劃線的方法介紹