HTML 必含4类标签：和保障解析与响应式，和支撑SEO，preload/preconnect优化性能，referrer策略增强安全。
HTML 的 不是“随便塞点 meta 就行”，它直接影响页面解析、SEO、资源加载顺序和安全策略。标准配置里，有 4 类标签几乎必现，其余按需添加。
必须存在的基础标签：<meta charset> 和 <meta name="viewport">
这两个不是可选项，缺一不可：
-
<meta charset="UTF-8">必须放在最前面（或紧随<title></title>后），否则浏览器可能用错误编码解析后续 HTML，导致乱码或脚本执行异常 -
<meta name="viewport" content="width=device-width, initial-scale=1">是响应式基石，不加的话移动端会默认以 980px 宽度渲染，文字极小、布局错位 - 注意：不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是旧写法，已被charset属性取代，且兼容性更差
SEO 和语义关键项：<title></title> 和 <meta name="description">
搜索引擎抓取时，<title></title> 是首要识别字段，<meta name="description"> 是摘要来源：
-
<title></title>应该简洁（50 字符内）、唯一、含核心关键词；不要堆砌，也不要留空 -
<meta name="description" content="...">不影响排名，但影响点击率；内容需与页面实际一致，长度控制在 155 字符左右，超长会被截断 - 避免使用
<meta name="keywords">—— 所有主流搜索引擎已忽略它，纯属冗余
资源加载与预连接：<link rel="preload"> 和 <link rel="preconnect">
现代性能优化中，这两个标签能显著减少首屏白屏时间：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>：提前声明关键字体/JS/CSS，让浏览器尽早发起请求，但不阻塞渲染 -
<link rel="preconnect" href="https://cdn.example.com">：提前建立 DNS 查询、TCP 握手、TLS 协商，适用于第三方资源域名（如 CDN、字体库、分析脚本） - ⚠️ 注意：
preconnect不要滥用 —— 每个预连都会消耗浏览器资源，建议只对 2–3 个真正高频的跨域域名使用
安全与兼容性兜底：<meta http-equiv="X-UA-Compatible"> 已淘汰，<meta name="referrer"> 需按场景设
老项目常误留 IE 兼容标记，新项目应果断清理：
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">是 IE 时代产物，Chrome/Firefox/Edge（Chromium）完全忽略；保留它只会增加 HTML 体积，还可能误导维护者 -
<meta name="referrer" content="strict-origin-when-cross-origin">推荐显式设置：防止敏感路径（如带 token 的 URL）通过Referer泄露到外部站点 - 若页面含用户登录态且跳转至第三方，考虑
no-referrer；若需统计来源，可用origin
真正容易被忽略的是加载顺序和依赖关系：<meta charset> 必须靠前，<title></title> 要早于任何可能触发重排的 JS，而 preload 标签如果指向了未声明 CORS 的字体，会静默失败 —— 这些细节不报错，但效果全无。
