Html 将 div 放在锚内是否正确？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1827965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is putting a div inside an anchor ever correct?
提问by Tom
I've heard that putting a block element inside a inline element is a HTML sin:
我听说将块元素放在内联元素中是一种 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>
But what about if you style the outer anchor as display:blockin the stylesheet? Is it still wrong? The HTML 4.01 spec on block-level and inline elementsseems to think so:
但是，如果您像display:block样式表中那样设置外部锚点的样式呢？还是错了？关于块级和内联元素的 HTML 4.01 规范似乎是这样认为的：
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
样式表提供了指定任意元素呈现的方法，包括元素是呈现为块还是内联。在某些情况下，例如列表元素的内联样式，这可能是合适的，但一般来说，作者不鼓励以这种方式覆盖 HTML 元素的传统解释。
Does anyone have any further tips about this issue?
有没有人对这个问题有任何进一步的提示？
回答by NickFitz
Depending on the version of HTML you're catering to:
根据您要迎合的 HTML 版本：
HTML 5states that the
<a>element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".HTML 4.01specifies that
<a>elements may only contain inline elements. A<div>is a block element, so it may not appear inside an<a>.Of course you are at liberty to style an inline element such that it appearsto be a block, or indeed style a block so that it is rendered inline. The use of the terms
inlineandblockin HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot.
HTML 5声明该
<a>元素“可以环绕整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）”。HTML 4.01规定
<a>元素只能包含行内元素。A<div>是块元素，因此它可能不会出现在<a>.当然，您可以自由地设置内联元素的样式，使其看起来像一个块，或者确实设置一个块的样式，以便将其呈现为内联。在 HTML 中使用
inlineandblock是指元素与文档语义结构的关系，而 CSS 中的相同术语更多地与元素的视觉样式相关。如果您使内联元素以块状方式显示，那很好。但是，您应该确保当 CSS 不存在时，文档的结构仍然有意义，例如，当通过辅助技术（如屏幕阅读器）访问时 - 或者确实由强大的 Googlebot 检查时。
回答by Eloff
No it won't validate, but yes it generally will work in modern browsers. That being said, use a span inside your anchor, and set display: blockon it as well, that will definitely work everywhere, and it will validate!
不，它不会验证，但是它通常可以在现代浏览器中工作。话虽如此，在你的锚内使用一个跨度，并设置display: block在它上面，这肯定会在任何地方都有效，并且会验证！
回答by Ewan Todd
The W3C doc doesn't use concepts like wrongand sin, but it does use those like provide the means, may be appropriateand discouraged.
W3C 文档没有使用诸如错误和罪之类的概念，但它确实使用了诸如提供手段之类的概念，这可能是适当的，但不鼓励使用。
Actually, in the second paragraph of section 4, the 4.01 spec itemizes its words as follows
实际上，在第 4 节的第二段中，4.01 规范将其逐项列举如下
The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.
本文档中的关键词“必须”、“不得”、“需要”、“应该”、“不应”、“应该”、“不应该”、“推荐”、“可以”和“可选”是解释为 [RFC2119] 中的描述。然而，为了可读性，这些词在本规范中并未全部以大写字母出现。
With that in mind, I believe the definitive statement is in 7.5.3 Block-level and inline elements, where it says
考虑到这一点，我相信最终声明在7.5.3 Block-level and inline elements，它说
Generally, inline elements may contain only data and other inline elements.
通常，内联元素可能只包含数据和其他内联元素。
The condition "generally" appears to introduce enough ambiguity to say that HTML 4.01 does allow inline elements to contain block elements.
条件“一般”似乎引入了足够的歧义，说明 HTML 4.01 确实允许内联元素包含块元素。
Certainly, CSS2 has a display property value, inline-block, that appears to be suited to the purpose you describe. I'm not sure if it was ever widely supported, but it seems that someone anticipated the need for that kind of behavior.
当然，CSS2 有一个显示属性值inline-block，它似乎适合您描述的目的。我不确定它是否得到了广泛的支持，但似乎有人预料到需要这种行为。
The DTD appear to be less forgiving here, but the text of the DTDdefers to the spec:
The HTML 4.01 specification includes additional syntactic constraints that cannot be expressed within the DTDs.
HTML 4.01 规范包括无法在 DTD 中表达的附加语法约束。
In another comment, you suggest that you want to make a block active by wrapping it in an anchor. I don't believe HTML prohibits that, and CSS clearly allows it. So to answer the title question about whether it is ever correct, I say yes. By the standards, it is sometimes correct.
在另一条评论中，您建议您希望通过将块包装在锚点中来使其处于活动状态。我不相信 HTML 禁止这样做，而 CSS 显然允许这样做。因此，要回答关于它是否正确的标题问题，我说是。按照标准，它有时是正确的。
回答by Abir
With HTML5 specification... It is now possible to put a block-level element inside of an inline element. So now it's perfectly appropriate to put a 'div' or 'h1' inside of an 'a' element.
使用 HTML5 规范...现在可以将块级元素放在内联元素中。所以现在将 'div' 或 'h1' 放在 'a' 元素中是非常合适的。
回答by Beepye
Block level elements like <div>can be wrapped by <a>tags in HTML5. Although a <div>is considered to be a container/wrapper for flow contentand <a>'s are considered flow contentaccording to MDN. Semantically it may be better to create inline elements that act as block level elements.
块级元素<div>可以用<a>HTML5 中的标签包装。尽管 a<div>被认为是流内容的容器/包装器，并且根据MDN<a>被认为是流内容。从语义上讲，创建充当块级元素的内联元素可能会更好。
回答by Carl Smotricz
There's a DTD for HTML 4 at http://www.w3.org/TR/REC-html40/sgml/dtd.html. This DTD is the machine-processable form of the spec, with the limitation that a DTD governs XML and HTML 4, especially the "transient" flavor, permits a lot of things that are not "legal" XML. Still, I consider it comes close to codifying the intent of the specifiers.
在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">
I would interpret the tags listed in this hierarchy to be the total of tags allowed.
我会将此层次结构中列出的标签解释为允许的标签总数。
While the spec may say "inline elements," I'm pretty sure it's not intended that you can get around the intent by declaring the display typeof a block element to be inline. Inline tags have different semantics no matter how you may abuse them.
虽然规范可能会说“内联元素”，但我很确定这并不是为了让您可以通过将块元素的显示类型声明为内联来绕过这个意图。无论您如何滥用内联标签，它们都有不同的语义。
On the other hand, I find it intriguing that the inclusion of specialseems to allow nesting Aelements. There's probably some strong wording in the spec that disallows this even if it's XML-syntactically correct but I won't pursue this further as it's not the topic of the question.
另一方面，我发现包含special似乎允许嵌套A元素很有趣。规范中可能有一些强硬的措辞不允许这样做，即使它在 XML 语法上是正确的，但我不会进一步追究，因为这不是问题的主题。
回答by Greg
You can't put <div>inside <a>- it's not valid (X)HTML.
你不能把<div>里面<a>-它不是有效的（X）HTML。
Even though you style a span with display: block you still can't put block-level elements inside it: the (X)HTML still has to obey the (X)HTML DTD (whichever one you use), no matter how the CSS alters things.
即使您使用 display: block 为 span 设置样式，您仍然不能在其中放置块级元素：(X)HTML 仍然必须遵守 (X)HTML DTD（无论您使用哪个），无论 CSS改变事物。
The browser will probably display it as you want, but that doesn't make it right.
浏览器可能会根据您的需要显示它，但这并不正确。
回答by Eugen
If you want to avoid the semantic trouble of placing divs inside anchor tags, just place the anchor tag on the same level as the divs, wrap them all with a container with position: relative, make your anchor tag position: absolute and expand it to fill the container. Also if it's not on the end of the content flow make sure you throw a z-index in there to place it above the content.
如果你想避免将div放置在anchor标签内的语义麻烦，只需将anchor标签与div放在同一级别，用一个容器将它们全部包裹起来，位置：相对，使你的锚标签位置：绝对并将其扩展为装满容器。此外，如果它不在内容流的末尾，请确保将 z-index 放入其中以将其放置在内容上方。
As suggested I have added a markup code:
按照建议，我添加了一个标记代码：
<div class="div__container>
<div class="div__one>
</div>
<div class="div__two">
</div>
<a href="#"></a>
</div>
And the css:
和CSS：
.div__container {
position: relative;
}
.div__container a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
回答by Chris
If you change it to a block-style element, then no, it's no longer 'wrong', but it probably won't validate. But it doesn't make much sense to do what you're doing. You should either just keep the anchor tag as a block level element with no inner div, or put the div on the outside.
如果您将其更改为块样式元素，则不，它不再是“错误”，但它可能无法验证。但是做你正在做的事情没有多大意义。您应该将锚标记保留为没有内部 div 的块级元素，或者将 div 放在外面。
