html不处理颜色，所有颜色必须通过css控制；废弃font color和bgcolor属性，应统一用css的color、background-color等属性，并遵循样式与结构分离原则。
HTML 本身不处理颜色声明，所有颜色必须通过 CSS 控制；直接写 <font color></font> 或 bgcolor 属性已废弃，现代项目中应完全避免。
color 属性必须用 CSS 写，不是 HTML 标签属性
HTML 文档结构里没有原生的颜色控制能力。所谓“文字颜色”“背景色”，全部依赖 CSS 的 color、background-color、border-color 等属性。常见错误包括：
- 误用已移除的
<font color="red"></font>：浏览器可能渲染，但会报警告，Lighthouse 评分下降，CI/CD 流程常失败 - 在
中设背景：HTML5 不支持该属性，部分旧浏览器兼容，但无法响应暗色模式或媒体查询 - 把颜色值硬编码在 HTML 标签里（如
style="color:#333"）：虽能用，但破坏样式与结构分离原则，后期维护成本高
正确做法是统一走 CSS：外链 .css 文件 > <style></style> 块 > 行内 style（仅限调试或极简场景）。
十六进制、RGB、HSL 怎么选？看维护场景和团队习惯
三种主流写法没有绝对优劣，关键看是否一致、可读、可扩展：
-
#3498db（六位）或#39d（三位）：兼容性最好（IE9+），适合品牌色固定、需精确复现的项目；注意三位缩写只在每对数字相同时才成立（#abc→#aabbcc），#1234是无效写法 -
rgb(52, 152, 219)或rgba(52, 152, 219, 0.8)：适合需要动态透明度或 JS 计算颜色的场景（如状态覆盖层）；但数值不易记忆，建议配合 CSS 变量封装，例如--primary-rgb: 52, 152, 219;，再用rgb(var(--primary-rgb)) -
hsl(204, 68%, 53%)：调色更直观（比如“把饱和度降 20%”比改 RGB 数字快得多），适合主题系统或设计系统驱动的项目；但 IE 不支持 HSLA，若需兼容旧环境得 fallback
别混用：一个项目里同时出现 tomato、#ff6347、rgb(255,99,71) —— 看似等价，实则增加比对成本和出错概率。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
color-scheme 声明不是样式，而是浏览器适配授权
color-scheme 是个容易被误解的元信息，它不定义颜色，只告诉浏览器“我支持哪些系统配色方案”：
- 必须写在
里，且越靠前越好：<meta name="color-scheme" content="light dark">（放在<title></title>前最稳妥） - 不加这行，哪怕写了
@media (prefers-color-scheme: dark) { body { background: #121212; } }，原生<input>、滚动条、<button></button>仍按系统默认浅色渲染，造成视觉割裂 - CSS 中的
:root { color-scheme: light dark; }不能替代<meta>，它只影响局部元素，且触发时机晚，可能导致初始闪屏 - 拼错成
color-sceheme或写成name="theme"就完全失效，无任何提示
真正起效的颜色切换，靠的是 <meta> 授权 + @media (prefers-color-scheme) 覆盖自定义样式，二者缺一不可。
暗色模式下最容易被忽略的对比度陷阱
很多人以为只要把 color 和 background-color 都改成深色就完成了适配，但 WCAG 要求文本与背景的对比度 ≥ 4.5:1（普通文本），否则视障用户根本看不清：
- 纯黑
#000搭配深灰文字（如#333）对比度只有 ~3.2，不达标；推荐用#121212背景 +#e0e0e0文字 - 别只改文字色，漏掉
border-color、placeholder、svg fill、hr等元素——它们在暗色下可能彻底消失或糊成一片 -
currentColor不会自动适配暗色模式，它只是当前color值的复用；想让 SVG 图标随文字变色，得在媒体查询里同步重设color
最后提醒一句：颜色声明不是写完就完的事，它嵌在文档结构里，牵扯到可访问性、性能（如 rgba() 不触发硬件加速）、主题切换逻辑和跨浏览器一致性——越简单的地方，越容易埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
