1. 什么是 <span> 标签
<span> 是 HTML 中一个非常基础且常用的行内元素（inline element）。它本身没有任何默认的样式或语义，纯粹是一个「容器」，用来包裹文本或其他行内内容，方便我们通过 CSS 或 JavaScript 对其中内容进行样式控制或操作。
简单来说，<span> 就像是一个透明的盒子，你可以在里面放文字，然后通过给它添加 class、id 或 style 属性来改变这些文字的样式。
2. <span> 与 <div> 的区别
很多初学者容易把 <span> 和 <div> 搞混，它们最大的区别在于显示类型：
| 标签 | 显示类型 | 默认行为 | 典型用途 |
|---|---|---|---|
<span> |
行内元素 | 不会换行，多个 span 排在同一行 | 修饰文字片段、图标、局部样式 |
<div> |
块级元素 | 独占一行，前后自动换行 | 页面布局、区块划分 |
html
<p>这是一段文字，<span style="color: red;">这部分是红色</span>，其余部分正常。</p>上面的例子中，红色文字不会换行，而是紧跟在「这是一段文字，」后面。
3. <span> 的基本用法
3.1 配合 CSS 修改样式
最常见的用法就是给 <span> 加 class 或 style，然后修改文字颜色、字号、背景等。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>span 示例</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.price {
color: #e4393c;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是<span class="highlight">重点内容</span>，需要突出显示。</p>
<p>商品价格：<span class="price">¥ 99.00</span></p>
</body>
</html>3.2 配合 JavaScript 操作内容
<span> 也常用于 JavaScript 动态更新文本内容，比如实时显示时间、计数等。
html
<p>当前计数：<span id="count">0</span></p>
<button onclick="addOne()">+1</button>
<script>
let num = 0;
function addOne() {
num++;
document.getElementById("count").textContent = num;
}
</script>4. <span> 的常用属性
<span> 支持 HTML 的全局属性，常用的有：
class：指定一个或多个 CSS 类名，用于样式控制。id：唯一标识，用于 JavaScript 定位或 CSS 选择器。style：内联样式，直接写在标签上。title：鼠标悬停时显示的提示文字。data-*：自定义数据属性，用于存储额外信息。
html
<span class="tag" id="tag-1" title="点击查看详情" data-type="hot">热门</span>5. 嵌套与注意事项
5.1 可以嵌套
<span> 可以嵌套使用，但要注意标签闭合顺序。
html
<p><span>外层文字<span>内层文字</span>继续外层</span></p>5.2 不要放块级元素
<span> 是行内元素，不能 在里面放 <div>、<p>、<h1> 等块级元素，否则会导致 HTML 结构不合法，浏览器解析时可能出现异常。
html
<!-- 错误示例 -->
<span><div>这样写是不对的</div></span>5.3 空 span 的用途
空的 <span> 有时也用于 CSS 图标、占位符或 JavaScript 挂载点，比如配合伪元素 ::before / ::after 实现小图标。
html
<span class="icon"></span>
css
.icon::before {
content: "★";
color: gold;
}6. 实战案例：高亮关键词
下面是一个完整的实战案例，实现搜索关键词高亮效果。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>关键词高亮</title>
<style>
.highlight {
background-color: #ffe58f;
color: #d4380d;
padding: 0 2px;
border-radius: 2px;
}
</style>
</head>
<body>
<p id="content">
HTML 是一种标记语言，用于描述网页的结构。CSS 用于控制网页的样式，
JavaScript 用于实现网页的交互功能。
</p>
<script>
const keyword = "网页";
const content = document.getElementById("content");
const text = content.textContent;
const regex = new RegExp(`(${keyword})`, "g");
content.innerHTML = text.replace(regex, '<span class="highlight">$1</span>');
</script>
</body>
</html>7. 总结
<span>是行内元素，本身无样式，主要用于包裹文字片段。- 配合 CSS 可以灵活控制局部样式，配合 JavaScript 可以动态更新内容。
- 与
<div>的区别在于行内 vs 块级。 - 注意不要在里面嵌套块级元素，保持 HTML 结构合法。
掌握 <span> 是学习 HTML 和 CSS 的基础，也是日常开发中使用频率最高的标签之一。