HTML标签嵌套规则

男娘i 2022-05-24 12:05 254阅读 0赞

看了网上有各种相关的总结，所以我就不再重复粘贴复制，只是把比较容易犯错的整理一下（内容越少越容易看到重点哈，想要看详细的，我下面有附链接）

规则如下：

*  内联元素不要嵌套块元素（虽然浏览器可能可以正常解析，但是尽量不要这样使用，一方面是遵守代码规范，另外可能会引起意想不到的错误）
 *  一些块元素不能嵌套块元素（h1、h2、h3、h4、h5、h6、p、dt不能包含块级元素）注意：p元素嵌套任何块级元素都一定会被浏览器错误解析

> > P标签内包含块元素时，它会先结束自己，比如：<p><div>donna</div></p>
> 
> >     那么浏览器会解释成：<p></p><div>donna<*/div><p></p>  会多解释出一个p

*  <a>元素不可以嵌套<a>元素（但a元素可以嵌套其他的内联元素）：a元素嵌套a元素会导致所有浏览器解析错误

> > 比如<a href="\#"><a href="\#">leo</a></a>
> 
> > 浏览器会解析成：<a href="\#"></a><a href="\#">leo</a>

*  内联元素可以包含内联元素（除了上面我们说的a标签不能在包含a标签）

目前我知道的，除了p标签一定不能嵌套p标签，a标签一定不能嵌套a标签，其它的，貌似没有没有那么严格，但是我们尽量还是要遵守html代码嵌套规范，避免造成难以预料的错误（我知道的是react中如果p标签嵌套了块级元素浏览器是会报错的）

HTML嵌套规范我看到的可以参考的链接地址有：

[http://www.softwhy.com/article-33-1.html][http_www.softwhy.com_article-33-1.html]

[https://www.cnblogs.com/xiyangbaixue/p/4090511.html][https_www.cnblogs.com_xiyangbaixue_p_4090511.html]

[https://www.cnblogs.com/Iona/p/4732452.html][https_www.cnblogs.com_Iona_p_4732452.html]

[http_www.softwhy.com_article-33-1.html]: http://www.softwhy.com/article-33-1.html
[https_www.cnblogs.com_xiyangbaixue_p_4090511.html]: https://www.cnblogs.com/xiyangbaixue/p/4090511.html
[https_www.cnblogs.com_Iona_p_4732452.html]: https://www.cnblogs.com/Iona/p/4732452.html