html - span的语义值

Question

span 元素似乎与 div 完全一样，但在行内级别而不是在块级别。但是，我似乎想不出 span 元素可以提供的任何有益的逻辑划分。

一个句子，或者一个词如果不包含在一个句子中，似乎是最小的逻辑部分。忽略 CSS，由于 CSS 仅用于布局而不用于语义，span 何时通过切分句子或单词字符串来提供额外的语义价值？

似乎在所有情况下，其他元素更适合添加语义值，使 span 成为纯粹的布局元素。这是真的？

score 28 · Accepted Answer

Span 可用于添加超出 HTML 范围的语义含义。这可以通过使用标识某些属性的类来完成。例如，如果您正在写一部科幻小说，您可以使用 span 来识别虚构的单词，因为您可能希望以不同的方式格式化它们，或者因为您可能希望拼写检查器忽略它们：

然后巫师召唤gravenwist并命令它攻击正在逼近的军队。gavenwist反抗了，但巫师的wistwand太强大了。

这可以呈现为

然后巫师召唤了铭文，命令它攻击正在逼近的军队。神之魔杖反抗，但巫师的魔杖太强大了。

这种事情的另一个很好的例子是微格式，它允许在 HTML 中创建任意结构：

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

与 div 相比，span 的优势在于，span 几乎可以出现在任何地方，因为它们是内联内容，而 div 是块元素，因此它们只能出现在某些其他元素内部。

score 11 · Accepted Answer

一个非常有用的好处是标记语言的变化。例如

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

具有多种语言功能的屏幕阅读器可以利用这一点。

所以它们不是表象的，只是通用的。事实上，跨度很少是表现性的，只要使用语义上有意义的类名，比如“拼写错误”而不是“粗体红色文本”。

score 5 · Accepted Answer

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

这完全取决于你想表达什么。如果标记名字对您来说具有语义价值（只是为了让 CSS 挂钩来格式化名字或使用某些脚本语言提取它们），那么您可以使用跨度。

score 4 · Accepted Answer

当我想让 JavaScript 解析元素并在标签内插入一些值时，我经常使用 SPAN，例如：

<span datafield="firstname"></span>

稍后会在其中插入一个值，因此在这种情况下它确实有意义，尽管只是我决定赋予它的意义。在这种情况下，跨度对布局没有影响的事实是理想的。

score 2 · Accepted Answer

2

spans实际上可以是属性形式的语义信息的载体class。这是由微格式使用的。

于 2008-11-10T19:44:37.240 回答

score 2 · Accepted Answer

span 标签需要一个 class 或 id 属性来赋予它们意义。

例如 0123 456789

score 2 · Accepted Answer

忽略 CSS，因为这将给出语义含义，span 什么时候通过切分句子或单词串来提供额外的语义价值？

永远不要忽略 CSS（和其他非 HTML 标记）。< span> 在生活中的唯一目的是携带您无法在 HTML 中表达的标记。诸如 < span style="dropCap"> 之类的标记，它在 HTML 中没有等价物，但在印刷出版中已经存在了数百年，并且始终只应用于一个字符 - 项目（文章等）的第一个字母，而不会导致一个分词（或任何更大的分词）。

似乎在所有情况下，其他元素更适合添加语义值，使 span 成为纯粹的布局元素。这是真的？

是和不是。< > 唯一真正的价值span是它在语义上是中性的。也就是说，与例如 < p> 不同，当您使用它来携带其他标记时，它不会做任何您可能希望它不会做的事情。有时，就像span style="dropCap"上面的 < > 一样，您不想要任何其他效果。

score 1 · Accepted Answer

如果要将格式化规则应用于标签的部分内容（例如单个单词或句子）。您可以使用 span 标签。它有时被称为无标签格式。

我在我的 EBNF -> XHTML 转换器中使用 span 将不同的格式应用于文字和标记。

score 1 · Accepted Answer

SPAN（和 DIV）元素本身通常被认为是语义中性的。一个好的方法是尽可能适当地使用语义标记，但有时您会遇到确实提供语义含义的现有 html 元素（EM、STRONG、ABBR、ACRONYM 等）在语义上不合适的情况为您的内容。所以下一步是使用语义中性的 SPAN 或 DIV 与语义上有意义的 id 或类。

score 0 · Accepted Answer

我认为他在询问 div 和 span 之间的区别，除了默认行为之外，真的没有区别。

这是一个约定俗成的问题。使用样式时，div通常用于划分内容的划分，而span用于划分内联文本。您可以轻松地div在任何地方使用或在任何地方使用span，但将它们视为不同是有帮助的，即使只是按照惯例。

score 0 · Accepted Answer

在 HTML 中可用于微格式。但是由于实际的 HTML 规范是X HTML，所以没有意义。代替：

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

我宁愿使用：

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

score 0 · Accepted Answer

SPAN 的含义是“这是（例如，文本）内容的（通用）范围”。与 DIV 比较，这意味着“这是一个逻辑划分（即，通用文档部分）”。

SPAN 主要是用于悬挂样式的挂钩（因此您可以使用代替）。

从规格：

DIV 和 SPAN 元素与 id 和 class 属性一起，提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容强加其他表现形式。因此，作者可以将这些元素与样式表、语言属性等结合使用，以根据自己的需要和品味来定制 HTML。

例如，假设我们想要基于客户信息数据库生成 HTML 文档。由于 HTML 不包含识别“客户”、“电话号码”、“电子邮件地址”等对象的元素，因此我们使用 DIV 和 SPAN 来实现所需的结构和呈现效果。我们可以按如下方式使用 TABLE 元素来构造信息：

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

html - span的语义值

12 回答 12

Related

Reference