在一个锚内放置一个div是否正确?

我听说在内联元素中放置一个块元素是一个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元素的传统解释。

有没有人有任何关于这个问题的进一步提示?

取决于您所需要的HTML版本:

  • HTML 5指出,只要没有交互式内容(例如button或其他链接), <a>元素“可能被包裹在整个段落,列表,表格等等甚至整个部分中。

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

    当然,你可以自由地设置内联元素的样式,使其看起来像是一个块,或者实际上是一个块的样式,以便内联呈现。 在HTML中使用inlineblock是指元素与文档的语义结构之间的关系,而CSS中的相同术语更多地涉及元素的视觉样式。 如果你让内联元素以块状显示,那很好。

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

不,它不会validation,但是它通常会在现代浏览器中工作。 这就是说,在你的锚内使用span,并在其上设置display: block ,这一定会在任何地方工作,并且会validation!

W3C文档不会使用像错误罪恶这样的概念,但它确实使用那些提供手段可能是适当的泄气的

实际上,在第4节的第二段中,4.01规范列出了如下内容

本文件中的“必须”,“不得”,“要求”,“应该”,“不应该”,“应该”,“不应该”,“推荐”,“可能”按照[RFC2119]中的描述进行解释。 但是,为了便于阅读,这些文字在本规范中并不全部以大写字母出现。

考虑到这一点,我相信这个权威性的声明是在7.5.3块级和内联元素中说的

一般来说,内联元素可能只包含数据和其他内联元素。

条件“通常”似乎引入足够的含糊不清,说HTML 4.01确实允许内联元素包含块元素。

当然,CSS2有一个显示属性值, 内联块 ,看起来是适合你描述的目的。 我不确定它是否得到了广泛的支持,但似乎有人预计这种行为的需要。

DTD在这里看起来不那么宽容,但是DTD的文本遵循规范:

HTML 4.01规范包含了在DTD中无法expression的附加语法约束。

在另一个评论中,你build议你想通过将其封装在一个锚点中来激活一个块。 我不认为HTML禁止,CSS明确允许。 所以要回答标题问题是否正确,我说是的。 按照标准,有时是正确的。

使用HTML5规范…现在可以在内联元素中放置一个块级元素。 所以现在把“div”或“h1”放在“a”元素里面是完全合适的。

你不能把<div>放入<a> – 它不是有效的(X)HTML。

即使你使用display:block来设置范围,你仍然不能在其中放置块级别的元素:(X)HTML仍然必须遵守(X)HTML DTD(无论你使用哪一个),不pipeCSS改变事情。

浏览器可能会显示它,但是这样做并不正确。

这是不对的。 使用跨度 。

http://www.w3.org/TR/REC-html40/sgml/dtd.html有一个HTML 4的DTD。 这个DTD是规范的机器可处理的forms,限制了DTDpipe理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"> 

我将解释这个层次中列出的标签是允许的标签总数。

虽然规范可能会说“内联元素”,但我相当确定,通过将块元素的显示types声明为内联,您并不打算绕过这个意图。 不pipe你如何滥用内联标签,内联标签都有不同的语义。

另一方面,我觉得有趣的是,包含special似乎允许嵌套A元素。 规范中可能有一些强烈的措辞,即使它在XML语法上是正确的也不允许这样做,但是我不会继续追求这一点,因为它不是问题的主题。

如果你打算去制作<a>块,那么为什么不把<a>放在div里面,作为一个块元素,它会给你带来同样的效果。

如果您将其更改为块式元素,则不会再出现“错误”,但可能无法validation。 但是做你正在做的事情没有什么意义。 您应该只将anchor标记保留为没有内部div的块级元素,或者将div放在外部。

<div>这样的块级元素可以被HTML5中的<a>标签包装。 尽pipe一个<div>被认为是stream内容的容器/包装,而<a>被认为是根据MDN的 stream内容 。 从语义上来说,创build充当块级元素的内联元素可能会更好。

我想大多数时候人们提出这个问题的时候,他们已经build立了一个只有div的站点,现在其中一个div需要成为一个链接。

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

真的很伤心…但它的工作…

简短的答案在这里。

是的。 有可能的。

就像一个供参考。

如果你的目标是让你的div可点击,你可以使用jQuery / Java脚本。

像这样定义你的div:

 <div class="clickableDiv" style="cursor:pointer"> This is my div. Try clicking it! </div> 

你的jQuery将会像这样被实现:

  <script type="text/javascript"> $(document).ready(function () { $("div.clickableDiv").click(function () { alert("Peekaboo"); }); }); </script> 

这也适用于多个div – 根据汤姆在这个线程的评论