行内元素之中不能加入块级元素这是我们众所周知的,比如a里面不能加div,但是如果a标签的display为block,设置其为块级化了,这个时候可以往里面加块级元素吗?
还有一个问题,我们一般会看到这样一种情况,一个列表,里面有很多条数据,我们需要点击每一条数据跳转到指定详情页,而且每条数据之中的结构比较复杂,应该怎么做跳转呢?加a标签?那a标签加在哪里,最外层还是什么?还是要用js做跳转?
行内元素之中不能加入块级元素这是我们众所周知的,比如a里面不能加div,但是如果a标签的display为block,设置其为块级化了,这个时候可以往里面加块级元素吗?
还有一个问题,我们一般会看到这样一种情况,一个列表,里面有很多条数据,我们需要点击每一条数据跳转到指定详情页,而且每条数据之中的结构比较复杂,应该怎么做跳转呢?加a标签?那a标签加在哪里,最外层还是什么?还是要用js做跳转?
8 回答4.9k 阅读✓ 已解决
6 回答3.6k 阅读✓ 已解决
6 回答2.5k 阅读
5 回答6.5k 阅读✓ 已解决
5 回答1.4k 阅读✓ 已解决
3 回答2.5k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
第一个问题:跟CSS半毛钱关系都没有,跟doctype声明有关。
在h4的任何doctype声明下,都不允许a嵌套div,而html5的doctype声明下允许a嵌套div。
“a不允许嵌套div”这种约束属于语义约束,与之区别的约束还有严格约束,比如“a不允许嵌套a”。
严格约束在所有的浏览器下都不被允许;而语义约束,浏览器大多会容错处理,生成的文档树可能相互不太一样(由于标准没有定义容错行为)。
因此你才会经常看到“不要在a里面包含div”的说法。它不符合标准,而且可能会导致偏离期望的结果。
可以读一下这篇文章了解更多关于语义嵌套约束在不同浏览器中的不同解析结果。
在
http://www.w3.org/TR/html4/loose.dtd
里,我们可以找到这样的定义:这里的
inline
和block
和CSS里面的inline
和block
有关系吗?有一定关系,由于HTML划分了这些标签,CSS上才根据语义默认他们是
display: inline
或display: block
。但他们的关系仅此而已,html层面的inline和block仅仅是区分html标签的方式,和他们最终呈现出来的
display
属性无关。为什么无关?稍微了解一下浏览器的工作流程:
浏览器“解析文档并构建文档树”——即parse阶段——在“结合CSS生成Rendering Tree”之前,parse阶段CSS属性对其并无影响。
最后,只有html 4阶段把标签归类为inline标签和block标签。
在html 5阶段,标签是这样分类的: