摘要

  • 标签错误嵌套:a标签不可以嵌套交互式元素
  • 块级/内联元素的嵌套规范
  • 不可包含块级元素的标签
    • p标签不能包含块级元素
    • li标签可以包含div以及ul,ul的子元素应该只有li
  • 元素并排(块级和块级并列,内联和内联并列)
  • 字符实体引发的错误
  • 错误地使用:role 属性 行内元素强制转成块级元素,块级元素强制转成行内元素
  • 使用 disabled=false
  • 页面中同一个ID出现两次及以上
  • 内嵌的 <script> 标签含有 src 属性

标签错误嵌套

语法错误

  • a标签不可以嵌套交互式元素:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    <!-- 错误的嵌套 -->
    <a>
    <a>链接</a>
    <button>
        <img usemap="">如果设置了usemap属性</img>
    </button>
    <details></details>
    <embed></embed>
    <iframe></iframe>
    <img usemap="">如果设置了属性</img>
    <input type!="hidden">
    <keygen>
    <label>
    <menu type="toolbar">(如果type属性为toolbar状态)
    <object usemap="">(如果设置了usemap属性)
    <select></select>
    <textarea>
    <audio controls="">如果设置了controls属性</audio>
    <video controls="">如果设置了controls属性</video>
    </a>
  • 下面这些写法浏览器大都不能正常解析:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    
    <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>

有的虽然解析正常,但却达不到预想的目的,无效设置

语义错误

页面可能正常解析,但不符合语义。

这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。

不可包含块级元素标签

h1~h6、p

块级/内联元素的嵌套规范

  • 块级元素可以包含内联元素和某些块级元素
  • 内联元素不能包含块级元素,只能包含内联元素
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!-- 规范的写法 -->
<div>
    <h2>某kexueyuan</h2>
    <p>IT education</p>
</div>

<!-- 不规范的写法 -->
<span>
    <div>wrong</div>
</span>

<p>
   <h1></h1>
</p>

<p>
   <div></div>
</p>
<!-- p标签不能包含块级元素 -->

li标签可以包含div以及ul(二级列表)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- 规范的写法 -->
<li>
   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>
   <div></div>
</li>

<!-- 不规范的写法 -->

<ul>
   <a href="">迷路的a标签</a>
   <li></li>
   <li></li>
   <li></li>
</ul>

元素并排

  • 块级和块级并列
  • 内联和内联并列
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- 规范的写法 -->
<div>
   <h2></h2>
   <p></p>
</div>

<div>
   <img src="" alt="">
   <a href=""></a>
   <span></span>
</div>

<!-- 不规范的写法 -->
<div>
   <span>我是内联元素</span>
   <p>我是块级元素</p>
</div>
<span>我也是内联元素</span>

字符实体引发的错误

有些字符是 html预留的,不能够直接书写,但是可以通过字符实体来显示

如:

1
2
3
空格 - &nbsp;
大于符号 - &gt;
& - &amp;

但如果稍不注意,在如下的情况下就会引发错误:

1
2
3
4
5
<!--这里的 &copy 会被转换为 ©️符号,从而得不到预期的效果-->
<a href="?art&copy">Art and Copy</a>

<!--正确的做法是所有的保留字符全部用实体字符替代。-->
<a href="?art&amp;copy">Art and Copy</a>

错误地使用 role 属性

role 属性是用来增强标签的语义的,但如果使用不当,反而得到负面的效果

1
2
3
4
5
<input type=radio role=progressbar>
<!--
这里的是一个 input标签,但是却通过 role 指定了进度条的语义
input是不能够作为进度条的,所以这里反而模糊了语义。
-->

元素类型强制转换

  • 行内元素强制转成块级元素
  • 块级元素强制转成行内元素
1
2
<div style="display: inline;"> 标签设置 inline 属性
给 <span style="display: block;">标签设置 block 属性
  • display 是CSS中最重要的用于控制布局的属性。
  • 每个元素都有一个默认的 display 值,这与元素的类型有关。
  • 对于大多数元素它们的默认值通常是 block 或 inline 。
  • 一个 block 元素通常被叫做块级元素。
  • 一个 inline 元素通常被叫做行内元素。

使用 disabled=false

disabled 属性是用来禁用标签的 一般用于 input 、button等,表示不可点击。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- 正常的用法 -->
<input type="text" name="lname">
<input type="text" name="lname" disabled>
<input type="text" name="lname" disabled="disabled">

<!-- 错误的写法 -->
<input type="text" name="name" disabled="false">
<!--
这里虽然 disabled="false" 语义也代表不禁用
但实际上是被禁用的。
-->

页面中同一个 ID 出现两次及更多

ID重复会引起元素选择错误,从而引发 Javascript 隐藏问题,因此需要注意。

  • 每一个ID会在浏览器中生成一个同名的全局变量
  • 内嵌的 <script> 标签含有 src 属性
  • <script> 标签包含 src 属性时,其包含的 Javascript 脚本是不会执行的。

注意 用HUGO 把Markdown转HMTl时 任何标签比如<script>都要被包裹进”`””`“里,不然后面的文本就被解析到标签里,可能不显示

部分来自:杨小福@极客学院

整理By me,不断收集更新


·未完待续·

参考文章

相关文章