html5中用标签配合style或css类实现同一段文字的双色显示是最优解，语义清晰、兼容性好；应避免使用已废弃的标签，优先采用十六进制或命名色，并通过语义化类名（如.error-text）提升可维护性。
HTML5 中用 <span></span> 给同一段文字设两种颜色
直接在文字里插入 <span></span> 标签，配合 style="color: ..." 或 CSS 类控制局部颜色。这是最轻量、兼容性最好、语义也最干净的做法。
常见错误是试图用 <font></font>（已废弃）、或把整个段落拆成多个 <p></p>（破坏语义和排版流），或者滥用内联 style 写一堆重复属性。
- 只对需要变色的**文字片段**套
<span></span>，别包整句 - 颜色值优先用十六进制（如
#333）或命名色（如red），避免 RGB 函数写法增加冗余 - 如果多处复用，定义 CSS 类更可控，比如
.highlight和.subtle
<p>这是一段文字，其中<span style="color: #e74c3c">红色部分</span>和<span style="color: #27ae60">绿色部分</span>不同色。</p>
CSS 类方式管理双色更利于维护
当同一种颜色组合反复出现（比如品牌色+辅助色），硬编码 style 会让 HTML 变臃肿，也难统一调整。用类名解耦样式和结构才是正解。
立即学习“前端免费学习笔记（深入）”；
注意：类名要反映用途，而不是颜色本身。比如 class="error-text" 比 class="red" 更可持续——哪天设计改了主色，你不用改 HTML。
- 在
里加<style></style>，或外链 CSS 文件 - 定义两个语义清晰的类，例如
.keyword和.note - 确保类选择器权重不被意外覆盖（避免用
!important）
<style>
.keyword { color: #2980b9; }
.note { color: #7f8c8d; }
</style>
<p>搜索<span class="keyword">JavaScript</span>时，请参考<span class="note">MDN 文档</span>。</p>
别用 <font></font> 标签，它在 HTML5 中无效
<font></font> 是 HTML 4 时代的遗留标签，HTML5 已彻底移除支持。现代浏览器虽可能“勉强渲染”，但会触发控制台警告，且无法通过 W3C 验证。
典型错误现象：VS Code 或 WebStorm 提示 “<font></font> is obsolete”，或某些严格模式下颜色完全不生效。
- 所有编辑器、Linter（如 ESLint + HTML plugin）都会报错
- 无障碍工具（如屏幕阅读器）可能忽略其样式意图
- 移动端 WebView 或旧版 Safari 可能表现不一致
伪元素或 CSS 变量适合动态双色场景
如果颜色需根据状态切换（比如暗色模式下自动反转），纯 HTML + 内联 style 就不够用了。这时得靠 CSS 变量或伪元素配合 JS 控制。
例如用 ::first-letter 给首字上色，或用 data-color 属性 + CSS 属性选择器驱动颜色变化。但这属于进阶用法，日常静态双色没必要绕这么远。
- 伪元素仅适用于固定位置（如首字、首行），不能任意选中词组
- CSS 变量需搭配
:root声明和 JS 动态设置，适合主题切换等场景 - 简单双色，坚持用
<span></span>+ 类是最稳的选择
