必须放<title>（唯一强制标签）；强烈建议紧随其后放<meta charset="UTF-8">（确保中文正常、解析可靠），再依次放<meta name="viewport">、其他<meta>、<link rel="canonical">、<base href>（若使用，须最前影响URL解析）、<link rel="stylesheet">；<script>需加defer或async才可放<head>。
<head> 必须包含 <title>，强烈建议紧随其后放 <meta charset="UTF-8"> —— 缺它会导致中文乱码、表单提交异常、Ajax 响应解析失败，不是“可能出问题”，而是“大概率立刻出问题”。
哪些标签必须/建议放在 head 里
<title> 是 HTML5 规范中唯一强制要求的 <head> 子元素；没有它，文档结构就不合法。<meta charset="UTF-8"> 虽非强制，但浏览器只保证在 <head> 前 1024 字节内、且是第一个 <meta> 时才可靠识别它——所以务必把它放在 <title> 后面、其他任何 <meta> 或 <script> 之前。
常见搭配顺序（无多余空行）：
<head> <title>页面标题</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="简短摘要"> </head>
-
<meta name="viewport">必须紧接<meta charset>后，否则移动端缩放行为不可控 -
<link rel="canonical">如果存在，建议放在所有<meta>之后、<link rel="stylesheet">之前，避免被搜索引擎忽略 -
<base href>若使用，必须是<head>中第一个能影响 URL 解析的标签（比如在<link>和<script>之前），否则相对路径会错乱
script 标签放 head 里会不会阻塞渲染
会，但可以控制。默认情况下，<script src="..."></script> 会同步下载并执行，阻塞 HTML 解析和 DOM 构建。
解决方案只有两个明确有效的选择：
立即学习“前端免费学习笔记（深入）”；
- 加
defer：脚本异步下载，等 HTML 解析完再按顺序执行，适合依赖 DOM 的初始化逻辑 - 加
async：脚本异步下载+下载完立即执行，不保证顺序，适合完全独立的分析脚本或埋点 - 不加任何属性，就别放
<head>里——尤其别放未做优化的第三方 SDK
注意：defer 和 async 对内联脚本（<script>console.log(...)</script>）无效，它们只对带 src 的外部脚本起作用。
哪些东西绝对不能塞进 head
<head> 只收元数据，不渲染内容。以下写法看似能跑通，实则危险：
-
<div>、<p>、<img>等任何会生成视觉输出的标签：浏览器会自动纠错，把它们“踢”到<body>开头，但行为因浏览器版本而异，SEO 和 SSR 场景下极易出错 - 未声明
type的<script>：HTML5 中已废弃无type的脚本，默认当成type="text/javascript"，但某些构建工具或 CSP 策略会拒绝执行 -
<style>块里写@import：它会阻塞渲染，且无法被 preload，应改用<link rel="stylesheet">
<meta charset> 的位置约束和 <base> 的前置要求——它们不像报错那样明显，但会在特定设备、特定 CDN 配置或服务端渲染时突然失效，排查成本远高于一开始就写对。 
