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