目录
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属性）)
下面这些写法浏览器是不能够正常解析的
有的虽然解析正常，但却达不到预想的目的
语义错误
页面可能正常解析，但不符合语义。这是因为浏览器自带容错机制，对于不规范的写法也能够正确的解析，各浏览器的容错机制不同，所以尽量按规范来写。
* 块级元素可以包含内联元素和某些块级元素，内联元素不能包含块级元素，只能包含内联元素
* p标签不能包含块级元素
* 如下的标签不可包含块级元素
h1、h2、h3、h4、h5、h6、p
* li标签可以包含div以及ul(这个是不是很牛，可以包含父级元素)
* 元素并排（块级和块级并列，内联和内联并列)
字符实体引发的错误
有些字符是 html 预留的，不能够直接书写，但是可以通过字符实体来显示。
如：
空格 -
大于符号 - >
& - &
......
但如果稍不注意，在如下的情况下就会引发错误：
<a href="?art©">Art and Copy</a>
这里的 © 会被转换为 ©️符号，从而得不到预期的效果
正确的做法是所有的保留字符全部用实体字符替代。
<a href="?art&copy">Art and Copy</a>
错误的使用 role 属性
role 属性使用来增强标签的语义的，但如果使用不当，反而得到负面的效果，所以使用的时候一定要注意。
<input type=radio role=progressbar>
这里的是一个 input标签，但是却通过 role 指定了进度条的语义，但是 input是不能够作为进度条的，所以这里反而模糊了语义。
行内元素强制转成块级元素，块级元素强制转成行内元素
如下做法是不推荐的：
给 <div> 标签设置 inline-block 属性
给 <span>标签设置 block 属性
使用 disabled=false
disabled 属性是用来禁用标签的，一般用于 input 、button等，表示不可点击。
正常的用法是：
<input type="text" name="lname" />
<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 脚本是不会执行的。
自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴，需要可以私聊我哟，也有我的前端开发qun，【四八四】【七五七】【七六零】，对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我，最后可以点一波关注哟！
网友评论