What we h...">
What we h..."/>
What we h...">
What we h...">

将div放入锚点是否正确?

html HTML

西门逆天

2020-03-18

我听说将block元素放入内联元素是HTML的罪过:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

但是,如果您像display:block样式表那样设置外部锚点,该怎么办?还是错吗?关于块级和内联元素的HTML 4.01规范似乎是这样认为的:

样式表提供了一种方法来指定任意元素的呈现,包括将元素呈现为块还是内联。在某些情况下,例如列表元素的内联样式,这可能是适当的,但总的来说,不鼓励作者以这种方式覆盖HTML元素的常规解释。

有人对此问题有其他建议吗?

第2203篇《将div放入锚点是否正确?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

11个回答
乐米亚 2020.03.18

我认为大多数情况下,当人们问这个问题时,他们只建立了一个div网站,现在,其中一个div需要成为链接。

我看到有人在锚标记内使用透明的空白图像PNG只是为了在div内建立链接,并且图像的大小与div相同。

实际上很伤心...但是它可以工作...

Gil番长 2020.03.18

如果要避免将div放置在锚标记中的语义麻烦,只需将锚标记放置在与div相同的水平上,然后将它们全部包装在具有位置:相对的容器中,将锚标记的位置设置为:绝对,然后将其扩展为装满容器。另外,如果它不在内容流的末尾,请确保将z-index放在其中,以将其放置在内容上方。

根据建议,我添加了一个标记代码:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

和CSS:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}
阿飞Pro 2020.03.18

如果将其更改为块样式元素,则不会,它不再“错误”,但可能无法验证。但是做自己在做的事情没有多大意义。您应该只将anchor标签作为没有内部div的块级元素保留,或者将div放在外部。

神无Green 2020.03.18

这是不对的。使用跨度

Near西里泡芙 2020.03.18

如果您要努力制作<a>块,为什么不放到<a>div内,作为块元素,它会给您同样的效果。

凯樱 2020.03.18

http://www.w3.org/TR/REC-html40/sgml/dtd.html上有HTML 4的DTD 此DTD是规范的机器可处理形式,其局限性在于DTD支配XML和HTML 4,尤其是“瞬态”风格,允许很多不是“合法” XML的事物。尽管如此,我认为这已经接近整理说明者的意图。

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

我会将在此层次结构中列出的标签解释为允许的标签总数。

尽管规范可能会说“内联元素”,但我很确定这并不是要通过声明块元素显示类型为内联来绕开意图内联标签具有不同的语义,无论您如何滥用它们。

另一方面,我发现引人入胜的是special似乎允许嵌套A元素。规范中可能有一些措辞很强的措辞,即使它在XML语法上是正确的,也不允许这样做,但由于它不是问题的主题,因此我将不做进一步介绍。

十三Harry 2020.03.18

W3C文档并未使用错误犯罪之类的概念,但确实使用了提供手段之类的概念可能是适当的,也是不鼓励的

实际上,在第4节的第二段中,4.01规范的措辞如下:

本文档中的关键字“必须”,“不得”,“必须”,“应”,“应禁止”,“应”,“应不”,“建议”,“可”和“可选”是如[RFC2119]中所述进行解释。但是,为了便于阅读,在本规范中,这些单词并非全部以大写字母出现。

考虑到这一点,我相信最终声明是在7.5.3块级和内联元素中

通常,内联元素可以仅包含数据和其他内联元素。

条件“通常”似乎引入了足够的歧义,以至于HTML 4.01确实允许内联元素包含块元素。

当然,CSS2具有显示属性值inline-block,看起来很适合您描述的目的。我不确定它是否曾经得到广泛支持,但是似乎有人预料到需要这种行为。

DTD在这里似乎不太宽容,但DTD文本符合规范:

HTML 4.01规范包括不能在DTD中表达的其他语法约束。

在另一个注释中,建议您通过将其包装在锚点中来使其处于活动状态。我不认为HTML禁止这样做,而CSS显然允许这样做。因此,要回答有关是否正确的标题问题,我说是。按照标准,有时是正确的。

Tom神奇 2020.03.18

诸如HTML之类的块级元素<div>可以由<a>标签包装尽管根据MDN, a <div>被认为是流内容容器/包装,<a>s被认为是流内容从语义上讲,最好创建用作块级元素的内联元素。

猴子十三小胖 2020.03.18

不,它不会验证,但是是的,它通常可以在现代浏览器中运行。话虽如此,请在锚点内部使用一个跨度,并display: block在其上进行设置,这肯定会在任何地方都有效,并且它将验证!

null 2020.03.18

您不能放进<div>里面<a>-这不是有效的(X)HTML。

即使您使用display:block设置跨度样式,也仍然不能在其中放置块级元素:无论CSS如何使用,(X)HTML仍必须遵守(X)HTML DTD(无论使用哪种方式)改变事物。

浏览器可能会根据需要显示它,但这并不正确。

小小阿飞 2020.03.18

根据您要满足的HTML版本:

  • HTML 5声明<a>元素“只要其中没有交互内容(例如按钮或其他链接),就可以包裹整个段落,列表,表格等,甚至整个节”。

  • HTML 4.01指定<a>元素只能包含内联元素A<div>是一个块元素,因此它可能不会出现在内<a>

    当然,您可以随意设置一个内联元素的样式,使其看起来像是一个块,或者也可以对一个块进行样式化,以使其内联。在HTML 中,术语inline的使用是block指元素与文档语义结构的关系,而CSS中的相同术语则更多地与元素的视觉样式相关。如果使内联元素以块状显示,那很好。

    但是,当不存在CSS时(例如,通过屏幕阅读器等辅助技术进行访问时,或者由强大的Googlebot进行检查时),您应该确保文档的结构仍然有意义。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android