杭州江干区有哪些民宿装修设计公司

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

装修民宿需要注意哪些

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

先來看以下這樣一段代碼:

<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實現的網站界面設計欣賞

民宿装修设计效果图

民宿卧室装修效果图

疫苗没上市搞哪门子预约?

莎普爱思收购莆田系医院

礼来COVID-19抗体试验叫停

桐庐有哪些全屋智能整装公司-Svy3

桐庐有哪些全屋定制公司-62cs

桐庐有哪些全屋整装公司-QlGw

桐庐有哪些日式家装公司-7Mx6

桐庐有哪些日式装修公司-HNt5

桐庐有哪些实木全屋定制公司-JjeV

桐庐有哪些实木整装公司-r6uH

桐庐有哪些室内设计公司-ksLc

桐庐有哪些室内装修公司-mrr3

桐庐有哪些室内装修设计公司-Rbp0

桐庐有哪些水泥自流平家装公司-mMtG

桐庐有哪些小户型装修公司-fYm2

桐庐有哪些小户型家装公司-1Tca

桐庐有哪些新房装修公司-sbEI

桐庐有哪些一站式家装公司-d1p5

桐庐有哪些医院装修公司-3NSW

桐庐有哪些幼儿园装修公司-kAGE

桐庐有哪些整体家装公司-2Eud

桐庐有哪些整装设计公司-4QhC

桐庐有哪些整装装修公司-47DR

浙江办公室装修-sqKix

浙江便宜的装饰公司-ETexK

浙江便宜的装修公司-uYCpp

浙江办公室装修公司排行-XbyHU

浙江别墅装潢设计-aONAX

浙江别墅装修哪家好-tRIzo

浙江餐厅装饰设计-BhRfY

浙江别墅装修公司排行-EwDZX

浙江别墅装修-ODbUR

浙江厂房装修设计-OTUlA

浙江厂房装修哪家好-Uzndt

浙江厂房装修-Llazv

浙江厂房装修公司排行-RIiNi

浙江厂房装修设计哪家好-njASk

浙江厂房装修设计公司排行-JEdQu

浙江出租房装修哪家好-vcGrQ

浙江出租房装修设计-nDwDW

浙江出租房装修-jHwIw

浙江出租房装修设计公司排行-qEjCT

新津最好的实木整装公司-MTwYj

装修民宿需要注意哪些__民宿装修设计效果图__民宿卧室装修效果图__民宿装修风格案例欣赏__昆明民宿装修设计__桂林民宿装修设计__青岛民宿装修设计__私人民宿装修效果图__杭州企业展厅设计