跨度（HTML元素）

描述 (Description)

For an element that offers no semantic information about the content inside and also provides no styling change, or any other visual change to speak of, the lowly span element is one of the most useful elements in your HTML toolbox.

对于不提供有关内部内容的语义信息，也不提供样式更改或任何其他视觉更改的元素，小跨度元素是HTML工具箱中最有用的元素之一。

When you wrap text with an opening <span> and closing </span>, you’re simply providing a hook—one that allows you to add styles (by adding a class attribute and using CSS to define the look of that class), or interact with the element via JavaScript and the Document Object Model (DOM).

当您用<span>和</span>开头换</span> ，您仅提供了一个钩子-一个允许您添加样式的钩子(通过添加class属性并使用CSS定义该类的外观)，或通过JavaScript和文档对象模型(DOM)与元素进行交互。

In the example shown here, the author has decided that all brand names should be classed as “brandname” and styled differently via CSS, in italic, uppercase letters, as the following figure shows.

在此处显示的示例中，作者决定所有品牌名称均应归类为“品牌名称”，并通过CSS以不同的样式(斜体，大写字母)进行样式设置，如下图所示。

Company names styled via span elements

通过span元素设置公司名称的样式

A span is an inline element, and must only contain text content or nested inline or phrase elements. It shouldn’t be used to surround block-level elements—a usage that’s often seen in Content Management Systems which attempt to apply styling to almost any element by throwing a span around it.

跨度是一个内联元素，并且只能包含文本内容或嵌套的内联或短语元素。 它不应该用于包围块级元素-在内容管理系统中经常见到这种用法，它试图通过在其周围抛出跨度来将样式应用于几乎任何元素。

The span is closely related to the div element, which is a block-level generic container, as opposed to span, which is an inline generic container.

span与div元素紧密相关，div元素是块级通用容器，而span是内联通用容器。

A note of caution: it’s not unheard of for people to go crazy with spans, using them all over the place. span-itis is a bad practice—it’s just as bad as a dose of div-itis. Be sure to check that you’re using the span element appropriately. For example, if you find yourself applying spans like this, you’re in trouble:

注意事项：人们经常在各处使用Span发疯，这并非闻所未闻。 跨膜炎是一种坏习惯，就像一剂div-itis一样糟糕。 确保检查您是否正确使用了span元素。 例如，如果您发现自己像这样应用跨度，则可能会遇到麻烦：

He said it was <span class="important">really</span> important
    to know the difference.

It’s clear that in the example above, the em element would have been more appropriate, as it implies emphasis in all browsers. On the other hand, without CSS styling, would be all but meaningless.

显然，在上面的示例中，em元素会更合适，因为它暗示了所有浏览器中的重点。 另一方面，没有CSS样式， 将几乎毫无意义。

例 (Example)

Here’s an example of the span element being used for CSS styling purposes:

以下是span元素用于CSS样式设计的示例：

.brandname {font-style:italic;color:#006;text-transform:uppercase;}

⋮
<p>There were various brands represented at the
    conference, including <span class="brandname">Adobe</span>,
    <span class="brandname">Microsoft</span>, <span
    class="brandname">Apple</span>, and <span
    class="brandname">Intel</span>.</p>

翻译自: https://www.sitepoint.com/span-html-element/