标签与span标签的区别：HTML

Question

我有些困惑应该使用哪种标签来呈现数据。我的情景是需要呈现计数，但我不确定是使用 span 还是 label。

<span id="spnCount"></span>

或者

<label id="lblCount"></label>

- jason

---

今天我学到的一件事：Span内容将显示插入符光标。但是标签内容将显示普通指针光标。以前从未知道！ - navigator

Answer 1

当您拥有表单或输入元素时，label 用于关联 input 元素。 span 是任何内联内容的通用容器。我认为在这种情况下您需要使用一个 span。

- slapthelownote

Answer 2

Span

<span>标签用于在文档中对内联元素进行分组。

<span>标签本身不会产生视觉变化。

<span>标签提供了一种方式来添加钩子到文本或文档的一部分。

Label

<label>标签为一个元素定义了一个标签。

<label>元素对用户来说没有特别的渲染效果。但是，它可以提高鼠标用户的可用性，因为如果用户单击<label>元素内的文本，它会切换控件。

<label>标签的for属性应该等于相关元素的id属性，以将它们绑定在一起。

- Ron van der Heijden

Answer 3

每个“回答”的人都只是复制粘贴了描述预期用例的文档。然而，没有人解释差异或为什么应该使用其中之一的原因。

事实上，任何一个都在技术上可以工作，所以它实际上并不重要。您可以使用许多其他类似的标签，包括 标签（使用类正确地进行样式设置）。分配一个唯一的ID，使用document.getElementById()或使用节点等，做你想做的事情。唯一关心的人是语义纯粹主义者。

标签“can”和“should”可以与表单输入元素一起使用，这是真的。但是，它不是真的不能或必须不以任何其他方式使用。这意味着它可以和可能以其他方式使用。

首先，注意到 <label> 只是作为一个标签“用于元素”。它并没有说明元素的类型。它并没有说它必须是输入元素或表单元素。实际上，非表单元素也可以与控件相关联，以提供用户体验，这些控件可能使用 CSS 操作对象等等，而标签只是将文本连接到任何这样的东西。表单可以在页面上不可见存在。谁知道呢。

为什么使用独立标签可能是个坏主意？如果您的文档可能存在很长时间，经过几个浏览器版本和 HTML 标准更新，<label> 的定义可能会更严格地强制要求与表单输入元素相关联，那么您可能会遇到问题。但同样适用于我们依赖的任何规范的任何其他方面，只是为了呈现页面而已。

这种变化可能是非常罕见的情况，您可能甚至不在同一家公司或同一项目团队工作，所以老实说，除了纯粹主义者，谁真的关心呢？

嗯，也许对于视力受损的人来说，如果他们依赖于一些将<label>与<span>区分对待的技术，这可能会使技术或用户或两者都感到困惑。我没有任何使用这种辅助设备的经验，但这可能是一个更好的原因为什么。

另一个有效的原因是<span>比<label>更短，更容易输入。

还有一个原因可能是，如果使用<label>与<span>，搜索引擎在排名您的页面或引用内容时可能存在微小差异。这有点牵强，因为这样的算法通常不公开，但这是可能的。一个引擎可能以一种方式产生更好的结果，另一个引擎可能更喜欢另一种方式，而另一个引擎可能无论如何都不关心。

所有这些都说了，没有进一步了解上下文的情况下，我可能会选择<span>，因为它似乎是最通用和最少争议的做事方式。但我觉得这个问题缺乏一个全面的答案，因为答案通常涉及对为什么的理解。

- user2895783

---

关于视力障碍者的观点非常好。很容易忘记可访问性因素！ - Simon Forsberg

请注意，这个评论只是纯粹的假设推测，因为我没有使用过这样的辅助软件。如果事实上它确实有所不同，那么它可能会改变我的最终结论，即在可访问性方面选择<label>而不是<span>。目前为止，我无法确定哪种方式更好，也没有办法进一步调查。在这里进行进一步研究将非常有益，以获得明确的答案。 - user2895783

Answer 4

如果您的数据是计算结果，则 output HTML5 元素可能最适合您的目的。

- Marat Tanalin

Answer 5

标签定义了一个元素的标签。如果您不是用于输入元素，则可以使用 span。

- hkutluay

Answer 6

标签与表单输入元素结合使用。在某些浏览器中，可以单击标签以激活输入元素。

- jao

Answer 7

label 在 HTML 中用于为表单控件添加标签。它还有一个 for 属性，可以设置与此标签相关联的控件的 ID。当您需要显示一些文字数据时，可以使用 span。

- Samich

Answer 8

我更喜欢使用标签而不是标签，因为标签是通用的内联容器，而标签用于表示用户界面元素的标题。

参考资料：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

如果你有一个输入字段，使用标签会更好，因为你可以使用for属性指向输入字段，当你点击标签时，输入字段将获得焦点。

    <label for="username">Username</label>
    <input id="username" name="username" type="text">
    <label for="agreement">Agree</label>
    <input id="agreement" name="agreement" type="checkbox">

尝试上面的代码。当你点击标签时，你会看到用户名字段被聚焦，并且你也可以通过点击标签来勾选复选框。

在你的情况下，没有任何优势。

此外，如果你决定将计数与其他交互元素结合起来，你不应选择，因为这会引起无障碍问题。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#accessibility_concerns

- codejam

Answer 9

"<label>标签定义了一个<input>元素的标签。" http://www.w3schools.com/tags/tag_label.asp

- CaptainCarl

---

如果您在StackOverflow上花更多时间，您会发现参考W3Schools并不是个好主意，因为它充满错误。您链接的特定页面有几个错误和不准确之处。 - Alohci

我发现W3Schools是一个宝贵的资源，可以建立基本的初始理解，并在参考手册中查找常见的语法。对于一些非常罕见的、晦涩难懂的高级用例，我注意到有错误（不准确或仅是不完整的信息），向他们提出问题，但这些问题被忽略了多年。MDN是针对Mozilla特定的，经常存在错误（但它是维基百科，所以我现在尝试修复它们）。W3C从学习的角度来看，创建了可怕的文件，充满了模糊性，缺乏所有实际使用的上下文或示例。这些最好由创建渲染引擎的工程师使用。 - user2895783

无论您认为W3Schools不是一个好的资源，但这与您投票将他的评分降至“-2”没有任何关系。无论如何，除了W3C、w3schools、CSS-Tricks、MDN和Google resource之外，您找不到其他参考资料。因此，您不能简单地忽略W3Schools！ - Muhammad Musavi