HTML文档头部应包含charset、viewport、title等基础元素，按规范顺序排列以提升可读性与SEO；合理组织meta标签，优先放置渲染相关元信息，精简描述性内容；CSS通过link引入并置于script前，关键资源可用preload预加载；结构化数据如JSON-LD放head末尾，避免大段脚本阻塞解析。规范化头部结构有助于页面性能优化与维护。
HTML文档的头部（head）是网页结构中非常关键的部分，它不直接显示内容，但负责定义页面的元信息、链接资源和行为指令。一个规范化、结构清晰的头部有助于提升页面的可读性、SEO表现以及浏览器兼容性。
1. 基础结构：必需的头部元素
每个HTML文档的 head 区域应包含以下基本元素，按推荐顺序排列：
- charset 声明：指定文档字符编码，应位于最前，避免乱码问题。
- viewport 元标签：用于响应式设计，确保在移动设备上正确缩放。
- title 标签：定义页面标题，对SEO和用户体验至关重要。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
2. 元信息规范：合理组织 meta 标签
meta 标签用于提供页面描述、关键词（虽已弱化）、作者等信息。建议按功能分类，并保持简洁：
- 放置与浏览器渲染相关的 meta 在前（如 charset、viewport）。
- 描述性 meta（description、author）紧随其后。
- 避免冗余或过时的 meta（如 keywords 对现代SEO作用有限）。
<meta name="author" content="开发者姓名">
3. 外部资源链接：CSS 与 Preload 的顺序
引入外部样式表和预加载资源时，应遵循性能优先原则：
立即学习“前端免费学习笔记（深入）”；
- CSS 文件使用 link rel="stylesheet" 引入，建议放在 meta 之后、script 之前。
- 关键资源可使用 link rel="preload" 提前加载，提升加载速度。
- 避免将大量 CSS 内联，影响缓存效率。
<link rel="preload" href="fonts/normal.woff2" as="font" type="font/woff2" crossorigin>
4. 脚本与结构化数据：合理安排 script 和 JSON-LD
虽然 script 通常放在 body 底部，但某些头部脚本（如 CSP、即时执行脚本）仍需在 head 中处理：
- 非阻塞脚本使用 defer 或 async 属性。
- 结构化数据（如 JSON-LD）用于SEO，应放在 head 末尾。
- 避免在 head 中写大段 JavaScript，影响解析速度。 <script type="application/ld+json">
{ "context": "https://schema.org", "type": "WebPage", "name": "HTML头部指南" }
</script>
基本上就这些。保持头部结构清晰、语义明确、顺序合理，能显著提升网页质量。规范化不是追求复杂，而是让代码更易维护、更高效运行。
