日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

html5块元素怎么理解,HTML5-块级元素

發布時間:2024/10/12 HTML 89 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html5块元素怎么理解,HTML5-块级元素 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML 5 還增加了一些純語義性的塊級元素:

aside  figure   dialog

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

aside

aside

元素代表說明、提示、邊欄、引用、附加注釋等,也就是敘述主線之外的內容。例如,在 developerWorks 文章中,常常會看到用表格形式編寫的邊欄,見代碼3

用 HTML 4 編寫的 developerWorks 邊欄。

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em}

However, Firefox doesn't yet support this syntax.

在 HTML 5 中,可以按照更有意義的方式編寫這個邊欄,見代碼4 用 HTML 5 編寫的 developerWorks 邊欄。

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em}

However, Firefox doesn't yet support this syntax.

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

figure

figure 元素代表一個塊級圖像,還可以包含說明。例如,在許多 developerWorks 文章中,可以看到代碼5 用 HTML 4 編寫的 developerWorks 圖 這樣的標記其結果見圖1。Figure 2. Install Mozilla XForms dialog

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

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

Figure 2. Install Mozilla XForms dialog

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

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

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

dialog

dialog 元素表示幾個人之間的對話。HTML 5 dt 元素可以表示講話者,HTML 5 dd 元素可以表示講話內容。所以,在老式瀏覽器中也可以以合理的方式顯示對話。代碼7 顯示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名對話。

代碼7. 用 HTML 5 編寫的 Galilean 對話

Simplicius According to the straight line AF,

and not according to the curve, such being already excluded

for such a use.

Sagredo But I should take neither of them,

seeing that the straight line AF runs obliquely. I should

draw a line perpendicular to CD, for this would seem to me

to be the shortest, as well as being unique among the

infinite number of longer and unequal ones which may be

drawn from the point A to every other point of the opposite

line CD.

Salviati

Your choice and the reason you

adduce for it seem to me most excellent. So now we have it

that the first dimension is determined by a straight line;

the second (namely, breadth) by another straight line, and

not only straight, but at right angles to that which

determines the length. Thus we have defined the two

dimensions of a surface; that is, length and breadth.

But suppose you had to determine a height—for

example, how high this platform is from the pavement down

below there. Seeing that from any point in the platform we

may draw infinite lines, curved or straight, and all of

different lengths, to the infinite points of the pavement

below, which of all these lines would you make use of?

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

以上就是HTML 5-塊級元素的內容,更多相關內容請關注PHP中文網(www.gxlcms.com)!

本條技術文章來源于互聯網,如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源:php中文網

總結

以上是生活随笔為你收集整理的html5块元素怎么理解,HTML5-块级元素的全部內容,希望文章能夠幫你解決所遇到的問題。

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