首页 > 代码库 > 标签嵌套

标签嵌套

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

最近遇到了关于标签的嵌套问题,先是遇到了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

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

标签嵌套