HTML5标签嵌套规则

html5出现前,常把元素按display属性分为块级元素、行内元素、内联块元素。
而在html5中,按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。
元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。

  • 元数据元素:是可以被用于说明其他内容的表现或行为,或在当前文档和其他文档之间建立联系的元素。

base 、 link 、 meta 、 script 、 style 、 template 、 title 、 noscript

  • 流元素:是在应用程序和文档的主体部分中使用的大部分元素。

a 、 abbr 、address、area(如果它是map元素的子元素)、 article 、 aside 、audio、 b 、bdi、bdo、blockquote、br、 button 、 canvas 、ciite、code、data、datalist、del、dfn、 div 、 dl 、em、embed、fieldset、figure、footer 、form 、 h1~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

  • 区块型元素:是用于定义标题及页脚范围的元素。

article、 aside、 nav 、 section

  • 标题型元素:定义一个区块/章节的标题。

h1~h6

  • 语句型元素:用于标记段落级文本的元素。

a 、abbr、 audio、 b 、button、 canvcas 、cite、 data 、 i 、 img 、 input 、 map 、object 、select 、 span 、textarea、 time 、video 、…

  • 嵌入型元素:引用或插入到文档中其他资源的元素。

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

  • 交互型元素:专门用于与用户交互的元素。

a 、 audio(如果设置了controls属性) 、 button 、 embed 、 iframe 、img(如果设置了usemap属性) 、 imputed(如果type属性不为hidden)keygen、 label 、object(如果设置了usemap属性) 、 select 、 textarea 、 video(如果设置了controls属性)

  1. ....

    的子元素是语句型元素

  2. 不可嵌套
  3. 的子元素是transparent(以他父元素允许的元素为准),但不包括交互型元素
  4. 不可嵌套
  5. 不可嵌套
  6. 不可嵌套