html5嵌套规则

html5嵌套规则

貌似在嵌套方面没有仔细了解过, 在html5中a标签也是可以嵌套块级元素的

分类

在html5中按照内容模型来区分,分为元数据型号, 区块型, 标题型, 文档流型, 语句型, 内嵌型, 交互型。元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。

'img'

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

  • 流元素(flow)是在应用程序和文档的主题部分中使用的大部分元素

1
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)是用于定义标题及页脚范围的元素
1
article aside nav section
  • 标题型元素(heading content)定义一个区块/章节的标题
1
article aside nav section
  • 标题型元素(heading content)定义一个区块/章节的标题
1
h1 h2 h3 h4 h5 h6
  • 语句型元素(phrasing content)是用于标记段落级文本的元素
1
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 math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text
  • 嵌入型元素(embedded content)是引用或插入到文档中其他资源的元素
1
audio canvas embed iframe img math object svg video
  • 交互型元素(interactive content)是专门用于与用户交互的元素
1
a audio(如果设置了controls属性) button embed iframe img(如果设置了usemap属性) input(如果type属性不为hidden) keygen label object(如果设置了usemap属性) select textarea video (如果设置了controls属性)

子元素

  • 子元素是流元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <article><section><blockquote><li><dd><figcaption><div><main><td>

    <aside> <nav> 不包含 <main>

    <caption> 不包含 <table>

    <form>不包含 自身

    <header><footer><main> 不包含 自身

    <dt><th> 不包含 <header><footer>、区块型元素(sectioning content)、标题型元素(heading content)
  • 子元素是语句型元素

1
2
3
4
5
6
常见的有

<h1><h2><h3><h4><h5><h6><p><pre><em><strong><small><span><input><output><legend><label>

<dfn><progress><meter>不包括和自身相同的元素
<button> 不包括交互型元素(interactive content)
  • 子元素是transparent(以它的父元素允许的子元素为准)
1
2
3
子元素是transparent(以它的父元素允许的子元素为准),但不包括交互型元素(interactive content)

<a>
  • 无子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
<hr><br><wbr><img><embed><param><source><track><area><col><keygen>

子元素可以没有、可以是<li>元素,也可以是<script><template>元素
<ol><ul>

子元素可以没有、可以是<dt><dd>元素,也可以是<script><template>元素
<dl>

子元素可以没有,可以是<option><optgroup>,也可以是<script><template>元素
<select>

子元素是文本内容
<textarea>

总结

  • h1>、

    的子元素是语句型元素

  • 不可嵌套

  • 行内元素尽量不要内嵌块级元素# html5嵌套规则

貌似在嵌套方面没有仔细了解过, 在html5中a标签也是可以嵌套块级元素的

分类

在html5中按照内容模型来区分,分为元数据型号, 区块型, 标题型, 文档流型, 语句型, 内嵌型, 交互型。元素不属于任何一个类别,被称为穿透的;元素可能属于不止一个类别,称为混合的。

'img'

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

  • 流元素(flow)是在应用程序和文档的主题部分中使用的大部分元素

1
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)是用于定义标题及页脚范围的元素
1
article aside nav section
  • 标题型元素(heading content)定义一个区块/章节的标题
1
article aside nav section
  • 标题型元素(heading content)定义一个区块/章节的标题
1
h1 h2 h3 h4 h5 h6
  • 语句型元素(phrasing content)是用于标记段落级文本的元素
1
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 math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text
  • 嵌入型元素(embedded content)是引用或插入到文档中其他资源的元素
1
audio canvas embed iframe img math object svg video
  • 交互型元素(interactive content)是专门用于与用户交互的元素
1
a audio(如果设置了controls属性) button embed iframe img(如果设置了usemap属性) input(如果type属性不为hidden) keygen label object(如果设置了usemap属性) select textarea video (如果设置了controls属性)

子元素

  • 子元素是流元素
1
2
3
4
5
6
7
8
9
10
11
<article><section><blockquote><li><dd><figcaption><div><main><td>

<aside> <nav> 不包含 <main>

<caption> 不包含 <table>

<form>不包含 自身

<header><footer><main> 不包含 自身

<dt><th> 不包含 <header><footer>、区块型元素(sectioning content)、标题型元素(heading content)
  • 子元素是语句型元素
1
2
3
4
5
6
常见的有

<h1><h2><h3><h4><h5><h6><p><pre><em><strong><small><span><input><output><legend><label>

<dfn><progress><meter>不包括和自身相同的元素
<button> 不包括交互型元素(interactive content)
  • 子元素是transparent(以它的父元素允许的子元素为准)
1
2
3
子元素是transparent(以它的父元素允许的子元素为准),但不包括交互型元素(interactive content)

<a>
  • 无子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
<hr><br><wbr><img><embed><param><source><track><area><col><keygen>

子元素可以没有、可以是<li>元素,也可以是<script><template>元素
<ol><ul>

子元素可以没有、可以是<dt><dd>元素,也可以是<script><template>元素
<dl>

子元素可以没有,可以是<option><optgroup>,也可以是<script><template>元素
<select>

子元素是文本内容
<textarea>

总结

  • h1、h2、h3、h4、h5、h6、p的子元素是语句型元素

  • header、<footer不可嵌套header、footer

  • 行内元素尽量不要内嵌块级元素