HTML里的head标签包含什么？

作者：袖梨 2026-07-22

必须放<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">