•  07-07-2019
  •  | 
  •  

题

span元素看起来与div完全相同，但是在内联级别而不是在块级别。但是，我似乎无法想到span元素可以提供的任何有益的逻辑划分。

如果句子中没有包含单个句子或单词，则似乎是最小的逻辑部分。忽略CSS，因为CSS仅用于布局而不用于语义，何时跨度通过切断句子或单词串提供额外的语义值？

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

有帮助吗？

解决方案

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

  

然后向导调用<！> lt; span class = <！> quot; wizardword <！>; <！> gt; gravenwist <！> lt; / span <！> gt;并吩咐它攻击即将到来的军队。 <！> lt; span class = <！> quot; wizardword <！> quot; <！> gt; gavenwist <！> lt; / span <！> gt;抵抗，但向导的<！> lt; span class = <！>“; wizardword <！>”; <！> gt; wistwand <！> lt; / span <！> gt;太强大了。

这可以呈现为

  

然后巫师召唤 gravenwist 并吩咐它攻击即将到来的军队。 gavenwist 遭到拒绝，但向导的 wistwand 太强大了。

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

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

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

其他提示

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

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

具有多种语言功能的屏幕阅读器可以使用它。

所以他们不是表现性的，只是通用的。事实上，跨度很少呈现，提供了一个语义上有意义的类名，如<！> quot; spelling-wrong <！> quot;而不是<！> quot; bold-red-text <！> quot;。

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

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

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

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

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

span s 实际上可以是class属性形式的语义信息的载体。微格式使用它。

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

e.g。 <！> lt; span class = <！> quot; personal_phone_number <！> quot; <！> gt; 0123 456789 <！> lt; / span <！> gt;

  

忽略CSS，因为那会给出   语义，什么时候跨越   提供额外的语义价值   砍掉一句话或一串   字？

永远不要忽略CSS（以及其他非HTML标记）。 <！> lt; span <！> gt;生命中唯一的目的是携带无法用HTML表达的标记。标记，例如<！> lt; span style="dropCap" <！> gt;，它在HTML中没有等价物，但在印刷出版中已存在数百年，并且总是只应用于一个字符 - 第一个字母一个项目（文章，无论如何），不会导致分词（或任何更大的中断）。

  

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

是和否。 <！> lt; p <！> gt的唯一实际值;是它在语义上是中立的。也就是说，与示例<！> lt; <=> <！> gt;不同，当您使用它来携带其他标记时，它不会执行您可能不想做的任何操作。有时候，比如<！> lt; <=> <！> gt;上面，当你不想要任何其他效果时。

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

我在EBNF中使用跨度 - <！> gt; XHTML转换器将不同的格式应用于文字和标记。

SPAN（和DIV）元素本身通常被认为是语义中立的。一个好的方法是尽可能地使用语义标记，但有时你会遇到这样的情况，即提供语义意义的现有html元素（EM，STRONG，ABBR，ACRONYM等等）在语义上不合适。为了你的内容。因此，下一步是使用具有语义意义的id或类的语义中性SPAN或DIV。

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

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

在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>

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

SPAN主要是用于挂起样式的挂钩（因此您可以使用<span style='color:blue'>而不是<font color='blue'>）。

来自规范 ：

  

DIV和SPAN元素与id和class属性一起提供了向文档添加结构的通用机制。这些元素将内容定义为内联（SPAN）或块级（DIV），但不对内容强加其他表示习语。因此，作者可以将这些元素与样式表，lang属性等结合使用，以根据自己的需要和品味定制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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top