必须包含、、、等声明，影响解析与渲染；中脚本需置于末尾或加defer才能安全操作DOM。
HTML 文档里 和 不是“放哪儿都行”的容器，它们的分工是硬性规范：一个管“告诉浏览器怎么处理页面”，一个管“实际展示给用户看的内容”。
哪些代码必须塞进
浏览器解析 HTML 是从上到下、边读边执行的。 的内容不渲染，但直接影响后续行为。比如 <meta charset="utf-8"> 必须在 里——如果写在 中，浏览器可能已经按默认编码（如 ISO-8859-1）解码了前面的文本，再改也晚了；<title></title> 也一样，放错位置会导致标签页标题为空或显示乱码。
常见错误现象：<link rel="stylesheet"> 放在 底部，页面先闪白再样式加载，用户体验差；<script></script> 没加 defer 或 async 就塞在 顶部，会阻塞 HTML 解析，首屏变慢。
-
<meta>（字符集、viewport、SEO 描述等）必须在 -
<title></title>、<base>、<style></style>只能出现在 -
<link>（CSS、favicon、preload）建议放，但不是语法强制
<script></script> 初始化逻辑
不是“不能”，而是位置决定执行时机。把依赖 DOM 的 JS 写在 开头，比如 document.getElementById("app")，大概率返回 null——因为此时 HTML 还没解析到那个元素。很多人误以为“放在 就安全了”，其实得看具体位置。
立即学习“前端免费学习笔记（深入）”；
使用场景：需要操作真实 DOM 的初始化代码，最稳妥是放在 前，或用 DOMContentLoaded 监听，或加 defer 属性让脚本等 DOM 构建完再执行。
- 脚本放在
开头 → DOM 尚未构建，querySelector找不到元素 - 脚本放在
前 → DOM 已就绪，可直接操作 - 用
<script defer src="..."></script>→ 等 HTML 解析完成再执行，顺序保证
浏览器对
HTML5 规范明确要求 和 必须作为 的直接子元素存在。虽然某些浏览器（如 Chrome）会自动补全缺失的 或把错位的 <meta> “挪进去”，但这属于修复行为，不可依赖。
性能影响：如果手写 HTML 时漏掉 标签，把 <meta> 直接丢在 下，部分旧版 Safari 或 WebView 会忽略它；更糟的是，服务端渲染（SSR）或静态生成工具（如 Hugo、Jekyll）可能直接报错或输出无效 HTML。
- 不要省略
和标签，即使内容为空 - 避免在
里写<div>、<code><p></p>等内容型标签，会被浏览器移到，但语义已破坏 - 验证工具（如 W3C Validator）会把错位的
<title></title>当作严重错误提示
真正容易被忽略的是：现代框架（React/Vue）生成的 HTML 往往隐藏了这些细节，但 SSR 输出或 SEO 静态页一旦 结构出错，搜索引擎抓取时就可能拿不到 title 和 description——不是样式问题，是根本不会被正确索引。
