span是用于包裹行内内容的无语义挂钩，仅提供可定位、可样式化、可操作的锚点；它不改变布局，不影响文本流，而div是块级元素，强制换行，二者不可互替。
span 是用来包裹行内内容的“无语义挂钩”
它本身不表达任何含义，也不改变布局，唯一作用是给你一个可定位、可样式化、可操作的锚点。比如你想把一句话里某个词变红、加粗、加背景色，或者用 JavaScript 动态更新其中一段文字，span 就是那个最轻量、最自然的容器。
为什么不能直接用 div 替代 span
div 是块级元素，span 是行内元素——这是根本区别。把 div 塞进一段话里会强制换行、破坏文本流；而 span 默认紧贴前后文字显示，不影响阅读节奏。
- 错误写法：
<p>用户名<div>john_doe</div>已登录</p>→ 浏览器会把它渲染成三行 - 正确写法：
<p>用户名<span>john_doe</span>已登录</p>→ 保持单行连贯 - 若真需要给
span设宽高或上下 margin，得显式设置display: inline-block，否则无效
常见误用：什么时候不该用 span
当有更合适的语义化标签时，优先用它们，而不是堆 span。
- 强调语气？用
strong或em，不是span+ CSS 加粗 - 代码片段？用
code，不是span class="code" - 缩写词？用
abbr并配title属性，比span更利于可访问性 - 想控制整段文字样式？该改
p或section的 CSS，而不是给每个字包一层span
实际能干的几件小事（附参数注意点）
span 真正的价值在组合使用：class/id/style/lang/data-* 这些属性让它活起来。
立即学习“前端免费学习笔记（深入）”；
- 用
class统一管理样式：<span class="price">¥99</span>，再在 CSS 里写.price { color: #e74c3c; } - 用
id配合 JS 更新：<span id="counter">0</span>，然后document.getElementById("counter").textContent = "5" - 用
lang标注语言：<span lang="ja">こんにちは</span>，辅助屏幕阅读器和搜索引擎 - 用
data-*存业务数据：<span data-user-id="123">张三</span>，JS 可通过dataset.userId读取
最容易被忽略的是：它不支持嵌套块级元素（如 div、p），哪怕加了 display: inline-block，HTML 结构上仍是非法的——验证器会报错，某些旧浏览器可能降级处理。
