HTML span 标签：设置部分文字样式，div 与 span 的区别

span 标签的作用

<span> 包裹一行中的一段文字，让你可以为它设置样式，或者用 JavaScript 找到它。它是 <div> 的行内版本：没有含义，没有默认外观，而且不会另起一行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

这句话仍然在同一行上，只有被包裹的词发生了变化。

div 与 span 的区别

两者的用途完全相同（没有含义的容器），区别在于它们在页面上的排布方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

div 把这句话断成了三行，并横跨整个页面；span 留在句子中，紧贴着自己的文字。

还有一个区别：<p> 中不允许放 <div>，如果你这样做，浏览器会提前结束这个段落；而 span 可以放在任何能放文字的地方。更多内容参见 div 页面。

给 span 设置样式：哪些有效，哪些无效

颜色、字体、背景和左右内边距在 span 上都有效。尺寸则无效：行内元素会忽略 width、height 以及上下外边距。把它改成 inline-block，就能在留在行内的同时设置尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

第一个 span 的宽度只和它的文字一样。第二个正好是 120 x 40 像素，而且仍然位于句子中。

在 JavaScript 中使用 span

span 通常用作占位元素，用来放脚本填入的值，比如计数器或用户名：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

只有数字在变化，句子的其余部分保持不变。

什么时候用具体的标签比 span 更好

span 没有含义，所以屏幕阅读器会把它当作普通文字来读。当这些词有特定作用时，就使用对应作用的标签，再按你的喜好设置样式：

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

加粗页面解释了 <strong>、<b>、<em> 和 <i> 之间的区别。

常见错误

• 给普通的 span 设置 width。它会被忽略。请使用 display: inline-block。
• 在 span 里放 div 或段落。这是无效的 HTML，会打断这一行。把外层的 span 换成 div。
• 可点击的 span。和 div 一样，带 onclick 的 span 无法用键盘访问。请使用 <button> 或链接。
• 每种样式都用一个 span。如果整个段落或区块都需要某种样式，就把 class 加在 <p> 或容器本身上，而不是用 span 包裹它的文字。