首頁 > 網頁教程 > HTML > HTML5的元素嵌套規則

精准两肖两码中特:HTML5的元素嵌套規則

時間:2013-08-10    來源:smallni

香港两肖两码中特网 www.eqmlf.icu 先來看以下這樣一段代碼:

<ul>
   <li><h4><a href=""><div></div></a></h4></li>
 </ul>

當然,我是不會告訴你這段代碼來自于FACEBOOK的 ,各位認為以上元素的嵌套有沒有問題呢?我們會在后面討論這個。

HTML4/XHTML的嵌套規則

在我們的印象中會有這樣的嵌套規則:

html4

 

內聯元素不能嵌套塊元素<p>元素和<h1~6>元素不能嵌套塊元素

那么到底什么是塊元素,什么是內聯元素?

以下是W3C CSS2.1規范中對塊元素和內聯元素的定義:

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

我們可以這樣理解:塊元素一般都從新行開始,內聯元素在一行內顯示,我們也可以通過CSS屬性display的'inline' 或 ' block' 來改變元素為內聯元素或塊元素,當然這是CSS中對元素的分類,顯然用 'display' 的屬性值來對html元素進行分類是不嚴謹的。

如果按照上述規則來講,那么FACEBOOK的做法就是一種錯誤的做法,因為他在內聯元素<a>元素中嵌套了塊元素元素<div>,但是細心的讀者應該會發現上述規則是基于HTML4/xHTML1的strict模式,而FACEBOOK現在已經統一使用了html5的doctype,那么這個規則到底還是是否適用?

HTML5的元素嵌套規則

元素的嵌套規則和頁面頭部申明的DTD有著千絲萬縷的關系,DTD基礎請查看我之前寫的文章《DTD詳解》,那么在最新的HTML5規范中是否對元素嵌套有著新的規范呢?

讓我們先了解下W3C在最新的HTML5規范中對元素的分類方式:

w3c html5 content

如上圖,元素的分類不再是塊元素或內聯元素這樣來分類(其實從來就沒有這樣分),而是按照如下分類來分:Flow(流式元素)、Heading(標題元素)、Sectioning(章節元素)、Phrasing(段落元素)、Embedded(嵌入元素)、Interactive(交互元素)、Metadata(元數據元素)。

Flow(流式元素)

在應用程序和文檔的主體部分中使用的大部分元素都被分類為流式元素。

a, abbr, address, area(如果它是map元素的后裔), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl,em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter,nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style(如果該元素設置了scoped屬性), sub, sup, svg, table,textarea, time, u, ul, var, video, wbr, text

Heading(標題元素)

標題式元素定義一個區塊/章節(section)(無論是明確的使用章節式內容的元素標記,或者標題式內容自身所隱含的)的標題。

h1, h2, h3, h4, h5, h6, hgroup

Sectioning(章節元素)

章節式元素是用于定義標題及頁腳范圍的元素。

article, aside, nav, section

Phrasing(段落元素)

段落式元素是文檔中的文本、標記段落級文本的元素。

a(如果其只包含段落式元素), abbr, area(如果它是map元素的后裔), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(如果其只包含段落式元素), dfn, em, embed, i,iframe, img, input, ins(如果其只包含段落式元素), kbd, keygen, label, map(如果其只包含段落式元素), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script,select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text

Embedded(嵌入元素)

嵌入式元素是引用或插入到文檔中其他資源的元素。

audio, canvas, embed, iframe, img, math, object, svg, video

Interactive(交互元素)

交互式元素是專門用于與用戶交互的元素。

a, audio(如果設置了controls屬性), button, details, embed, iframe, img(如果設置了usemap屬性), input(如果type屬性不為hidden狀態), keygen, label, menu(如果type屬性為toolbar狀態),object(如果設置了usemap屬性), select, textarea, video(如果設置了controls屬性)

Metadata(元數據元素)

元數據元素是可以被用于說明其他內容的表現或行為,或者在當前文檔和其他文檔之間建立聯系的元素

base,command,link,meta,noscript,script,style,title

各分類會有交叉或重疊的現象,這說明在html5中,元素可能屬于上述所有分類中的一個或多個。

例子(1):<h1>~<h6>元素:

  • Categories:
    • Flow content.
    • Heading content.
    • Palpable content.
  • Contexts in which this element can be used:
    • As a child of an hgroup element.
    • Where flow content is expected.
  • Content model:
    • Phrasing content.

其中的「Categories」說明該元素的類別,「Contexts in which this element can be used」說明該元素能在何種場景下被使用,也就是它的父元素是什么,「Content model」說明該元素可以包含的內容是什么,由于頁面中的元素是層層嵌套的,一個元素有可能既是父元素同時也是子元素的角色,所以下面我們以「Content model」也就是可包含的子元素做討論。

那么對于h1~h6元素:

  • 它們同時屬于Flow content 、Heading content Palpable content三個分類
  • 它們的父元素可以是<hgroup>,同時那些子元素是流式元素的元素也可以作為h1-h6元素的父元素
  • 它們允許的子元素是段落式元素

例子(2):<div>元素

  • Categories:
    • Flow content.
    • Palpable content.
  • Contexts in which this element can be used:
    • Where phrasing content is expected.
  • Content model:
    • Flow content.

對于<div>元素:

  • 同時屬于Flow content 、 Palpable content分類
  • 父元素必須是那些子元素為段落式元素的元素
  • 允許的子元素是流式元素

<div>元素允許的子元素是流式元素,流式元素基本涵括了頁面中的大部分元素,所以我們在用<div>時可以不用擔心嵌套錯誤的問題。

但對于<h1>~<h6>元素,它們允許的子元素為段落式元素,而段落式元素并不包含諸如<div>、<p>、<ul><ol>之類的元素,這就說明按照html5的規范,是不允許在標題元素內部嵌入<div>、<p>、<ul><ol>之類的元素。

例子(3):<a>元素

  • Categories:
    • Flow content.
    • Phrasing content.
    • Interactive content.
    • Palpable content.
  • Contexts in which this element can be used:
    • Where phrasing content is expected.
  • Content model:
    • Transparent, but there must be no interactive content descendant.

對于<a>元素:

  • 同時屬于Flow content 、 Phrasing content、Interactive content、Palpable content分類
  • 父元素必須是那些子元素為段落式元素的元素
  • 允許的子元素是以它的父元素允許的子元素為準,但不能包含交互式元素

這樣看<a>元素還是挺有意思的,允許的子元素要看它的父元素所能包含的子元素。

再來看文章開頭中提到的代碼

 <ul>
   <li><h4><a href=""><div></div></a></h4></li>
 </ul>

這時<a>的父元素為<h4>,對于<h1>~<h6>的標題元素上面已經提過,允許的子元素是段落式元素,那么此時對于<a>允許的子元素即為段落式元素,而段落式元素中是不包含<div>元素的,所以FCAEBOOK這樣的嵌套方法是錯誤的!

讓我們來把代碼做一下修改:

<ul>
   <li><div><a href=""><div></div></a></div></li>
 </ul>

這時<a>的父元素為<div>,而<div>元素允許的子元素是流式元素,流式元素中包含<div>元素,所以這樣的情形下在<a>里面嵌套<div>就是正確的做法!

相關推薦
HTML5大綱算法對結構的影響 網頁優化必學
如何在IE6等老式瀏覽器中使用HTML5的新標簽?
HTML5語義標簽兼容IE6等老舊瀏覽器的方法分析
使用JS代碼的方法讓IE6輕松支持HTML5標簽元素
HTML5建站教程:HTML5新標簽與HTML4舊標簽對應解釋及用法
讓所有的瀏覽器都能識別HTML5標簽樣式的小插件分享
網頁設計師必收藏的十五個HTML5資源
新手入門:HTML5是什么?
35個WEB開發必備的實用HTML5教程
18個國外HTML5網站布局編碼教程分享
網頁使用HTML5代碼需兼容IE的寫法分享
HTML5新手入門教程之第一篇:什么是HTML5?
從9個不同的方面深入分析HTML5的性能
HTML5帶給開發人員跨平臺的開發體驗
經歷8年時間 屬于HTML 5的春天才悄然到來
HTML5制作神器:零代碼制作屬于你的第一個酷炫H5頁面
能讓IE支持HTML5的解決方案
谷歌棄Gears瀏覽器插件 轉重點開發HTML5
采用HTML5搭建的多個網站嘗鮮試用
體驗HTML5 Canvas對象的強大 五款在線繪圖應用示例
HTML5新特性:用鏈接預取功能給網站提速
如何用HTML5制作網頁?
神奇的HTML5動畫效果演示網站
十三個網站案例讓你提前體驗HTML5和CSS3的魅力
基于HTML5的繪圖程序Muro,支持Wacom手寫繪圖板
HTML5的一些的趣味小應用
HTML5、CSS和JavaScript與Web移動應用的未來趨勢
十款基于HTML5開發的精彩WEB應用(HTML5網站演示)
學好HTML5必備的七個在線資源推薦
HTML5教程之表單功能詳解
四個HTML 5標簽、屬性、事件及瀏覽器兼容性速查表分享
15個采用HTML5實現的網站界面設計欣賞

精彩推薦

熱門教程

缅甸真人龙虎下载 幸运飞艇滚七码雪球计划群 六人牛牛房有挂吗 重庆时时单双 彩神大发快三必中计划 幸运飞艇最强软件 彩神计划软件官网客户端 2018最新捕鱼游戏大全 河北快速赚钱 黄金2肖4码discuz 香港太子2肖4码 合乐888计划软件 凤凰彩票官方app 千里马计划怎么避免连挂 幸运飞艇计划app软件 万人炸金花手机旧版