<head>中必须包含<title>和<meta charset="UTF-8">，建议置于最开头；viewport需紧随其后；script应加defer或async避免阻塞；结构化数据须内联于<head>。
<head> 里不能放任何会“渲染出可见内容”的元素，比如 <div>、<p>、<img> —— 浏览器会自动忽略或纠错，但行为不可靠，别这么干。
必须存在的元数据：<title> 和字符集声明
<title> 是唯一强制要求的 <head> 子元素（HTML5 规范），没它页面就算结构不完整；<meta charset="UTF-8"> 虽非强制，但缺失会导致中文乱码、表单提交异常等实际问题。这两项建议始终放在 <head> 最开头。
-
<title>只能出现一次，内容会显示在浏览器标签页和书签中 -
<meta charset>必须是 <head> 中前 1024 字节内的第一个<meta>，否则可能被忽略 - 不要用
<meta http-equiv="Content-Type">替代，现代浏览器已不推荐
控制页面行为的 <meta>：viewport 和 http-equiv
<meta name="viewport"> 是响应式页面的刚需，没它移动端会默认缩放成桌面视口宽度；<meta http-equiv> 类似 HTTP 响应头，但仅对部分值生效（如 refresh、default-style），多数已被弃用或有更优替代。
-
<meta name="viewport" content="width=device-width, initial-scale=1">应紧随<meta charset>后，避免 iOS Safari 渲染抖动 -
http-equiv="X-UA-Compatible"对现代浏览器无效，IE 已淘汰，可删 -
http-equiv="refresh"会触发跳转或重载，但破坏后退体验，优先用 JS 或服务端重定向
资源加载与预连接：<link> 的常见用途
<link> 是 <head> 里最常被误用的标签——不是所有 rel 值都适合放这里，也不是所有资源都该提前加载。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet">加载 CSS，阻塞渲染，建议合并、压缩、关键 CSS 内联 -
<link rel="icon">指定 favicon，路径要确保 404 不报错（否则控制台刷屏） -
<link rel="preload">提前加载关键资源（如字体、首屏图片），但需配合as属性，否则可能被忽略 -
<link rel="dns-prefetch">或<link rel="preconnect">可减少第三方域名 DNS 查询延迟，但只对真实跨域请求有效
脚本和结构化数据：哪些能放，哪些不该放
<script> 可以放 <head>，但默认同步执行，会阻塞 HTML 解析；<script type="application/ld+json"> 这类结构化数据则完全安全，且必须放 <head>（Google 等爬虫只在此处读取）。
- 普通 JS 脚本加
defer属性可安全放 <head>，按顺序执行且不阻塞解析 -
async脚本不保证执行顺序，适合统计、广告等独立逻辑 -
<script type="module">默认defer行为，但模块路径需带扩展名或完整 URL，否则 404 - JSON-LD 结构化数据别用
src外链，必须内联，且不能含注释或非法字符
真正容易被忽略的是顺序和副作用：<meta charset> 放太晚、<link rel="stylesheet"> 后跟 <style> 导致 FOUC、<script defer> 依赖未定义的全局变量……这些细节不会报错，但会让页面表现不稳定。
