span是HTML规范中定义的一个行内元素，本身不具备任何默认的视觉样式，它的核心价值是作为css样式控制的载体，用来对页面中的局部内容进行单独标记和样式设置。
span的基本特性
span属于典型的行内元素，和<div>这类块级元素有本质区别，它的核心特性如下：
- 不会独占一行，多个span元素会依次排列在同一行内，只有当一行空间不足时才会自动换行
- 默认情况下宽度和高度由自身内容决定，直接设置width和height属性不会生效，需要配合display属性修改显示模式才会生效
- 本身没有默认的边距、内边距、边框等样式，默认和周围内容的视觉表现一致
- 可以嵌套在其他行内元素或者块级元素内部，用来标记元素内的某一部分内容
span的常见使用场景
span最常用的场景就是对段落、标题等元素内的部分内容进行单独的样式调整，比如给一段文字中的某个关键词换颜色、加粗，或者给特定内容添加标识方便后续用css选中。
场景1：局部文字样式调整
比如我们有一段介绍产品的文字，需要把产品名称设置为红色加粗，就可以用span包裹产品名称，再给span添加对应的css样式：
<p>本次推出的新品<span class="product-name">智能手表X1</span>，续航时长可达7天，支持心率监测功能。</p>
<style>
.product-name {
color: #ff0000;
font-weight: bold;
}
</style>
场景2：配合css做内容分组
如果页面中有多个分散的内容需要设置相同的样式，我们可以给这些内容都加上span标签，并赋予相同的类名，之后只需要写一次css规则就能统一控制所有相关内容的样式：
<p>今日特价商品：<span class="sale-item">蓝牙耳机</span>、<span class="sale-item">移动电源</span>、<span class="sale-item">手机支架</span></p>
<style>
.sale-item {
color: #ff6600;
font-size: 16px;
}
</style>
span和div的区别
很多新手会混淆span和div的用法，两者的核心区别如下：
| 对比项 | span | div |
|---|---|---|
| 元素类型 | 行内元素 | 块级元素 |
| 换行表现 | 不独占一行 | 独占一行 |
| 默认尺寸 | 由内容决定 | 默认宽度为父元素100%，高度由内容决定 |
| 适用场景 | 局部内容样式调整 | 页面整体布局划分 |
使用span的注意事项
虽然span使用起来很灵活，但也要注意不要滥用：
- 如果没有需要单独设置样式的需求，不需要额外添加span标签，避免增加不必要的HTML冗余
- 不要用span来实现本该用块级元素完成的布局功能，比如用多个span拼接成一行布局，这样既不符合语义化，也不利于样式维护
- 给span添加类名时，尽量使用有语义的名称，比如
highlight-text、error-tip，不要使用red、big这类描述样式的名称，方便后续样式调整
总的来说，span是一个轻量的行内容器，本身没有特殊功能，核心价值是配合css实现页面内容的精细化样式控制，合理使用span可以让页面的样式调整更灵活高效。