国产精品色呦呦,国产精品18久久久,麻豆国产欧美一区二区三区r

主頁(yè) > 知識(shí)庫(kù) > HTML5的結(jié)構(gòu)和語(yǔ)義(3):語(yǔ)義性的塊級(jí)元素

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

　　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-value"><spanclass="smalltitle">.xf-value</span></a></p>
<p>
The<codetype="inline">.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::value</code>pseudo-classinsteadlikeso:
</p>
<tableborder="0"cellpadding="0"cellspacing="0"width="100%">
<tbody><tr><tdclass="code-outline">
<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中，可以按照更有意義的方式編寫(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>

<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>

　　瀏覽器可以決定把這個(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ù)）

標(biāo)簽：常德松原廣東果洛阿克蘇鄂爾多斯廣西蚌埠

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5的結(jié)構(gòu)和語(yǔ)義(3):語(yǔ)義性的塊級(jí)元素》，本文關(guān)鍵詞 HTML5,的,結(jié)構(gòu),和,語(yǔ)義,性的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。