内部样式表必须放在里，不能塞进；浏览器自上而下解析HTML，置于会导致样式延迟应用、FOUC闪屏或被忽略，W3C规范明确要求其属于元数据内容，仅允许出现在中。
内部样式表必须放在
浏览器解析 HTML 是自上而下顺序执行的。如果把 <style></style> 放在 里（比如紧挨着某个 <p></p>），部分旧版浏览器（如 IE8 及更早）可能忽略它，或者导致样式延迟应用、闪烁。W3C 规范也明确要求 <style></style> 属于元数据内容，只能出现在 中。
正确写法示例：
<head>
<style>
p { color: #333; font-size: 16px; }
.warning { background-color: #fff3cd; border-left: 4px solid #ffc107; }
</style>
</head>- 所有 CSS 规则必须包裹在
<style></style>和之间 - 不需要加
type="text/css"—— HTML5 中已废弃，加了反而冗余 - 可以混合使用元素选择器（如
p）、类选择器（如.warning）、ID 选择器（如#header）
<style></style> 里的 CSS 语法和外部文件完全一样
内部样式表不是“简化版 CSS”，它支持全部标准语法：媒体查询、自定义属性（--main-color）、伪类（:hover）、伪元素（::before），甚至 @keyframes 动画——只要浏览器支持，就能用。
常见误操作：
立即学习“前端免费学习笔记（深入）”；
- 在
<style></style>里写 JavaScript 注释//—— CSS 只认/* */ - 漏掉分号或大括号，比如
p { color: red }少了分号，虽多数浏览器容忍，但易引发后续规则失效 - 把 HTML 属性当 CSS 属性用，例如写
class: "btn"—— 这是无效的，CSS 里没有class属性
内部样式表适合单页场景，但别滥用
它确实方便快速调试或写演示页，但一旦页面变复杂，问题就来了：
- 无法被其他 HTML 文件复用，改一处得改每一页
- HTML 文件体积膨胀，尤其带动画或响应式规则时，
<style></style>块可能超过 1KB - 浏览器无法缓存内部样式，每次加载 HTML 都要重新下载全部 CSS
- 和服务端渲染（SSR）或构建工具（如 Vite、Webpack）配合时，容易绕过 CSS 提取逻辑，导致生产环境样式丢失
典型适用场景：index.html 单页应用原型、邮件模板（因多数邮箱客户端只认内联或内部样式）、遗留系统中无法新增文件的维护任务。
和内联样式、外部样式共存时，优先级怎么算？
CSS 权重（specificity）起作用的地方。三者共存时，一般按这个顺序覆盖（从低到高）：
- 外部样式表（
<link rel="stylesheet">）→ 最低 - 内部样式表（
<style></style>）→ 中等 - 内联样式（
style="..."）→ 最高
但注意：如果外部样式用了 !important，而内部样式没加，那外部的仍可能赢；反过来，内部样式加了 !important，也能压过内联样式。所以别依赖顺序，靠权重和 !important 明确意图——不过后者最好少用，容易埋坑。
真正容易被忽略的是：同一份 HTML 里多个 <style></style> 标签，后出现的会覆盖前面同选择器的声明，这点常被当成“bug”排查半天。
