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

互聯網 ? 發布時間：2008-10-17 18:55:35 ? 作者：佚名 ? 我要評論

HTML5還增加了一些純語義性的塊級元素：

aside　　figure　　dialog

我在文章和書中一直使用前兩個元素。第三個元素我不經常用，它主要用于書面文本。

aside

aside元素代表說明、提示、邊欄、引用、附加注釋等，也就是敘述主線之外的內容。例如，在developer

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}

However,Firefoxdoesn'tyetsupportthissyntax.

在HTML5中，可以按照更有意義的方式編寫這個邊欄，見代碼4用HTML5編寫的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}

However,Firefoxdoesn'tyetsupportthissyntax.

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

figure

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

Figure2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"

src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>

圖1.InstallMozillaXFormsdialog

在HTML5中，可以按照更有語義性的方式編寫這個圖，見代碼6用HTML5編寫的developerWorks圖。

Figure2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"

src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>

最重要的是，瀏覽器(尤其是屏幕閱讀器)可以明確地將圖和說明聯系在一起。

figure元素不只可以顯示圖片。還可以使用它給audio、video、iframe、object和embed元素加說明。

dialog

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

代碼7.用HTML5編寫的Galilean對話

SimpliciusAccordingtothestraightlineAF,

andnotaccordingtothecurve,suchbeingalreadyexcluded

forsuchause.

SagredoButIshouldtakeneitherofthem,

seeingthatthestraightlineAFrunsobliquely.Ishould

drawalineperpendiculartoCD,forthiswouldseemtome

tobetheshortest,aswellasbeinguniqueamongthe

infinitenumberoflongerandunequaloneswhichmaybe

drawnfromthepointAtoeveryotherpointoftheopposite

lineCD.

Salviati

Yourchoiceandthereasonyou

adduceforitseemtomemostexcellent.Sonowwehaveit

thatthefirstdimensionisdeterminedbyastraightline;

thesecond(namely,breadth)byanotherstraightline,and

notonlystraight,butatrightanglestothatwhich

determinesthelength.Thuswehavedefinedthetwo

dimensionsofasurface;thatis,lengthandbreadth.

Butsupposeyouhadtodetermineaheight—for

example,howhighthisplatformisfromthepavementdown

belowthere.Seeingthatfromanypointintheplatformwe

maydrawinfinitelines,curvedorstraight,andallof

differentlengths,totheinfinitepointsofthepavement

below,whichofalltheselineswouldyoumakeuseof?

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

(待續)

相關文章

html中 img標簽顯示圖片中心的方法目前知道三種，下面小編把他分享到腳本之家平臺，需要的朋友參考下2017-04-13

這篇文章給大家整理了html5新增的九個標簽，非常不錯，需要的朋友參考下2017-04-13

本文檔主要講述的是Html Mate 標簽使用詳解；meta是html語言head區的一個輔助性標簽。meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參2017-03-19

本文給大家介紹了html5中各種頭部meta標簽功能小結，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-03-13

HTML5規范畢竟是剛剛才定義完成的規范，還有一些瀏覽器并不能支持其中的新標簽和新屬性，尤其是IE8及以下版本瀏覽器。下面給大家介紹處理HTML5新標簽的瀏覽器兼容版問題，2017-03-13

本文檔主要講述的是HTML中的base標簽；希望本文檔會給有需要的朋友帶來幫助；感興趣的朋友可以過來看看2017-02-17

行內塊(inline-block)是非常有用的特別是想要不用'block'和'float'來控制這些行內元素的margin,padding之時，行內元素之間的空白有時候顯示在屏幕上那是相當的討厭2013-08-28

html標簽分為兩種，內聯元素和塊級元素，塊級元素：一般是其它元素的容器；內聯元素：只能容納文本或者其他內聯元素；首先我們先了解一下內聯元素和塊級元素的概念2013-11-18

你沒看錯:用一個A標簽包裹塊級元素，在HTML5以前，a標簽屬于行內元素，而div,h1,p 等為塊級元素，如果強行包裹，可能會被強行截斷為多個a標簽，感興趣的朋友可以了解些2013-08-23

塊級元素(block)特性:總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;內聯元素(inline)特性:和相鄰的內聯元素在同一行，接下來為大家詳細介紹下，感2013-03-25

最新評論

總結

以上是生活随笔為你收集整理的html5语义元素表,HTML5的结构和语义(3):语义性的块级元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。