<style>必须放在<head>里，因为浏览器自上而下解析HTML，提前加载样式可避免FOUC；错误放置（如<body>内或嵌套标签中）会导致样式失效或被忽略。
HTML 文档中定义样式，只允许用 <style>、<link>、内联 style 属性这三种方式，且 <style> 必须放在 <head> 内；其他如 <font> 或过时的 border、align 等属性，现代 HTML 已废弃，浏览器虽可能兼容渲染，但不合法、不可靠、不推荐。
为什么 <style> 必须写在 <head> 里
浏览器解析 HTML 是从上到下流式进行的。<style> 放在 <head> 中，能确保样式规则在渲染 <body> 内容前就已加载并生效。若误放 <body> 底部，可能出现「内容先闪现无样式，再重绘」的 FOUC（Flash of Unstyled Content）现象。
常见错误：
- 把
<style>塞进<p>或<div>里 —— 违反 HTML 结构规范，部分浏览器会静默忽略 - 用
<style>包裹 JS 代码或 HTML 标签 —— 它只接受纯 CSS 规则，其他内容会被丢弃 - 漏写
type="text/css"（虽然现代浏览器默认识别，但 XHTML 或严格校验场景下会报错）
<link rel="stylesheet"> 的 href 路径必须是相对或绝对 URL
外部样式表通过 <link rel="stylesheet" href="..."> 引入，href 值不能是本地文件系统路径（如 C:\project\style.css），也不能是未加协议的裸路径（如 style.css 无引号或协议时易被误解析）。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
-
href="./css/style.css"—— 相对当前 HTML 文件所在目录 -
href="/assets/main.css"—— 相对于网站根目录（注意开头的/） -
href="https://cdn.example.com/v1.2.0/base.css"—— 完整 HTTPS URL
容易踩的坑：
- 路径拼错导致 404，但浏览器不会报错，只会静默跳过该样式表
- 使用中文路径或空格未编码（如
href="我的样式.css"）—— 实际请求变成乱码，资源加载失败 - 忘记加
rel="stylesheet"，浏览器当普通链接处理，样式不生效
内联 style 属性优先级高，但不可复用、难维护
直接在标签上写 style="color: red; font-size: 14px;" 是合法的，且 CSS 优先级高于 <style> 和外部样式表（除非用 !important 覆盖）。但它破坏了结构与表现分离原则。
适用场景有限：
- 服务端动态生成单次样式（如邮件模板中限制外链，只能用内联）
- JS 运行时临时修改某元素外观（如
el.style.opacity = "0.5"） - 某些 CMS 或邮件客户端强制要求内联（因不支持外部 CSS）
注意点：
- 属性值必须用双引号包裹，且内部不能含未转义的双引号（可用单引号替代：
style='color: "red";'） - 不能写媒体查询、伪类、@规则等复杂 CSS，仅支持单条声明（
property: value形式） - 大量使用会导致 HTML 膨胀、CSS 无法缓存、响应式逻辑难以统一控制
<font> 标签和旧式属性已彻底淘汰
<font>、<center>、align、bgcolor、cellpadding 等属于 HTML 4 时代的 presentational 属性，在 HTML5 中已被移除语义支持。W3C 明确标记为“obsolete”，validator 会警告，部分新浏览器版本可能逐步弱化渲染。
替代方案很明确：
- 字体颜色/大小/族 —— 用 CSS 的
color、font-size、font-family - 居中对齐 —— 用
text-align: center（文本）或margin: 0 auto+width（块级） - 表格内边距 —— 用
td, th { padding: 8px; }
真正容易被忽略的是：即使这些旧标签在 Chrome 里还能显示，它们也会干扰可访问性（如屏幕阅读器无法识别 <font> 的语义）、破坏 SEO 权重分布、且在 email 客户端或 PWA 离线缓存中行为不可预测。
