<style>标签必须放在<head>中，因浏览器自上而下解析HTML，置于<body>会导致FOUC闪屏、SSR环境忽略、违反W3C规范且样式可能不生效。
<style> 标签写内部样式表，核心就一条：它必须放在 <head> 里，且只作用于当前 HTML 文档。
为什么 <style> 必须写在 <head> 中
浏览器解析 HTML 是从上到下流式渲染的。如果把 <style> 放在 <body> 里（比如紧挨着某个 <div>），虽然多数浏览器仍会生效，但存在两个实际问题：
- 样式可能延迟应用，导致页面先“无样式闪现”（FOUC）
- 部分严格模式解析器或 SSR 环境（如 Next.js 的服务端渲染阶段）会忽略
<body>内的<style> - W3C 规范明确要求
<style>是<head>的合法子元素，放错位置属于结构错误
<style> 里写 CSS 的基本写法和常见错误
内部样式表就是标准 CSS 语法，不加任何前缀或包装，但容易因细节出错：
- 别漏写选择器——
color: red;单独写无效，必须像p { color: red; } - 别混淆属性名：写成
font-color（错误）而不是color（正确） - 别在
<style>里嵌套 HTML 标签，比如<style><p>{ color: blue; }</p></style>—— 这会直接被浏览器忽略 - 注意引号嵌套：CSS 值里用双引号，整个 style 内容又在 HTML 属性中时才需转义；纯
<style>标签内无需额外转义
何时该用内部样式表，而非内联或外部
内部样式表适合“单页应用”或原型页面，但要注意边界：
立即学习“前端免费学习笔记（深入）”；
- 页面仅有一处需要定制样式（比如首页 banner 的特殊排版），用内部比建一个 .css 文件更轻量
- 样式依赖 JS 动态生成（如主题色从 URL 参数读取），可拼接字符串注入
<style>，但需注意 XSS 风险 - 避免在多个页面重复拷贝同一段
<style>—— 这违背可维护性，应抽成外部文件 - 不要用
@import在<style>里加载外部 CSS —— 它会阻塞渲染，且不如<link rel="stylesheet">可缓存
兼容性和性能提醒
<style> 本身兼容所有现代浏览器，但内容受 CSS 版本限制：
- CSS 变量（
--main-color）、gap、aspect-ratio等新特性，在旧版 Safari 或 IE 中不支持 - 大量 CSS 规则（尤其含复杂选择器）会拖慢样式计算，建议用工具（如 PurgeCSS）清理未用规则
- 内部样式无法被浏览器缓存 —— 每次 HTML 更新，样式也得重新下载，不适合高频迭代的生产站点
真正要小心的是：很多人以为把 CSS 塞进 <style> 就算“优化了”，其实只是转移了问题。关键不在位置，而在是否复用、是否精简、是否适配目标环境。
