目录 a标签不可以嵌套交互式元素 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素 p标签不能包含块级元素 不可包含块级元素的标签 li标签可以包含div以及ul，ul的子元素应该只有li 元素并排（块级和块级并列，内联和内联并列) 字符实体引发的错误 错误的使用 role 属性 行内元素强制转成块级元素，块级元素强制转成行内元素 使用 disabled=false 页面中同一个ID出现两次及以上 内嵌的 标签含有 src 属性</p> <p>标签错误嵌套</p> <p>语法错误</p> <p>* a标签不可以嵌套交互式元素[a， audio（如果设置了controls属性）， button， details， embed， iframe， img（如果设置了usemap属性）， input（如果type属性不为hidden状态）， keygen， label， menu（如果type属性为toolbar状态），object（如果设置了usemap属性）， select， textarea， video（如果设置了controls属性）]</p> <p>下面这些写法浏览器是不能够正常解析的</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="10" rows="5"></textarea> </a> <a href=""> <a href="">click</a> </a> <a href=""> <button>click</button> </a> <a href=""> <input type="text"> </a> <a href=""> <textarea name="" id="" cols="30" rows="10"></textarea> </a></pre><div class="contentsignin">登录后复制</div></div><p>有的虽然解析正常，但却达不到预想的目的</p><p>语义错误</p><p>页面可能正常解析，但不符合语义。这是因为浏览器自带容错机制，对于不规范的写法也能够正确的解析，各浏览器的容错机制不同，所以尽量按规范来写。</p><p>* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">/*规范的写法*/ <div> <h2>jikexueyuan</h2> <p>IT education</p> </div> /*不规范的写法*/ <span> <div>wrong</div> </span></pre><div class="contentsignin">登录后复制</div></div><p>* p标签不能包含块级元素</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">/*不规范的写法*/ <p> <h1></h1> </p> <p> <div></div> </p></pre><div class="contentsignin">登录后复制</div></div><p>* 如下的标签不可包含块级元素</p><p>h1、h2、h3、h4、h5、h6、p</p><p>* li标签可以包含div以及ul(这个是不是很牛，可以包含父级元素)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> /*规范的写法*/ <li> <ul> <li> </li> <li> </li> <li> <li> </ul> <div> </div> </li> /*不规范的写法*/ <ul> <a href="">迷路的a标签</a> <li></li> <li></li> <li></li> </ul></pre><div class="contentsignin">登录后复制</div></div><p>* 元素并排（块级和块级并列，内联和内联并列)</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">/*规范的写法*/ <div> <h2></h2> <p></p> </div> <div> <img src="" alt=""> <a href=""></a> <span></span> </div> /*不规范的写法*/ <div> <span>我是内联元素</span> <p>我是块级元素</p> </div></pre><div class="contentsignin">登录后复制</div></div><p>字符实体引发的错误</p><p>有些字符是 html 预留的，不能够直接书写，但是可以通过字符实体来显示。 如： </p><p>空格 - </p><p>大于符号 - ></p><p>& - &</p><p>......</p><p>但如果稍不注意，在如下的情况下就会引发错误：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><a href="?art©">Art and Copy</a></pre><div class="contentsignin">登录后复制</div></div><p>这里的 © 会被转换为 符号，从而得不到预期的效果</p><p>正确的做法是所有的保留字符全部用实体字符替代。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <a href="?art&copy">Art and Copy</a></pre><div class="contentsignin">登录后复制</div></div><p>错误的使用 role 属性</p><p>role 属性使用来增强标签的语义的，但如果使用不当，反而得到负面的效果，所以使用的时候一定要注意。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input type=radio role=progressbar></pre><div class="contentsignin">登录后复制</div></div><p>这里的是一个 input标签，但是却通过 role 指定了进度条的语义，但是 input是不能够作为进度条的，所以这里反而模糊了语义。</p><p>行内元素强制转成块级元素，块级元素强制转成行内元素</p><p>如下做法是不推荐的： </p><p>给 <div> 标签设置 inline-block 属性</p><p>给 <span>标签设置 block 属性</p><p>使用 disabled=false</p><p>disabled 属性是用来禁用标签的，一般用于 input 、button等，表示不可点击。</p><p>正常的用法是：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input type="text" name="lname" /> <input type="text" name="lname" disabled="disabled" /></pre><div class="contentsignin">登录后复制</div></div><p>错误的写法：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input type="text" name="name" disabled="false" /></pre><div class="contentsignin">登录后复制</div></div><p>这里虽然 disabled="false" 语义也代表不禁用，但实际上是被禁用的。</p> <p>页面中同一个 ID 出现两次及更多</p> <p>ID重复会引起元素选择错误，从而引发 Javascript 隐藏问题，因此需要注意。</p> <p>注：每一个ID会在浏览器中生成一个同名的全局变量</p> <p>内嵌的 <script> 标签含有 src 属性</p> <p>当 <script> 标签包含 src 属性时，其包含的 Javascript 脚本是不会执行的。</p>
