HTML5中語義性的塊級元素有哪些

這篇文章給大家分享的是有關(guān)HTML5中語義性的塊級元素有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、彭山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、成都做商城網(wǎng)站、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為彭山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

瀏覽器可以決定把這個邊欄放在哪里（可能需要用一點兒CSS代碼）。
figure
figure元素代表一個塊級圖像，還可以包含說明。例如，在許多developerWorks文章中，可以看到代碼5用HTML4編寫的developerWorks圖這樣的標(biāo)記其結(jié)果見圖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>

最重要的是，瀏覽器（尤其是屏幕閱讀器）可以明確地將圖和說明聯(lián)系在一起。
figure元素不只可以顯示圖片。還可以使用它給audio、video、iframe、object和embed元素加說明。
dialog
dialog元素表示幾個人之間的對話。HTML5dt元素可以表示講話者，HTML5dd元素可以表示講話內(nèi)容。所以，在老式瀏覽器中也可以以合理的方式顯示對話。代碼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&mdash;for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below,whichofalltheselineswouldyoumakeuseof?</p>
</dd>
</dialog>
對于這個元素的準(zhǔn)確語法還有爭議。一些人希望在dialog元素中嵌入非對話文本（比如劇本中的舞臺說明），還有人不喜歡擴展dt和dd元素的作用。盡管在具體語法方面有爭議，但是大多數(shù)人都認為以這樣的語義性方式表達對話是好事情。

感謝各位的閱讀！關(guān)于“HTML5中語義性的塊級元素有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章名稱：HTML5中語義性的塊級元素有哪些
本文鏈接：http://muchs.cn/article24/piojje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、軟件開發(fā)、商城網(wǎng)站、網(wǎng)站設(shè)計、Google、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)