标签嵌套

Posted 2020-08-07

做前端不久，在知识没有系统的学过，都是零散学的，所以实践中会遇到很多问题，所以记下，整理以巩固。

最近遇到了关于标签的嵌套问题，先是遇到了a标签嵌套a标签的问题，然后室友遇到了p标签的嵌套问题。a标签中嵌套a标签，浏览器会解析成兄弟关系。而p标签中嵌套div，会解析成<p></p><div></div></p>。然后才发现这些最基础的东西掌握的太差。查阅资料整理一下。

html元素可以分为块级元素和内联元素两种，当然块级元素和内联元素之间可以通过css的display属性转换。

1、块元素可以包含内联元素和某些块元素，而内联元素不能包含任何块元素，只能包含其他内联元素。(注意是其他内联元素)，所以我当时a嵌套了a是不对的。而内联元素不能包含任何块元素，有网友说，在XHTML4中DTD中有规定，但在HTML5中没有规定，经测试，确实可以，只是在样式上会溢出，没有包含进去，但是仍然有效果。简单测试代码。

浏览器解析之后：

2、p标签不能包含块级元素。实例见1中示例。

3、有些块级元素只能包含内嵌元素，如：h1~h6  p  dt。

4、块级元素与块级元素并列，内联元素与内联元素并列。

参考来源：http://www.360doc.com/content/15/0419/00/12109864_464254513.shtml

http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct

如果有不对的地方，欢迎博友指教、交流