写HTML页面时，很多人打开编辑器就直接敲一个<div>开始布局，结果页面在浏览器里出现了怪异模式渲染、中文乱码或者样式失效等问题，排查半天才发现是文档开头没写对。HTML文档的开头部分看似简单，实际上包含了DOCTYPE声明、html根元素、head区域这几个关键环节，每一环都直接影响浏览器的解析行为。这篇文章就来把HTML文档开头的正确写法讲透。
标准HTML5文档的开头写法
先给出一个最基础的HTML5标准模板，这是目前绝大多数项目应该采用的写法：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>第一行的<!DOCTYPE html>是文档类型声明，它告诉浏览器这份文档使用HTML5标准解析。注意它必须写在文件的第一行，前面不能有空格、空行或者任何注释，否则某些旧版浏览器会退回到怪异模式（Quirks Mode），导致盒模型计算、CSS渲染出现难以排查的偏差。
<html>标签是整个文档的根元素，其中的lang="zh-CN"属性标明了页面语言。这个属性不仅对搜索引擎优化有帮助，也是屏幕阅读器识别语言的依据，对无障碍访问非常重要。中文页面写zh-CN，英文页面写en，不要省略。
head区域各个标签的作用与顺序
<head>区域承载的是页面的元信息，不会直接显示在页面上，但每一项都有实际用途。其中<meta charset="UTF-8">应该放在head的最前面，越早声明字符集，浏览器就能越早确定编码方式。如果这一行漏写或者放在了title之后，而title里又包含中文，就很可能出现乱码。
viewport这个meta标签在移动端开发中不可缺少，width=device-width让页面宽度等于设备宽度，initial-scale=1.0设置初始缩放比例。没有它，手机浏览器会默认以980像素宽度的桌面视口来渲染页面，再做响应式布局就会完全失效。
head里还经常包含以下标签：<title>定义浏览器标签页上的文字，是SEO权重最高的标签之一；<link>用于引入外部CSS文件或favicon图标；<script>如果需要提前加载JS，建议加上defer属性避免阻塞HTML解析。一个引入外部资源的head示例如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是页面的描述文字">
<title>我的网站首页</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>新旧版本DOCTYPE声明的区别
你可能在一些老项目或者旧教程里见过长得多的声明，比如XHTML 1.0的写法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是HTML5之前的时代遗留的产物。那时DOCTYPE需要指向一个具体的DTD（文档类型定义）文件，浏览器要根据DTD来校验标签用法。HTML4.01和XHTML都有Strict、Transitional、Frameset三种变体，声明字符串又长又难记，还必须一个字母都不能写错。
HTML5大大简化了这一点，统一使用<!DOCTYPE html>，不区分大小写，也不需要引用外部DTD。现在新项目一律用这个写法即可，老写法只在做旧系统维护时才会遇到。需要特别提醒的是，声明写错并不总会报错，浏览器可能静默地用兼容模式渲染，问题表现为样式错位，这种隐性问题往往更难发现。
常见错误写法与排查方法
初学者常犯的第一个错误是把DOCTYPE写在第二行，第一行留了空行。虽然HTML5规范对此相对宽容，但一些浏览器仍可能进入怪异模式。第二个常见错误是漏写lang属性，页面功能上看似没影响，但SEO评分和无障碍检测都会扣分。第三个是charset声明缺失，导致中文乱码后误以为是文件保存编码的问题，反复改保存格式却治标不治本。
排查这类问题可以用浏览器开发者工具：在Chrome中按F12打开控制台，如果看到类似“处于怪异模式”的提示，说明DOCTYPE没有生效。也可以在控制台执行document.compatMode，返回CSS1Compat表示标准模式，返回BackCompat则是怪异模式，需要回头检查文档开头。
总结一下，HTML文档开头的要点就三条：DOCTYPE必须写在第一行且使用HTML5简写形式，html标签带上有意义的lang属性，head中把charset声明放在最前面并补全viewport。把这些细节做对，页面才有稳定规范的解析基础，后续的样式和脚本才能按预期工作。