<meta charset="UTF-8">必须置于<head>最开头，否则导致乱码、SEO失效、移动端缩放异常及脚本加载错乱；viewport需含width=device-width和initial-scale=1.0且静态声明；link与script顺序影响渲染阻塞与DOM就绪。
<head> 不是装饰性容器，它是浏览器解析 HTML 的第一个关键上下文。没写对，页面可能乱码、SEO 失效、移动端缩放异常，甚至脚本加载顺序错乱。
为什么 <meta charset="UTF-8"> 必须放在最前面
浏览器一旦开始解析 HTML，就会按字节流逐段解码。如果 <meta charset> 出现在其他标签之后（比如在 <title> 下面），前面已读入的字节可能已被错误编码解析过，导致标题乱码、script 中文注释失效等不可逆问题。
- 必须紧贴
<head>开始后第一行，不能有空格或注释前置 - 不能用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">替代——HTML5 只认charset属性形式 - 服务端响应头
Content-Type: text/html; charset=utf-8优先级更高，但不能替代该标签（某些 CDN 或代理会剥离响应头）
<meta name="viewport"> 在移动端失效的常见原因
写了却没效果？大概率是 viewport 声明被覆盖、遗漏关键参数，或出现在动态插入的 head 中（此时浏览器已结束初始视口计算）。
- 必须包含
width=device-width和initial-scale=1.0，缺一不可 - 避免使用
user-scalable=no—— iOS Safari 14+ 已忽略该值，且影响可访问性 - 不要在 JS 动态创建
<meta name="viewport">：浏览器只读取初始 HTML 解析阶段的声明 - 若使用 Web Components 或 Shadow DOM，viewport 仍需写在主文档
<head>，子组件内声明无效
<link rel="stylesheet"> 和 <script> 的加载顺序陷阱
看似只是引入资源，实际直接影响渲染阻塞行为和 DOM 就绪时机。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet">放在<script>前：CSS 加载会阻塞后续 JS 执行（即使 script 有defer），但能避免 FOUC -
<script src="...">（无defer/async）放在<link>前：JS 会阻塞 CSS 解析，造成白屏时间延长 -
<script defer>可安全放在<link>后，但注意它仍会等待 CSSOM 构建完成才执行 - 现代推荐顺序：
<meta charset>→<meta viewport>→<title>→<link rel="stylesheet">→<script defer>
真正容易被忽略的不是“该写什么”，而是“谁在什么时候读它”：浏览器解析器不等你写完就开干，<head> 里每一行都在参与首屏渲染的竞速。顺序、位置、拼写，一个都不能松口。
