是，style标签必须放在head里；HTML5规范强制要求其为head的合法子元素，置于body中虽可能被容错解析，但会导致FOUC、媒体查询失效、CSS变量未定义及层叠顺序混乱等问题。
style标签必须放在head里吗？
绝大多数情况下，<style> 标签应该且必须放在 <head> 中。浏览器解析 HTML 是自上而下进行的，把 <style> 放在 <head> 能确保样式规则在渲染页面前就已加载并生效，避免 FOUC（Flash of Unstyled Content）。
虽然 HTML5 允许 <style> 出现在 <body> 中（只要不是在 <script> 或其他交互性元素内部），但实际使用中会带来几个问题：
- 样式可能滞后应用，导致页面先以默认样式渲染、再重绘，肉眼可见“闪一下”
- 部分 SSR 框架或预渲染工具会忽略
<body>里的<style>，导致首屏样式丢失 - 可访问性检测工具（如 axe）可能报 warning，认为结构不规范
多个style标签可以共存吗？顺序有影响吗？
可以，一个 HTML 文档中允许存在多个 <style> 标签，它们会按出现顺序依次解析和叠加。这意味着后面出现的 <style> 里的同名规则，会覆盖前面的——但前提是选择器特异性（specificity）相同。
常见误判点：
立即学习“前端免费学习笔记（深入）”；
-
<style>的位置顺序 ≠ 最终样式优先级顺序；真正起作用的是 CSS 特异性 +!important+ 声明顺序三者共同决定 - 如果第一个
<style>里写了h1 { color: red !important; }，后面哪怕写h1 { color: blue; }也无效 - 动态插入的
<style>（比如 JS 用document.head.appendChild()添加）会追加到末尾，因此通常具有更高声明顺序权重
scoped属性为什么基本不用了？
scoped 属性本意是让 <style> 只作用于其父元素及后代，类似 Shadow DOM 的局部作用域。但它在 2020 年后已被主流浏览器逐步弃用：Chrome 从 78 开始不支持，Firefox 从未实现，Safari 仅实验性支持且早已移除。
替代方案更可靠：
- 用 BEM 或 CSS Modules 类名约定，人为隔离作用域
- 现代框架（Vue、Svelte）的
<style scoped>是编译时处理，不是原生 HTMLscoped属性 - 真需要局部样式，直接用
<style>配合唯一 class 前缀，比如.page-home h1，比依赖已废弃的属性更可控
type="text/css" 还需要写吗？
不需要。HTML5 明确规定 <style> 的默认 MIME 类型就是 text/css，省略 type 属性完全合法，且更简洁。
写反而容易出错：
- 拼错成
type="css"或type="text/style"会导致样式被忽略 - 某些老旧 CMS 或模板引擎会自动注入
type，但值为空或错误，引发兼容性问题 - 所有现代浏览器（包括 IE9+）都默认识别无
type的<style>
真正要注意的是：别在 <style> 里混写非 CSS 内容，比如 JS 注释 // 或未闭合的 @media 块——这些会让整段样式失效，而且浏览器不会报错，只默默跳过。
