span是HTML中典型的行内元素，本身没有默认的样式表现，主要用于对文本中的部分内容进行包裹，方便后续通过CSS单独设置样式或者实现特定的交互逻辑，是前端开发中处理文本片段的常用标签。
span的基本特性
span属于行内元素，不会像块级元素那样独占一行，多个span元素会依次排列在同一行内，直到一行放不下才会换行。它没有默认的边距、背景等样式，默认情况下和周围文本的样式保持一致，只有通过CSS设置后才会呈现差异化的表现。
和<div>标签不同，<div>是块级元素，默认会换行显示，而span更适合处理行内的小片段内容，不会破坏原有的文本排版结构。
span的基础用法
1. 包裹文本设置单独样式
最常见的用法是给一段文本中的某几个字或者某个片段包裹span，单独设置颜色、字体大小等样式，不会影响其他文本的默认表现。
<p>这是一段普通文本，<span class="highlight">这部分是红色高亮</span>，后面是普通内容</p>
<style>
.highlight {
color: #ff0000;
font-weight: bold;
font-size: 16px;
}
</style>
2. 配合CSS实现文本装饰效果
可以通过给span设置下划线、删除线、背景色等装饰效果，用来标记特殊内容，比如价格标签的原价删除线、重点内容的背景高亮等。
<p>商品原价：<span class="old-price">199元</span>，现价159元</p>
<style>
.old-price {
text-decoration: line-through;
color: #999999;
}
</style>
span的实用使用技巧
1. 动态修改文本内容
span可以通过JavaScript获取元素后动态修改内部的文本或者样式，适合用来展示动态更新的内容，比如实时时间、剩余数量等。
<p>当前剩余数量：<span id="count">10</span>件</p>
<script>
// 模拟数量减少
let count = 10;
setInterval(() => {
if (count > 0) {
count--;
document.getElementById('count').innerText = count;
}
}, 1000);
</script>
2. 实现行内元素的间距控制
如果需要给行内的多个文本片段设置不同的间距，可以给每个片段包裹span，通过CSS的margin或者padding属性单独控制，不会影响整体文本的换行逻辑。
<div>
<span class="item">首页</span>
<span class="item">分类</span>
<span class="item">我的</span>
</div>
<style>
.item {
margin-right: 20px;
cursor: pointer;
}
.item:hover {
color: #1890ff;
}
</style>
3. 配合伪元素实现特殊标记
可以给span添加伪元素，在不修改HTML结构的前提下，给文本添加前缀或者后缀的特殊标记，比如给重点内容添加星号标记。
<p><span class="required">用户名</span>是必填项</p>
<style>
.required::before {
content: "*";
color: #ff0000;
margin-right: 4px;
}
</style>
使用span的注意事项
- 不要滥用span，如果需要对大块内容进行样式控制，优先使用<div>等块级元素，避免破坏页面结构。
- span是行内元素，默认不支持设置宽度和高度，如果需要设置宽高，需要先通过CSS将它的display属性改为inline-block或者block。
- 给span设置样式时，尽量使用class选择器，避免直接使用元素选择器，防止样式污染影响其他位置的span表现。
总结来说，span的核心价值是作为行内内容的包裹容器，灵活使用它可以让文本样式控制更加精准，减少不必要的HTML结构冗余，是前端文本处理场景下的高效工具。