必须置于head最前面以防乱码，viewport和title不可省略且应按charset→viewport→title顺序排列，CSS需在JS前加载以避免FOUC，JSON-LD宜放在/head前收尾。
head 标签必须紧接在 之后，且所有内容都不可见、不参与渲染——排版不是为了“好看”，而是为了防止乱码、FOUC、SEO 失效和移动端缩放异常。
<h3>meta charset 必须放在 head 最前面</h3>
<p>浏览器按顺序解析 HTML，<code><meta charset="UTF-8"> 若不在 <style></style> 或 <script></script> 中的注释解析失败。
- ✅ 正确位置：紧跟
开标签后第一或第二行 - ❌ 常见错误：把它塞在
<title></title>后面、或和一堆meta混在一起无序堆砌 - ⚠️ 不要用
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">替代——老版 Safari 兼容性差，且语义冗余
viewport 和 title 的顺序与必要性
<meta name="viewport"> 和 <title></title> 是仅有的两个“非可选但常被漏掉”的 head 子元素。前者决定移动端是否能正常缩放，后者影响浏览器标签页文字、分享卡片标题和 SEO 排名。
- ✅ 推荐顺序：
<meta charset>→<meta name="viewport">→<title></title> - ❌ 把
<title></title>放最后：虽不报错，但部分爬虫会截断抓取，导致 SEO 标题为空 - ⚠️
<meta name="viewport">缺失时，iOS Safari 默认以 980px 宽度渲染页面，再 responsive 也白搭
link 和 script 的加载位置陷阱
CSS 必须在 JS 前加载，且 <link rel="stylesheet"> 应尽可能靠前；否则浏览器一边解析 HTML 一边发现样式还没来，就会先渲染无样式的 DOM（FOUC）。
- ✅
<link>放在<title></title>后、任何<script></script>前 - ❌ 把
<script src="xxx.js"></script>放在顶部：阻塞 HTML 解析，拖慢首屏 - ⚠️ 如需预加载关键 CSS，可用
<link rel="preload" as="style" href="main.css">，但必须配合<link rel="stylesheet">使用，否则不生效
JSON-LD 和其他 meta 的收尾习惯
结构化数据（如 <script type="application/ld+json"></script>）应放在 前最后一组标签，避免干扰核心元信息优先级。其他描述类 meta（keywords、description）可放 <title></title> 后，但别堆在最末——它们对现代 SEO 影响微弱，不必强求位置。
立即学习“前端免费学习笔记（深入）”；
- ✅ JSON-LD 放
前，不混在一堆meta里 - ❌ 把
<h1></h1>或<div> 错误塞进 <code>：浏览器会自动“修复”到开头，DOM 顺序错乱且不可预测 - ⚠️ 所有
lang属性（如）虽不强制，但缺失会影响屏幕阅读器发音和 Google 多语言识别
真正容易被忽略的，是
<meta charset> 的位置精度和 <meta viewport> 的存在本身——它们不报错、不警告，但一出问题就是整站乱码或移动端完全不可用，而且很难一眼定位。
