<head>是浏览器解析、SEO和渲染的决策起点，其中<meta charset="UTF-8">须置于最前防乱码，<meta name="viewport">需正确组合参数适配移动端，<title>与<meta description>影响点击率而非排名，图标与manifest需按平台兼容性配置，标签顺序直接影响性能与体验。
<head> 不是装饰性容器，它是浏览器解析、搜索引擎索引、页面渲染行为的决策起点。没写对，字符就乱码；漏了 viewport，移动端直接缩成一团；<title> 缺失或重复，SEO 和书签功能就断了一半。
为什么 <meta charset="UTF-8"> 必须放在最前面？
浏览器从上到下解析 HTML，一旦遇到非 ASCII 字符（比如中文、emoji），而此时还没读到 <meta charset="UTF-8">，就会按默认编码（如 ISO-8859-1）尝试解码，导致乱码——而且这个过程不可逆，后续再补也救不回来。
-
<meta charset="UTF-8">应该是<head>中第一个标签（紧随<head>开始标签之后） - 不要用旧写法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 已明确弃用 - 即使你确认所有文件都存为 UTF-8，仍需显式声明——浏览器不看文件编码，只看这个标签
<meta name="viewport"> 的常见参数陷阱
它不是“写了就行”，参数组合错误会导致缩放失控、双击放大失效、横向滚动条意外出现。
-
width=device-width是基础，但单独写它不够：iOS Safari 会忽略initial-scale=1.0以外的缩放控制 -
user-scalable=no在 iOS 10+ 上已被部分限制，且影响可访问性，不建议强制禁用 - 若要禁止缩放，更稳妥的做法是同时设
maximum-scale=1.0, minimum-scale=1.0，而非仅靠user-scalable - 不要写
width=375这类固定像素值——不同设备宽度不同，应始终用device-width
<title> 和 <meta name="description"> 对 SEO 的真实影响
它们不决定排名，但决定点击率。搜索引擎在结果页展示的标题和摘要，几乎完全来自这两个标签。
立即学习“前端免费学习笔记（深入）”；
-
<title>长度建议控制在 50–60 个字符内，超长会被截断，核心关键词尽量靠前 -
<meta name="description" content="...">不是关键词堆砌区，而是面向用户的简明摘要，长度建议 ≤155 字符 - 不要多个页面共用同一段
description，搜索引擎会判定为低质内容 -
<title>是必填项，缺失将导致页面被视作无效 HTML，部分爬虫直接跳过
<link rel="icon"> 和 <link rel="manifest"> 的兼容性现实
图标和 PWA 清单不是“锦上添花”，而是现代 Web 应用的基础识别凭证。但不同平台支持差异极大。
-
<link rel="icon" href="/favicon.ico">兼容性最好，必须提供 .ico 格式（哪怕只是 16×16 像素） - 想支持高 DPI 屏幕和 Apple 设备，得额外加
<link rel="apple-touch-icon" href="/icon-180.png">，尺寸至少 180×180 -
<link rel="manifest" href="/manifest.json">是 PWA 安装前提，但 Chrome/Edge 支持良好，Safari 仅有限支持（iOS 16.4+ 才开始实验性支持） - 所有
<link>路径必须是绝对路径（如/favicon.ico），相对路径在 SPA 路由下极易 404
真正容易被忽略的，不是该写什么标签，而是标签顺序和上下文依赖：<meta charset> 必须最早，<title> 应在 <meta> 之后但早于任何 <script>，而 <link rel="stylesheet"> 若带 media="print"，就绝不能阻塞首屏渲染——这些细节不报错，但悄悄拖慢加载、破坏体验、让 SEO 功亏一篑。
