HTML中head头部信息 HTML中head标签所含内容
作者：袖梨
2026-07-24
<head> 中必须包含 <title> 和 <meta charset="UTF-8">，前者是HTML5唯一强制子元素，后者须位于前1024字节内首个<meta>；<meta name="viewport">须紧随其后，否则移动端缩放异常；CSS用<link>勿用@import，JS需加defer或async；SPA中动态更新<head>须用专用库，否则SEO失效。
<head> 不是“放点 meta 就完事”的容器，它直接影响页面能否正确解析、SEO 是否生效、资源是否阻塞渲染，甚至移动端是否缩放异常。缺关键标签或顺序错，浏览器可能乱码、跳转失败、首屏白屏——不是报错，而是静默失效。
必须存在的两个标签：<title> 和 <meta charset>
<title> 是 HTML5 规范中唯一强制要求的 <head> 子元素；没它，文档结构就不合法。<meta charset="UTF-8"> 虽非强制，但缺失会导致中文乱码、表单提交字段截断、Ajax 响应解析失败等实际问题。
-
<title>只能出现一次，内容不能含 HTML 标签（比如<span>），否则被忽略 -
<meta charset>必须是<head>中前 1024 字节内的第一个<meta>，否则部分浏览器（尤其是旧版 Android Webview）会无视它 - 两者建议始终放在
<head>最开头，顺序无所谓，但别被<script>或注释挡在后面
<meta name="viewport"> 必须紧随 charset 后面
移动端页面不加这个，或加了但 content 写错（比如漏掉 initial-scale=1.0），会导致页面被强制缩放、文字模糊、点击区域错位——尤其在 iOS Safari 上表现明显。
- 标准写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要写成
width=375或固定像素值，那会让响应式失效 - 如果用了
<meta http-equiv="X-UA-Compatible" content="IE=edge">（仅 IE 场景），它得放在viewport前面，否则 IE11 可能忽略 viewport
外部资源加载顺序和属性不能乱设
<link rel="stylesheet"> 和 <script> 放在 <head> 里，若不加控制，会直接阻塞 HTML 解析和首屏渲染。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件用
<link rel="stylesheet">，别用@import—— 后者会触发额外 HTTP 请求且阻塞渲染更久 - JS 脚本必须加
defer（推荐）或async：前者保证执行顺序且不阻塞解析，后者适合独立脚本（如统计代码） - 避免在
<head>里写内联<script>（除非极小逻辑），更别放未包裹的 JS 代码，它会同步执行并中断 DOM 构建
单页应用（SPA）里动态更新 <head> 容易被忽略
React/Vue 等框架默认只在首屏生成一次 <head>，路由切换后 <title> 或 <meta description> 不会自动更新——搜索引擎爬虫看到的永远是首页的标题和描述。
- 纯前端项目必须用
react-helmet（React）或vue-meta（Vue 2）/useHead（Vue 3）来声明式管理 - Next.js、Nuxt 等服务端框架内置支持，但需确认是否启用
ssr: true，否则爬虫仍拿不到动态内容 - 注意：
<base href>在 SPA 中慎用，改了会影响所有相对路径（包括图片、API 请求），调试时容易误判为接口 404
最容易被忽略的是 <meta charset> 的位置约束和 viewport 的移动端行为边界——它们不出错，但一出就是整页不可用，而且没有控制台报错提醒你。
