应使用标签包裹需变色文字并配合color属性或css类实现样式控制，禁用已废弃的标签，注意继承、优先级及渲染干扰问题。
用 <span></span> 包裹要变色的文字
HTML 本身不支持“给一行里某几个字单独设颜色”，必须靠内联元素把目标文字从文本流中“拎出来”。<span></span> 就是干这个的——它没语义、不换行、不影响布局，纯用来加样式。
常见错误是直接在 <p></p> 里写颜色属性（比如 <p color="red"></p>），这根本无效，HTML 标签没有 color 属性。
- 只对想变色的部分套
<span style="color: red">红色字</span> - 不要用
<font></font>标签——已废弃多年，现代浏览器虽可能渲染，但不可靠且不合法 - 如果要复用样式，优先用 class：
<span class="highlight">高亮字</span>，再在 CSS 里定义.highlight { color: #007bff; }
CSS 的 color 属性只作用于文本内容
color 是文本颜色控制的唯一标准方式，它影响的是元素自身的文字，以及其内部未显式覆盖颜色的子文本。它不会改变背景、边框或图片。
容易踩的坑：给 <span></span> 设了 color，但父级 <p></p> 用了深色主题或 CSS 变量，结果被继承覆盖；或者误以为 color 能让图标、SVG 或伪元素变色（不能，那些得另配）。
立即学习“前端免费学习笔记（深入）”；
-
color支持关键字（red）、十六进制（#ff6b6b）、RGB（rgb(255, 107, 107)）、HSL 等，推荐用十六进制或 HSL，可控性强 - 避免用
!important强行覆盖——大概率说明选择器优先级或继承逻辑没理清 - 暗色模式下，硬编码颜色可能看不清；如需适配，可用
color: var(--text-highlight, #007bff)配合@media (prefers-color-scheme: dark)
别用 <font></font> 标签，哪怕它“看起来能用”
<font color="blue"></font> 在部分老项目或编辑器预览里似乎有效，但这只是浏览器的向后兼容兜底行为，不是规范，也不保证跨浏览器一致。W3C 早在 HTML 4.01 就废弃了它，HTML5 完全不支持。
真实问题场景：从 Word 粘贴或 CMS 导出的 HTML 带了一堆 <font></font>，显示正常但校验报错、SEO 工具警告、未来某天某个浏览器更新后突然失效。
- 批量替换时，正则可匹配
<font>]*color=["']([^"']*)["'][^>]*>([\s\S]*?)</font>，转成<span style="color: $1">$2</span> - 如果只是临时调试，用开发者工具直接改
style属性比改标签更安全 - 注意
<font></font>可能嵌套或和<b></b>/<i></i>混用，手动清理时别漏掉闭合标签
遇到 inline 元素颜色不生效？先查三个地方
写了 <span style="color: green"></span> 却没变色，90% 是以下三类干扰之一：
- CSS 优先级更高：检查是否被父级
!important或更具体的选择器（比如p spanvsspan）覆盖 - 继承链中断：父元素设了
color: transparent或visibility: hidden，子元素无法“继承”出可见颜色 - 文本被其他样式遮挡：比如
background-color和文字颜色相近、用了text-shadow盖住原字、或字体本身渲染异常（如某些 icon font 把文字当图标路径处理）
最稳的排查顺序：打开浏览器开发者工具 → 选中那个 <span></span> → 看右边 Styles 面板里 color 是否被划掉；没划掉就看 Computed 面板里最终生效值是多少；再往上逐级点父元素看 color 继承来源。
真正麻烦的从来不是怎么标颜色，而是为什么标了却看不见——这时候往往不是 HTML 写错了，是样式层叠或渲染上下文出了问题。
