标签必须放在 中，因html5规范规定其仅为的合法子元素；置于属结构错误，虽浏览器可能容错处理，但会导致验证失败、FOUC、SSR截断等风险。
标签应当放在 里，这是 html5 规范明确要求的合法位置。
为什么不能放在
HTML5 标准中，
是 的“可选子元素”，但不是 的合法子元素。浏览器虽常会“容错解析”（比如把 body 里的
自动提升到 head），但这属于错误恢复行为，不可依赖。
- W3C 验证器会报错：
Element style not allowed as child of element body in this context - 部分严格模式渲染引擎（如某些 webview 或 SSR 环境）可能忽略 body 中的
- 影响 css 加载优先级：body 内的
放在
必须确保它出现在 内部、且不嵌套在其他非元数据元素中（比如不能包在
或 例外情况：内联样式或 js 注入的
里）。
页面标题 内容 - 可以有多个
- 支持
media、scoped（已废弃，勿用）、type（默认text/css，可省略）等属性 - 若使用
media="print"，仍需放在，只是加载时机受媒体查询控制
例外情况：内联样式或 js 注入的
通过 javaScript 动态创建并插入的
元素，可以 append 到 或 ，但最终生效位置仍是文档的样式表集合——浏览器会统一管理。不过，插入到 本身仍是不符合规范的 dom 操作。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
const style = document.createElement('style'); style.textContent = 'body { background: red; }'; document.head.appendChild(style); // ✅ 推荐 - 错误做法：
document.body.appendChild(style)—— 虽然多数浏览器能工作，但违反 DOM 结构约束，可能触发重排异常或 DevTools 显示警告 - 服务端渲染（SSR）场景下，body 中的
真正需要关注的不是“能不能放 body”，而是“是否符合语义与规范”。哪怕浏览器没报错，只要结构不合法，就可能在某个构建工具、爬虫、邮件客户端或旧版 WebView 中失效——这些地方往往比你想象中更较真。