必须存在的4个基础标签及其顺序为：<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺一不可且顺序不可颠倒，否则会导致乱码、SEO降权或移动端适配失效。
HTML <head> 不是“可有可无的装饰”，而是浏览器解析、SEO抓取、资源加载策略的起点。写错顺序、漏关键标签、滥用<meta>，轻则页面乱码、首屏延迟，重则被搜索引擎降权或移动端适配失效。
必须存在的 4 个基础标签及其顺序
浏览器按顺序解析 <head> 内容，顺序直接影响渲染行为和兼容性。以下四者缺一不可，且必须按此顺序出现：
-
<!DOCTYPE html>（声明必须在第一行，不是<head>内但决定解析模式） -
<html lang="zh-CN">（lang属性影响屏幕阅读器和 SEO 语义） -
<meta charset="UTF-8">（必须在所有其他<meta>和<title>之前，否则中文可能乱码） -
<meta name="viewport" content="width=device-width, initial-scale=1.0">（必须紧随charset后，否则移动端缩放失效）
常见错误：<title> 放在 charset 前、漏掉 viewport、用 gbk 编码但未声明——这些都会导致真实用户看到空白页或字体崩坏。
<title> 和 <meta name="description"> 的 SEO 实际影响
搜索引擎对 <title> 的长度敏感（建议 25–60 字符），过长会被截断；<meta name="description"> 不参与排名，但直接影响搜索结果点击率。两者都应避免堆砌关键词，而要自然表达页面核心内容。
立即学习“前端免费学习笔记（深入）”；
-
<title>示例：`前端性能优化指南 | Web Vitals 实战手册 `（含品牌+主关键词+用途） - 错误写法：
<title>首页_公司名_产品_服务_联系我们</title>（无信息密度，被算法识别为低质） -
<meta name="description">应控制在 70–160 字符，且与<title>语义不重复
注意：<meta name="keywords"> 已被主流搜索引擎忽略，无需添加。
外部资源引入的加载策略与风险点
<link rel="stylesheet"> 和 <script> 在 <head> 中的位置，直接决定白屏时长和资源阻塞行为。
- CSS 必须用
<link rel="stylesheet">，且放在<title>之后、<script>之前——否则会触发 FOUC（Flash of Unstyled Content） - JS 默认阻塞 HTML 解析，如需异步加载，必须加
async或defer属性：<script src="app.js" defer></script> - 避免在
<head>中内联大段 JS（超过 1KB 就该抽离），否则拖慢首字节时间（TTFB） -
<link rel="preload">只用于关键资源（如首屏字体、核心 CSS），滥用反而增加请求压力
典型坑：<script> 没加 defer 却放在 <head> 开头，导致 DOM 构建卡死，用户长时间看到空白页。
现代项目中容易被忽略的增强型 <meta> 标签
除基础标签外，几个小但关键的 <meta> 能显著改善移动端体验和安全策略：
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">：仅对仍需兼容 IE 的项目有效，现代项目可省略 -
<meta name="theme-color" content="#4285f4">：控制 Chrome/Edge 地址栏和 PWA 启动屏颜色 -
<meta name="apple-mobile-web-app-capable" content="yes">：启用 iOS Safari 全屏模式（配合<link rel="apple-touch-icon">） -
<meta name="referrer" content="no-referrer-when-downgrade">：防止跨域请求泄露来源 URL，推荐默认设置
这些标签不显眼，但一旦缺失，PWA 安装失败、iOS 添加到主屏幕图标模糊、第三方跳转泄露 referer —— 都是线上真实发生的故障点。
