HTML巢狀規則

2022-09-13 16:51:14 字數 2161 閱讀 7040

先說基礎,html標籤有兩類:

1、塊級元素

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul……

特點:總是在新行上開始,高度、行高以及頂和底邊距都可控制,寬度預設的它的容器的100%,除非設定乙個寬度。

2、行內元素

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、sup、textarea、tt、u、var……

功能:用於加強內容顯示,控制細節,例如:加粗、斜體等。

雖然html標籤有很多,並且我們在製作頁面的時候可以無限的巢狀,但是巢狀也有規則,不能隨意的巢狀。

有些標籤是固定的巢狀規則,例如:ul包含li、ol包含li、dl包含dt和dd等,還有很多是獨立的標籤。為了寫出更優秀的頁面,一般遵循下面的規則:

1、塊級元素與塊級元素平級、內聯元素與內聯元素平級;

<

div><

span

>

span

><

p>

p>

div>

//span是內行元素,p是塊級元素,所以這個是錯誤的巢狀

<

div><

span

>

span

><

a>

a>

div> //這個是正確的巢狀

2、塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其他的內聯元素;

<

div><

span

>

span

>

div>

<

span

><

span

>

span

>

span

>

3、有幾個特殊的塊級元素只能包含內聯元素,不能再包含塊級元素;

h1、h2、h3、h4、h5、h6、p、dt
4、塊級元素不能放在標籤p裡面;

5、li標籤可以包含div標籤,因為li和div標籤都是裝在內容的容器。

小結:為了提高瀏覽器的渲染效率,我們應該盡少的巢狀標籤,扁平化。

關於html5新特性

在html5 中,元素不再按照display屬性來區分,而是按照內容模型來區分,分為:

元資料型(metadata content)是可以被用於說明其他內容的表現或行為,或者在當前文件和其他文件之間建立聯絡的元素;

區塊型(sectioning content)是用於定義標題及頁尾範圍的元素;

標題型(heading content)定義乙個區塊/章節的標題;

文件流型(flow content)是在應用程式和文件的主體部分中使用的大部分元素;

語句型(phrasing content)是用於標記段落級文字的元素;

內嵌型(embedded content)是引用或插入到文件中其他資源的元素;

互動型(interactive content)是專門用於與使用者互動的元素。

元素不屬於任何乙個類別,被稱為穿透的;元素可能屬於不止乙個類別,稱為混合的。

下面對常用標籤的巢狀規則進行總結

1、、、、、、、的子元素是語句型元素

2、、不可巢狀、

3、的子元素是transparent(以它的父元素允許的子元素為準),但不包括互動型元素(interactive content)

4、不可巢狀

5、子元素是語句型元素,不可巢狀互動型元素(interactive content)

6、不可巢狀

7、、不可巢狀、、區塊型元素(sectioning content)、標題型元素(heading content)

HTML的巢狀規則

塊元素 block 一般用來搭建 架構 布局 承載內容 像這些大體力活都屬於塊級元素的。行元素 inline 一般用在 內容之中的某些細節或部位,用以 強調 區分樣式 上標 下標 錨點 等等。1 form表單不能直接包含input元素。原因在於input屬於行內元素,form只能包含塊元素。2 不能...

HTML標籤巢狀規則

塊級元素和內嵌元素的區別 div ul li dl dt dd h1 h6 p address 內嵌元素一般用在 內容之中的某些細節或部位,用以 強調 區分樣式 上標 下標 錨點 等等,下面這些標籤都屬於內嵌元素 a span strong sub sup img 塊元素 和 內嵌元素 是可以互相轉...

HTML 的巢狀規則

標籤是文字標籤,一般巢狀用文字。1.a標籤最好不要巢狀塊級元素,可以巢狀內聯元素,但是不能巢狀a標籤和input之類的標籤。能巢狀的標籤像,等等。2.ul和ol的子元素不能是別的元素只能是li,不能是別的比如div等,但是li中可以是div,要不然在ie6和7下回把非li解析到li的內部。這個切記沒...