直接写style="color:red"虽快但不可维护，应优先用语义化class如badge-status实现复用、主题切换与统一维护；span本身无样式，必须依赖class或CSS驱动，且不可替代strong、time等语义标签。
用 span 直接加 style 是最简单有效的做法
不需要额外 class 或 CSS 文件，span 本身是行内容器，天然适合局部样式干预。关键在于把样式写在 style 属性里，而不是依赖外部规则。
常见错误是写成 <span color="red">文本</span> —— color 不是 span 的合法 HTML 属性，浏览器会忽略它。
- 正确写法：
<span style="color: red; font-size: 14px;">红色小字</span> -
font-size推荐用px、em或rem，避免用small、large这类关键字（语义模糊且兼容性差） - 多个样式用分号分隔，结尾分号可省略，但建议保留以降低后续追加时出错概率
想复用样式？必须配 class，别硬塞 style
如果同一颜色/字号在页面中出现多次，反复写 style="color: #333; font-size: 16px;" 既难维护又增加 HTML 体积。这时候得靠 CSS class。
错误做法：给每个 span 都复制一遍 style；正确路径是抽离样式到 <style></style> 或外部 CSS 中。
立即学习“前端免费学习笔记（深入）”；
- HTML：
<span class="highlight">重点内容</span> - CSS：
.highlight { color: #e74c3c; font-size: 18px; } - 注意：不要用
id给span做样式锚点，除非该样式真的一生只用一次
span 不能替代语义化标签，比如不该用它标标题
span 是纯样式容器，没有语义。如果你只是想让某段文字“看起来像标题”，但结构上它并不是标题，那用 span 没问题；但若它实际承担标题功能（如章节名），就必须用 <h2></h2>、<h3></h3> 等。
- 搜索引擎和读屏软件不识别
span的语义，仅依赖视觉样式 - 用
span模拟<strong></strong>或<em></em>也属反模式 —— 优先用语义化标签，再通过 CSS 控制外观 - 真正适合
span的场景：品牌名变色、单位符号缩放、行内图标占位等无语义修饰
字体大小缩放失效？检查父元素的 font-size 设置
用 em 或 rem 设 font-size 时，span 的实际大小可能和预期不符，根源常在继承链上。
-
em相对父元素，如果父div被设为font-size: 12px，那么<span style="font-size: 1.5em"></span>就是 18px -
rem相对根元素（html），但如果 JS 动态改过document.documentElement.style.fontSize，所有rem值都会跟着变 - 调试技巧：在浏览器开发者工具中选中
span，看“Computed”面板里的font-size最终值，比猜更可靠
span 的样式控制看似简单，但容易陷进“能跑就行”的惯性——比如用内联样式堆砌、忽略可访问性、或误用语义。真正要稳住效果，得从样式作用域、继承逻辑和语义边界三处下手。 
