style标签必须放在head内，否则浏览器会忽略或降级解析；应紧贴title后、不被注释包裹、只写纯CSS、type属性可省略但若指定须为text/css、@import须置于最前且无媒体查询、语法错误会导致后续样式静默截断。
style标签必须放在里，否则可能不生效
浏览器解析 HTML 时，<style> 标签只有在 <head> 内才会被当作样式表处理；如果误写进 <body>，多数浏览器会忽略它，或者触发降级解析（比如当成普通文本渲染）。这不是“偶尔失效”，而是明确的规范行为。
-
<head>是唯一推荐且稳定的位置，<style>标签应紧贴在<title>后或<meta>等其他 head 元素之间 - 不要用注释包裹
<style>，例如<!-- <style>...</style> -->→ 注释内内容完全不解析 - 多个
<style>标签可以共存，但顺序影响层叠优先级：后定义的规则可覆盖前面同选择器的声明
style标签里不能写HTML或JS，只接受纯CSS规则
<style> 的内容区不是模板区域，它只接受标准 CSS 语法。混入 HTML 标签、JS 表达式、甚至未闭合的 CSS 注释（/* 没配 */）都会导致后续所有样式失效——而且没有任何报错提示。
- ✅ 正确：
h2 { color: #333; font-weight: bold; } - ❌ 错误：
<p>hello</p> h2 { color: red; }（含 HTML 标签） - ❌ 错误：
h2 { color: ${themeColor}; }（JS 模板语法不支持） - ❌ 错误：
/* h2 { color: red; }（缺少结束符，整块被丢弃）
type属性现在可以省略，但写了就必须是text/css
HTML5 明确允许省略 type 属性，默认就是 text/css。但如果显式写了，值就必须严格匹配，否则某些旧环境（如部分 Electron 版本或严格模式下的 IE 兼容层）可能拒绝加载。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 推荐写法：
<style>body { margin: 0; }</style> - ✅ 兼容写法：
<style type="text/css">body { margin: 0; }</style> - ❌ 风险写法：
<style type="css">...或<style type="text/plain">...
内部样式表无法使用@import，除非放在最开头
@import 在 <style> 中是合法的，但它有硬性约束：必须出现在所有其他 CSS 规则之前，且不能嵌套在任何选择器块内。一旦位置错或后面跟了别的声明，整条 @import 就会被忽略。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可行：
<style>@import url("base.css"); p { color: blue; }</style> - ❌ 无效：
<style>p { color: blue; } @import url("base.css");</style> - ❌ 无效：
<style>@import url("base.css") screen and (min-width: 768px);</style>（带媒体查询的 @import 不被
真正容易被忽略的是：哪怕你把 <style> 放对了位置、语法也全对，只要里面有一条规则因单位缺失（比如 width: 100）、引号错位（比如 font-family: "Helvetica Neue" 缺右引号）或冒号后空格遗漏（color:red），浏览器就会静默跳过整条声明之后的所有内容——不是单条失效，是“断链式”截断。调试时得一行行删减确认，而不是只盯着最后几行看。
