标签必须放在 中，因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 内的
可能被延迟解析，导致 FOUC（Flash of Unstyled Content）更明显
必须确保它出现在 通过 JavaScript 动态创建并插入的 立即学习“前端免费学习笔记（深入）”； 真正需要关注的不是“能不能放 body”，而是“是否符合语义与规范”。哪怕浏览器没报错，只要结构不合法，就可能在某个构建工具、爬虫、邮件客户端或旧版 WebView 中失效——这些地方往往比你想象中更较真。 内部、且不嵌套在其他非元数据元素中（比如不能包在 里）。
，但建议合并以减少解析开销media、scoped（已废弃，勿用）、type（默认 text/css，可省略）等属性media="print"，仍需放在 ，只是加载时机受媒体查询控制例外情况：内联样式或 JS 注入的
元素，可以 append 到 或 ，但最终生效位置仍是文档的样式表集合——浏览器会统一管理。不过，插入到 本身仍是不符合规范的 DOM 操作。
const style = document.createElement('style');
style.textContent = 'body { background: red; }';
document.head.appendChild(style); // ✅ 推荐document.body.appendChild(style) —— 虽然多数浏览器能工作，但违反 DOM 结构约束，可能触发重排异常或 DevTools 显示警告 更容易被 HTML 解析器截断或丢弃
