内部样式表应写在<head>中，符合HTML规范且推荐使用；适用于单页、轻量、无复用需求场景，如营销页、邮件模板、原型页及微前端子应用入口页。
内部样式表写在 <head> 里完全合法且推荐
HTML 规范明确允许把 <style> 标签放在 <head> 中，浏览器会按预期解析并应用样式。这是最标准的内部样式用法，不是“将就”，而是设计使然。
什么情况下该用内部样式（<style>）而不是外部 CSS 或行内样式
内部样式适合单页、轻量、无复用需求的场景，核心是「只在这一个 HTML 文件里生效，且不值得单独抽成 .css 文件」。
- 营销落地页（Landing Page）：内容固定、生命周期短、SEO 要求高，避免额外 HTTP 请求
- 邮件模板（HTML Email）：多数邮件客户端禁用外部 CSS，
<style>是唯一可靠方式（注意：仅支持部分 CSS 属性） - 原型或演示页面：快速验证 UI 效果，不想建文件、配构建工具
- 微前端子应用入口页：主框架已加载全局样式，子页只需局部覆盖，且不希望污染全局作用域（需配合
scoped或 BEM 等约束）
<style> 放在 <head> 里但样式不生效？常见原因
不是位置错了，而是加载时机、选择器优先级或语法细节出了问题。
- 样式被外部 CSS 覆盖：检查开发者工具中
Computed面板，确认规则是否被更高优先级的规则（如 ID 选择器、!important）干掉 -
<style>标签缺少type="text/css"（虽然现代浏览器默认识别，但旧版 IE 可能忽略） - 使用了不被支持的语法：比如在邮件模板中用了
flex或grid，Gmail 等客户端直接丢弃整段<style> - DOM 尚未加载完成就执行 JS 操作样式：内部样式本身是同步解析的，但如果 JS 在
<head>中立即运行并读取offsetHeight等属性，可能拿到 0 —— 这不是样式问题，是执行时机问题
一个安全可用的内部样式示例（含注释说明）
<head>
<meta charset="UTF-8">
<title>内部样式示例</title>
<style type="text/css">
/* 基础重置（谨慎使用，避免影响全局） */
* { margin: 0; padding: 0; box-sizing: border-box; }
<pre class='brush:php;toolbar:false;'>/* 仅作用于本页的组件类名，带命名空间前缀 */
.lp-hero { background: #2c3e50; color: white; padding: 2rem; text-align: center; }
.lp-hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
/* 邮件友好写法：避免 float / flex / calc()，用 table 布局替代（此处略） */</style> </head>
注意：type="text/css" 不是必须，但加上更稳妥；选择器尽量具体、加前缀，避免意外影响其他页面逻辑；复杂项目别硬撑——内部样式超过 50 行，就该考虑拆出去了。
立即学习“前端免费学习笔记（深入）”；
