Html 跨内锚或跨内锚或无关紧要？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1763235/
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
Span inside anchor or anchor inside span or doesn't matter?
提问by Jon Hadley
I want to nest spanand atags. Should I
我想嵌套span和a标记。我是不是该
- Put
<span>inside<a> - Put
<a>inside<span> - It doesn't matter ?
- 放在
<span>里面<a> - 放在
<a>里面<span> - 没关系吗？
回答by Jon Hadley
3 - It doesn't matter.
3 - 没关系。
BUT, I tend to only use a <span>inside an <a>if it's only for a partof the contents of the tag i.e.
但是，如果它仅用于标记的一部分内容，我倾向于只使用<span>内部<a>
<a href="#">some <span class="red">text</span></a>
Rather than:
而不是：
<a href="#"><span class="red">some text</span></a>
Which should obviously just be:
这显然应该是：
<a href="#" class="red">some text</a>
回答by CraigTP
It is perfectly valid (at least by HTML 4.01 and XHTML 1.0 standards) to nest either a <span>inside an <a>or an <a>inside a <span>.
嵌套 a <span>inside an<a>或 in <a>inside a是完全有效的（至少按照 HTML 4.01 和 XHTML 1.0 标准）<span>。
Just to prove it to yourself, you can always check it out an the W3C MarkUp Validation Service
只是为了向自己证明这一点，您可以随时查看W3C 标记验证服务
I tried validating:
我尝试验证：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<p>
<a href="http://www.google.com/"><span>Google</span></a>
</p>
</body>
</html>
And also the same as above, but with the <a>inside the <span>
也和上面一样，但在<a>里面<span>
i.e.
IE
<span><a href="http://www.google.com">Google</a></span>
with both HTML 4.01 and XHTML 1.0 doctypes, and both passed validation successfully!
使用 HTML 4.01 和 XHTML 1.0 文档类型，并且都成功通过了验证！
Only thing to be aware of is to ensure that you close the tags in the correct order. So if you start with a <span>then an <a>, make sure you close the <a>tag first before closing the <span>and vice-versa.
唯一需要注意的是确保以正确的顺序关闭标签。因此，如果您以 a <span>then an开头<a>，请确保在关闭 the<a>之前先关闭标签<span>，反之亦然。
回答by Greg
It doesn't matter - they're both allowed inside each other.
没关系 - 他们都被允许进入对方。
回答by knittl
that depends on what you want to markup.
这取决于您要标记的内容。
- if you want a link inside a span, put
<a>inside<span>. - if you want to markup something in a link, put
<span>into<a>
- 如果您想要跨度内的链接，请将其
<a>放入<span>. - 如果你想标记在一个链接的东西，把
<span>成<a>
回答by Salman A
SPAN is a GENERICinline container. It does not matter whether an ais inside spanor spanis inside aas both are inline elements. Feel free to do whatever seems logically correct to you.
SPAN 是一个通用的内联容器。ana是在里面span还是span在里面并不重要，a因为两者都是内联元素。随意做任何你认为合乎逻辑的事情。
回答by sykora
It depends on what the span is for. If it refers to the text of the link, and not the fact that it is a link, choose #1. If the span refers to the link as a whole, then choose #2. Unless you explain what the span represents, there's not much more of an answer than that. They're both inline elements, can be syntactically nested in any order.
这取决于跨度的用途。如果它指的是链接的文本，而不是链接的事实，请选择 #1。如果跨度是指整个链接，则选择 #2。除非你解释跨度代表什么，否则没有比这更多的答案了。它们都是内联元素，可以按任何顺序在语法上嵌套。
回答by user1368737
It can matter if for instance you are using some sort icon font. I had this just now with:
例如，如果您使用某种图标字体，这可能很重要。我刚才有这个：
<span class="fa fa-print fa-3x"><a href="some_link"></a></span>
Normally I would put the span inside the A but the styling wasn't taking effect until swapped it round.
通常我会将跨度放在 A 内，但样式直到将其交换后才会生效。
回答by Xopa
Personally, as a web developer, I only ever put a span within an anchor tag if I am trying to highlight a section of the links text, such as applying a background to one section.
就我个人而言，作为 Web 开发人员，如果我试图突出显示链接文本的一部分，例如将背景应用于一个部分，我只会在锚标记中放置一个跨度。
回答by Toby
Semantically I think makes more sense as is a container for a single element and if you need to nest them then that suggests more than element will be inside of the outer one.
从语义上讲，我认为作为单个元素的容器更有意义，如果您需要嵌套它们，那么这表明在外部元素内部将不止一个元素。
回答by Oldskool
It will work both, but personally I'd prefer option 2 so the span is "around" the link.
它可以同时工作，但我个人更喜欢选项 2，所以跨度是“围绕”链接的。
