PHP小码农

Appearance

span 通用行内容器 ​

<span> 是一个没有语义的通用行内容器元素。它本身不表达任何含义，通常与 class 或 style 属性配合使用，用于对文本进行样式控制或 JavaScript 操作。

前置知识

阅读本节前，建议先了解：bdi 与 bdo 文本方向

基础概念 ​

<span> 是 HTML 中最通用的行内元素。与 <div> 类似，它只是一个"容器"，不带有任何语义。当你需要为一段行内文本应用样式或通过 JavaScript 操作它，但没有合适的语义标签时，可以使用 <span>。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>span 示例</title>
</head>
<body>
  <!-- 配合 class 添加样式 -->
  <p>价格：<span class="price">&yen;99</span></p>

  <!-- 配合 style 添加内联样式 -->
  <p>重点：<span style="color: red;">注意安全</span></p>

  <!-- 配合 JavaScript 操作 -->
  <p>计数：<span id="counter">0</span></p>
</body>
</html>

详细说明 ​

span 与语义标签的选择 ​

优先使用语义标签

当有合适的语义标签可用时，应优先使用语义标签而非 <span>。

需求推荐标签不推荐
重要内容<strong><span style="font-weight:bold">
强调内容<em><span style="font-style:italic">
代码片段<code><span class="code">
高亮文本<mark><span style="background:yellow">
无语义需求<span>-

span 的典型使用场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>span 使用场景</title>
  <style>
    .highlight { background: #fff3cd; padding: 0.1em 0.3em; border-radius: 2px; }
    .price { font-size: 1.25rem; color: #e53935; font-weight: bold; }
    .tag { display: inline-block; background: #e3f2fd; color: #1565c0; padding: 0.2em 0.6em; border-radius: 12px; font-size: 0.875rem; }
  </style>
</head>
<body>
  <h1>span 的使用场景</h1>

  <!-- 文本高亮 -->
  <p>关键词：<span class="highlight">机器学习</span></p>

  <!-- 价格样式 -->
  <p>原价 <span class="price">&yen;299</span></p>

  <!-- 标签/徽章 -->
  <p>技术栈：<span class="tag">HTML5</span> <span class="tag">CSS3</span> <span class="tag">JavaScript</span></p>
</body>
</html>

实战示例 ​

文章中的彩色标签 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章标签</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .tag { display: inline-block; padding: 0.2em 0.6em; border-radius: 3px; font-size: 0.8rem; margin: 0.1em; }
    .tag-html { background: #e65100; color: white; }
    .tag-css { background: #1565c0; color: white; }
    .tag-js { background: #f9a825; color: #333; }
  </style>
</head>
<body>
  <h1>前端技术文章</h1>
  <p>标签： <span class="tag tag-html">HTML5</span> <span class="tag tag-css">CSS</span> <span class="tag tag-js">JavaScript</span></p>
</body>
</html>

注意事项 ​

  • 不要滥用 <span> 替代语义标签
  • <span> 是行内元素，不能包含块级元素
  • 尽量通过 class 而非内联 style 使用 <span>

最佳实践 ​

  1. 无语义时使用：当确实没有合适的语义标签时才用 <span>
  2. 配合 class 使用：通过 CSS 类名控制样式
  3. 用于图标和装饰：图标、标签、徽章等

下一节

继续学习：br 换行

参考链接 ​