解析HTML5中的標籤巢狀規則

下面小編就為大家帶來一篇HTML5標籤巢狀規則詳解【必看】。小編覺得挺不錯的，現在分享給大家，也給大家做個參考

前面的話
　　在html5中，3499910bf9dac5ae3c52d5ede7383485元素的子元素可以是塊級元素，這在以前是被認為不符合規則的。本文將詳細介紹html5的標籤嵌套規則

分類
　　 html5出現之前，常常把元素依照block、inline、inline-block來區分。在html5中，元素不再依照display屬性來區分，而是依照內容模型來區分。

分為元資料型(metadata content)、區塊型(sectioning content)、標題型(heading content)、文檔串流型(flow content)、語句型(phrasing content)、內嵌型( embedded content)、交互型(interactive content)。元素不屬於任何一個類別，被稱為穿透的；元素可能屬於不只一個類別，稱為混合的。

　元資料元素(metadata content)是可以用來說明其他內容的表現或行為，或是在目前文件和其他文件之間建立聯繫的元素

base link meta noscript script style template title

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

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

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

article aside nav section
　　標題型元素(heading content)定義一個區塊/章節的標題

h1 h2 h3 h4 h5 h6
　　語句型元素(phrasing content)是用來標記段落層級文字的元素

a abbr area (如果它是map元素的子級) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark matheter noscript obmarkjathect output progress q ruby​​ s samp script select small span strong sub sup svg template textarea time u var video wbr text
　　嵌入型元素(embedded content)是或插入到文件中其他資源的元素插入到文件的元素插入#content

##audio canvas embed iframe img math object svg video

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

a audio(如果設定了controls屬性) button embed iframe img(如果設定了usemap屬性) input(如果type屬性不為hidden) keygen label object(如果設定了usemap屬性) select textarea video (如果設定了controls屬性)

 

##子元素
【1】子元素是流元素

23c3de37f2f9ebcb477c4a90aac6fffd、2f8332c8dcfd5c7dec030a070bf652c3、b8a712a75cab9a5aded02f74998372b4、25edfb22a4f469ecb59f1190150159c6、152436f649dfcc2350c70c7083a3231e、614eb9dc63b3fb809437a716aa228d24、dc6dce4a544fdca2df29d5ac0ea9906b、61b85035edf2b42260fdb5632dc5728a、b6c5a531a458a2e790c1fd6421739d1c

　　【1.1】子元素是流元素，不含61b85035edf2b42260fdb5632dc5728a元素

#15221ee8cba27fc1d7a26c47a001eb9b ;、c787b9a589a3ece771e842a6176cf8e9

　　【1.2】子元素是流元素，但不包括f5d188ed2c074f8b944552db028f98a1元素

63bd76834ec05ac1f4c0ebbeaafb0994

　　【1.3】子元素是流元素，但不包括ff9c23ada1bcecdd1a0fb5d5a0f18437元素

ff9c23ada1bcecdd1a0fb5d5a0f18437

　　【1.4】子元素是流元素，但不包含1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、61b85035edf2b42260fdb5632dc5728a元素

1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、61b85035edf2b42260fdb5632dc5728a
　　【1.5】子元素是流元素，但不包括1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、區塊型元素(sectioning content)、標題型元素(heading content)

73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38e
　　【1.6】子元素是流元素，但不包括1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、91b6b3b8d168cd23d7a064c5f3a9565d
　　【1.7】子元素是一個614eb9dc63b3fb809437a716aa228d24元素，緊跟著流元素

24203f2f45e6606542ba09fd2181843a

　　【1.8】子元素是一個e911751791aa3ba95dc724e2fb905976元素，緊跟著流元素######3a40a4e7c73d4afbf61ba6910bd6f73f### ######【 2】子元素是語句型元素###

4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、e388a4556c0f65e1904146cc1a846bee、e03b848252eb9375d56be284e690e873、907fae80ddef53131f3292ee4f81644b、6617fd2188b7c67cf3783468f5ec15ff、d015d241ae6d34c34210679b5204fe85、2e44d2d3284d23d932e1fd85f3d4cf3a、f3a85e1241a187c5ac462d886e9a968b、1244aa79a84dea840d8e55c52dc97869、8a7974376be5f6c00c121222b727adb9、1d029f6197b5a3eb8a3fdf0a088ddf55、46dd80ba616c57a652514755c74c4211、ffbe95d20f3893062224282accb13e8f、b7f90f73cad438258bf67e62f79b2113、0bf371feb11b3435a89b2a675f897085、5e4e803d53d659f332070b5d4aa430db、b96cac025db4031319c29e1eb68f19d6、2cdea26b4c3988e37d674b56660962a7、5a8028ccc7a7e27417bff9f05adf5932、a4b561c25d9afb9ac8dc4d70affff419、88f336217b3880082bb52d49b5de60a5、f920514e6447cf1d171079d1371f007f、af4e6c3c591431c4583becd75d1c3582、71af07a0e88a1ac1ff73f855702ac153、f920514e6447cf1d171079d1371f007f、af4e6c3c591431c4583becd75d1c3582、71af07a0e88a1ac1ff73f855702ac153、f920514e6447cf1d171079d1371f007faf4e6c3c591431c4583becd75d1c3582、71af07a0e88a1ac1ff73f855702ac153、427924e0bc1c500e0479e017d951eadf、d5fd7aea971a85678ba271703566ebfd、be6d67dae90cc1ad6469079e163d0939、e911751791aa3ba95dc724e2fb905976、2e1cf0710519d5598b1f0f14c36ba674
　　【2.1】子元素是語句型元素，但不包含與本身相同的元素

#<

<

<

< ;dfn>、6ecb87e5318a36c03c59e25d55f43372、49c6123c49c6be380cb91db06cd3bfa9

　　【2.2】子元素是語句型元素，但不包含交互型元素(interactive content)

bb9345e55eb71822850ff156dfde57c8

 

#【3】子元素是transparent(以它的父元素允許的子元素為準)

426be984ffbbb815d7d88e3543a85d91、823db3943044a0a9a620ada8d4b1d965、dab9f699790ab0922e596ecb9f6677d5
　　【3.1 】子元素是transparent(以它的父元素允許的子元素為準)，但不包括交互型元素(interactive content)

3499910bf9dac5ae3c52d5ede7383485

　　【3.2】子元素可以沒有、可以是0c68fef83818661b6da588c77ca3985e元素，也可以是transparent(以它的父元素允許的子元素為準)

273238ce9338fbb04bee6997e5552b95

 

#【4】無子元素

f32b48428a809b51f04d3228cdf461fa、0c6dc11e160d3b678d68754cc175188a、37fcc81822f151c26d66e5caf9953670、a1f02c36ba31691bcfe87b2722de723b、d8e2720730be5ddc9c2a3782839e8eb6、0c68fef83818661b6da588c77ca3985e、e02da388656c3265154666b7c71a8ddc、9bf7cbf2c39baa37076a22499de2f6ed、0c68fef83818661b6da588c77ca3985e、e02da388656c3265154666b7c71a8ddc、e75b3a48b37097f940385d0377dc7b2e、03fc64e1e502d5ba947b3a9af06d2d2a 、581cdb59a307ca5d1e365becba940e05、aa983b9eb8086376f1f6481364a02e5a
　　【4.1】子元素可以沒有、可以是25edfb22a4f469ecb59f1190150159c6元素，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

09471ad0eb7abf3904b81228b087d334、ff6d136ddc5fdfeffaf53ff6ee95f185
　　【4.2】子元素可以沒有、可以是73de882deff7a050a357292d0a1fca94和67bc4f89d416b0b8236eaa5f43dee742元素，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

# 5c69336ffbc20d23018e48b396cdd57a
　　【4.3】子元素可以沒有，可以是5a07473c87748fb1bf73f23d45547ab8、5b7a15bed8615d1b843806256bebea72，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

221f08282418e2996498697df914ce4e
　　【4.4】子元素可以沒有，可以是5a07473c87748fb1bf73f23d45547ab8，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

5b7a15bed8615d1b843806256bebea72
　　【4.5】子元素可以是可以是沒有、可以是5a07473c87748fb1bf73f23d45547ab8元素

fc86e7b705049fc9d4fccc89a2e80ee3
　　【4.6】子元素可以沒有、也可以是9bf7cbf2c39baa37076a22499de2f6ed元素，也可以是e02da388656c3265154666b7c71a8ddc元素

#b97864c2e0ef2353a16c4d64c7734e92、39000f942b2545a5315c57fa3276f220
　　【4.7】子元素可以沒有，也可以是581cdb59a307ca5d1e365becba940e05、d477f9ce7bf77f53fbcf36bec1b69b7a元素

879b49175114808d868f5fe5e24c4e0b
　　　　4.8】子元素可以沒有，可以是a34de1251f0d9fe1e645927f19a896e8，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

92cee25da80fac49f6fb6eec5fd2c22a、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845

【4.9】子元素可以沒有，可以是a34de1251f0d9fe1e645927f19a896e8、b4d429308760b6c2d20d6300079ed38e，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

a34de1251f0d9fe1e645927f19a896e8

 

#【5】子元素是63bd76834ec05ac1f4c0ebbeaafb0994、879b49175114808d868f5fe5e24c4e0b、ae20bdd317918ca68efdc799512a9b39、06669983c3badb677f993a8c29d18845、92cee25da80fac49f6fb6eec5fd2c22a，也可以是3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a元素

f5d188ed2c074f8b944552db028f98a1

 

【6】子元素是文字內容

4750256ae76b6b9d804861d8f69e79d3　　【6.1】子元素可以沒有，也可以是文字內容
5a07473c87748fb1bf73f23d45547ab8

總結

　　關於每個元素的詳細巢狀規則，上部分已經詳細介紹。這部分主要對常用標籤的嵌套規則進行總結

　　[注意]將滑鼠移到深灰色背景的文字上，title將顯示該元素所包含的標籤

【1】 4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、e388a4556c0f65e1904146cc1a846bee的子元素是語句型元素

#【2】

#【2】 1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d不可嵌套1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d

【3】3499910bf9dac5ae3c52d5ede7383485的子元素是transparent(以它的父元素允許的子元素為準)，但不包括交互型元素(interactive content)######【4】ff9c23ada1bcecdd1a0fb5d5a0f18437不可巢狀ff9c23ada1bcecdd1a0fb5d5a0f18437######【5】bb9345e55eb71822850ff156dfde57c8子元素是語句型元素，不可嵌套交互型元素(interactive content)######【6】63bd76834ec05ac1f4c0ebbeaafb0994不可巢狀f5d188ed2c074f8b944552db028f98a1###

【7】73de882deff7a050a357292d0a1fca94、b4d429308760b6c2d20d6300079ed38e不可嵌套1aa9e5d373740b65a0cc8f0a02150c53、c37f8231a37e88427e62669260f0074d、區塊型元素(sectioning content)、標題型元素(heading content)

# 【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

3. HTML5之Video標籤詳解

4. HTML5不支援標籤與新增標籤詳解

以上是解析HTML5中的標籤巢狀規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！