span本身不渲染样式也不改变布局，仅作语义中立的行内容器；所有视觉效果必须通过CSS显式定义，且不可嵌套块级元素、不宜替代语义化标签。
span 本身不渲染任何样式，也不改变布局流——它只是个“透明钩子”，只有加了 CSS 才看得见效果。别指望它自动变色、加背景或撑开空间。
为什么span套文字后没反应？
常见现象：写了 <span>高亮词</span>，但页面上完全看不出变化。
- 根本原因：
span默认无样式，所有视觉表现（颜色、背景、边距等）必须显式声明 - 容易忽略的继承陷阱：如果父元素设了
color: #ccc，而你只给span加了background-color却没重设color，文字可能被“吃掉”（比如白字配白背景） - 检查是否误用了块级属性：对
span设置width或height无效，除非先加display: inline-block或display: block
span + class 是最稳妥的组合方式
直接写 style="color:red" 看似快，但一改全改、无法复用、主题切换困难。
- 推荐结构：
<span class="hl-error">404</span> - CSS 规则示例：
.hl-error { color: #c62828; background-color: #ffebee; padding: 0 4px; border-radius: 2px; } - 命名要具体：用
hl-api-key比red-text更可靠，避免语义漂移 - 不要用
id控制样式：一个id只能出现一次，限制复用；class才是为样式而生的
什么时候不该用span？
它不是万能胶，滥用会破坏语义和可访问性。
立即学习“前端免费学习笔记（深入）”；
- 想强调重要信息？优先用
<strong></strong>或<em></em>—— 它们自带语义，屏幕阅读器能识别 - 要包裹整段文字并控制宽高/居中？换
<div>，再用 <code>display: inline调整，比硬掰span更合理 - 在
<pre class="brush:php;toolbar:false;"><code></code> 块里做语法高亮？可用 <code>span</code>，但务必配合 <code>role="text"</code> 或 <code>aria-hidden="true"</code> 避免干扰代码可读性</pre> - 嵌套块级元素（如
<div>、<code><p></p>）到span里？HTML5 会静默失败，浏览器可能截断或重排真正难的不是怎么让
span变红，而是判断它该不该存在——多数时候，问题出在结构设计，而不是样式没加够。
