必须位于内且靠前，因浏览器流式解析html时需尽早确定编码，若置于中，前面内容可能已被错误编码（如iso-8859-1）解码，导致乱码、dom异常且不可逆。
必须把 和 都显式写出来，不能省略，也不能互相嵌套或错位。 浏览器虽有容错机制，但错放的 <meta>、<title></title> 或脚本位置偏差，会导致乱码、首屏白屏、DOM 获取失败等真实问题。
为什么 <meta charset> 不能挪到
浏览器解析 HTML 是从上到下流式进行的。一旦开始读取内容，就会按当前已知编码解码；如果 <meta charset="UTF-8"> 写在 中，前面的中文或特殊符号可能已被当成 ISO-8859-1 解析，再改也救不回——页面直接出现 字符。
常见错误现象：<title>你好</title> 放在 里，标签页显示为空或乱码；<meta name="viewport"> 错位导致移动端页面缩放异常。
-
<meta charset>必须是中第一个或前几个标签之一 - 所有影响文档解析行为的元信息（字符集、视口、HTTP 头模拟）都只能出现在
- W3C 验证器会将错位的
<title></title>标为“Error”，不是 warning
<script></script> 放在
脚本执行时机完全取决于它在 HTML 中的位置。放在 顶部的 <script></script> 会立即执行，此时 还没开始解析，document.getElementById("app") 必然返回 null。
使用场景：需要初始化 UI 组件、绑定事件、渲染数据的 JS，必须确保 DOM 已就绪。
- 最稳妥：把
<script></script>放在前，例如<div id="app"></div><script src="main.js"></script>
- 也可用
<script defer src="main.js"></script> 放在 <code>，浏览器会等 DOM 构建完再执行 - 绝对避免：
<script>document.querySelector("header").innerHTML = "..."</script>直接写在里
<link rel="stylesheet"> 必须塞进
语法上允许写在 ，但实际效果极差：HTML 渲染线程先输出无样式的原始结构，CSS 加载完成后再重绘，造成明显“闪屏”（FOUC）。部分 SSR 工具甚至拒绝生成含 body 内 link 的合法 HTML。
性能影响：CSS 是渲染阻塞资源，浏览器必须下载并解析 CSSOM 才能继续布局。延迟加载样式会拖慢 LCP（最大内容绘制）指标。
- 推荐位置：
中紧随<meta charset>和<title></title>之后 - 如需异步加载非关键 CSS，用
<link rel="preload" as="style">+ JS 动态插入，而非直接扔进 -
<link rel="icon">也建议放，否则某些浏览器不会预加载 favicon
最容易被忽略的一点：即使 里什么也不写，也要保留空标签——。手写 HTML 时漏掉它，旧版 Safari 或 WebView 可能彻底忽略后续所有元信息，且静态站点生成器（如 Hugo）会报构建错误。这不是“能跑就行”的事，而是语义与兼容性的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
