小组分享--HTML(5)嵌套规则
HTML/XHTML嵌套规则
- 块级元素与块级元素平级、内嵌元素与内嵌元素平级
- 块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素
h1~h6、p、dt - 块级元素不能放在标签p里面
- li标签可以包含标签，因为li和div标签都是装载内容的容器。
HTML5标签嵌套规则
在讲标签嵌套规则之前我们先来讲一下标签的分类
分类
html5出现之前，经常把元素按照block、inline、inline-block来区分。
在html5中，元素不再按照display属性来区分，而是按照内容模型来区分，分为：
① 元数据型(metadata content)：可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素
<base> <link> <meta> <script> <style> <title>···<base> 标签为页面上的所有链接规定默认地址或默认目标。
···例：假设图像的绝对地址是：
<img src="img/login_logo.png" />现在我们在页面中的 head 部分插入 <base> 标签，规定页面中所有链接的基准 url：
<head>
<base href="img/" />
</head>
在上例中的页面上插入图像时，我们就可以规定相对的地址，浏览器会寻找文件所使用的完整 URL：
<img src="pic.gif" />
区块型(sectioning content)：是用于定义标题及页脚范围的元素<article> <aside> <nav> <section>
标题型(heading content)：定义一个区块/章节的标题h1 h2 h3 h4 h5 h6
文档流型（流元素）(flow content)：是在应用程序和文档的主体部分中使用的大部分元素<a> <abbr> <address> <area>(如果它是map元素的子元素) <article> <aside> <audio> <b> <blockquote> <br> <button> <canvas> <cite> <code> <data> <div> <dl> <em> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <hr> <i> <iframe> <img> <input> <label> <main> <map> <mark> <math> <meter> <nav> <object> <ol> <output> <p> <pre> <progress><script> <section> <select> <small> <span> <strong> <sub> <sup> <svg> <table> <template> <textarea> <time><ul> <var> <video> <text>
语句型(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 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)：是引用或插入到文档中其他资源的元素
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】子元素是流元素
<article>、<section>、<blockquote>、<li>、<dd>、<figcaption>、<div>、<main>、<td>
【1.1】子元素是流元素，不包括<main>元素
<aside>、<nav>
【1.2】子元素是流元素，但不包括<table>元素
<caption>
【1.3】子元素是流元素，但不包括<form>元素
<form>
【1.4】子元素是流元素，但不包括<header>、<footer>、<main>元素
<header>、<footer>、<main>
【1.5】子元素是流元素，但不包括<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)
<dt>、<th>
【1.6】子元素是流元素，但不包括<header>、<footer>、<address>、区块型元素(sectioning content)、标题型元素(heading content)
<address>
【2】子元素是语句型元素
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<pre>、<em>、<strong>、<small>、<s>、<cite>、<q>、<abbr>、<data>、<time>、<code>、<var>、<samp>、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<bdi>、<bdo>、<span>、<input>、<output>、<legend>、<label>
【2.1】子元素是语句型元素，但不包括和自身相同的元素
<dfn>、<progress>、<meter>
【2.2】子元素是语句型元素，但不包括交互型元素(interactive content)
<button>
【3】无子元素
<hr>、<br>、<wbr>、<img>、<embed>、<param>、<source>、<track>、<area>、<col>、<keygen>
【3.1】子元素可以没有、可以是<li>元素，也可以是<script>、<template>元素
<ol>、<ul>
【3.2】子元素可以没有、可以是<dt>和<dd>元素，也可以是<script>、<template>元素
<dl>
【3.3】子元素可以没有，可以是<option>、<optgroup>(<optgroup> 标签把相关的选项组合在一起)，也可以是<script>、<template>元素
<select>
【3.4】子元素可以没有，可以是<option>，也可以是<script>、<template>元素
<optgroup>
【3.5】子元素可以没有、可以是<option>元素
<datalist>
【3.6】子元素可以没有，可以是<tr>，也可以是<script>、<template>元素
<tbody>、<thead>、<tfoot>
【3.7】子元素可以没有，可以是<tr>、<th>，也可以是<script>、<template>元素
<tr>
【4】子元素是<caption>、<colgroup>、<thead>、<tfoot>、<tbody>，也可以是<script>、<template>元素
<table>
【5】子元素是文本内容
<textarea>
【5.1】子元素可以没有，也可以是文本内容
<option>
常用标签的嵌套规则总结
【1】<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>的子元素是语句型元素
【2】<header>、<footer>不可嵌套<header>、<footer>
【3】<a>的子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)
【4】<form>不可嵌套<form>
【5】<button>子元素是语句型元素，不可嵌套交互型元素(interactive content)
【6】<caption>(caption 元素定义表格标题)不可嵌套<table>
【7】<dt>、<th>不可嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)
