![e88c8c4ba42966a49d1c8ebae4669688.png](https://i-blog.csdnimg.cn/blog_migrate/a46f68446c3dd97ca3b26f5d3f586e67.jpeg)
目录
- a标签不可以嵌套交互式元素
- 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素
- p标签不能包含块级元素
- 不可包含块级元素的标签
- li标签可以包含div以及ul,ul的子元素应该只有li
- 元素并排(块级和块级并列,内联和内联并列)
- 字符实体引发的错误
- 错误的使用 role 属性
- 行内元素强制转成块级元素,块级元素强制转成行内元素
- 使用 disabled=false
- 页面中同一个ID出现两次及以上
- 内嵌的 <script> 标签含有 src 属性
标签错误嵌套
语法错误
* a标签不可以嵌套交互式元素
包括但不限于
a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性))
下面这些写法浏览器是不能够正常解析的
![37fd1e8b1e3d93c04c0530e78c927693.png](https://i-blog.csdnimg.cn/blog_migrate/0e959cc3d79e2965fcfd2e2f70be51e5.jpeg)
有的虽然解析正常,但却达不到预想的目的
语义错误
页面可能正常解析,但不符合语义。这是因为浏览器自带容错机制,对于不规范的写法也能够正确的解析,各浏览器的容错机制不同,所以尽量按规范来写。
* 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素
![666c4210fe71481542bd142266cae4e1.png](https://i-blog.csdnimg.cn/blog_migrate/8845d769a15657dd49d3bb27cf479e6a.jpeg)
* p标签不能包含块级元素
![c4eebc5eba77d5120af3574ee8d38878.png](https://i-blog.csdnimg.cn/blog_migrate/e02baa9d4bea39d51d8897f509435e49.jpeg)
* 如下的标签不可包含块级元素
h1、h2、h3、h4、h5、h6、p
* li标签可以包含div以及ul(这个是不是很牛,可以包含父级元素)
![dd4a5fc7aaf7eef2c491fd6672a13057.png](https://i-blog.csdnimg.cn/blog_migrate/f3f9dd4592a90aa3575e2c5331bd301f.jpeg)
* 元素并排(块级和块级并列,内联和内联并列)
![b4097f7d0e18f3d2f8220babb88a52e8.png](https://i-blog.csdnimg.cn/blog_migrate/a790f0f322fd1b039493aa8369028dd3.jpeg)
字符实体引发的错误
有些字符是 html 预留的,不能够直接书写,但是可以通过字符实体来显示。
如:
- 空格 -
- 大于符号 - >
- & - &
- ......
但如果稍不注意,在如下的情况下就会引发错误:
![11d11c18752043afa8e814a11b168ce9.png](https://i-blog.csdnimg.cn/blog_migrate/0ac945f308bfc9daea1707ffa5baae6f.png)
这里的 © 会被转换为 ©️符号,从而得不到预期的效果
正确的做法是所有的保留字符全部用实体字符替代。
![9a67b7495e29c9d05c7130ee1fc7cd02.png](https://i-blog.csdnimg.cn/blog_migrate/9e3657330491d11eb32b03c28df5a3a7.png)
错误的使用 role 属性
role 属性使用来增强标签的语义的,但如果使用不当,反而得到负面的效果,所以使用的时候一定要注意。
![460618ee879ee01399c97e2bf66ddcc9.png](https://i-blog.csdnimg.cn/blog_migrate/ea32e73c8fee36ac2d884c0acac10682.png)
这里的是一个 input标签,但是却通过 role 指定了进度条的语义,但是 input是不能够作为进度条的,所以这里反而模糊了语义。
行内元素强制转成块级元素,块级元素强制转成行内元素
如下做法是不推荐的:
- 给 <div> 标签设置 inline-block 属性
- 给 <span>标签设置 block 属性
使用 disabled=false
disabled 属性是用来禁用标签的,一般用于 input 、button等,表示不可点击。
正常的用法是:
![ae8534bb2f475d3c7c2925a1a618ac43.png](https://i-blog.csdnimg.cn/blog_migrate/b3f376cba717a6b9ed559b8872586950.png)
错误的写法:
![180444586c92c25a624b40dcedd6de73.png](https://i-blog.csdnimg.cn/blog_migrate/528064708fdba870d5160e1a1cc1f45c.png)
这里虽然 disabled="false" 语义也代表不禁用,但实际上是被禁用的。
页面中同一个 ID 出现两次及更多
ID重复会引起元素选择错误,从而引发 Javascript 隐藏问题,因此需要注意。
注:每一个ID会在浏览器中生成一个同名的全局变量
内嵌的 <script> 标签含有 src 属性
当 <script> 标签包含 src 属性时,其包含的 Javascript 脚本是不会执行的。
有什么问题可以私信我哟,自己也整理了一套前端开发资料视频