必须顶格写，因其是浏览器切换标准模式的硬性契约，前置空格、注释或bom会导致怪异模式，引发盒模型错乱、rem失效等渲染异常。
HTML文档结构不是“先写什么再写什么”的流程题，而是浏览器解析和渲染的硬性契约——必须是根元素，里不能塞可见内容，外写文本会触发怪异模式（Quirks Mode）。
为什么<doctype html></doctype>必须放在第一行？
它不是标签，是文档类型声明（doctype），作用是关闭怪异模式、强制浏览器用标准模式解析。漏掉、写错位置、或写成等旧格式，都可能导致盒模型、行高、表单控件渲染不一致。
- 必须顶格写，前面不能有空格、BOM、注释或任何字符
- 大小写不敏感，但惯例全小写：
也合法 - HTML5只认这一种写法，其他变体（如带系统标识符的）已废弃
lang属性到底要不要加？
要加，而且必须准确。不加不会报错，但会影响屏幕阅读器发音、搜索引擎语言识别、甚至部分CSS伪类（如:lang()）的行为。
- 中文页面写
，港台地区可用zh-HK或zh-TW - 嵌套双语内容时，可在子元素上覆盖：比如
<p lang="en">Hello</p> - 值必须是BCP 47标准格式，
zh太宽泛，zh_cn（下划线）是错的
严格来说只有<title></title>是规范强制要求的；但实际项目中，<meta charset="UTF-8">和<meta name="viewport">几乎等于刚需。
-
<meta charset="UTF-8">必须在<title></title>之前（否则标题可能乱码） -
<meta name="viewport" content="width=device-width, initial-scale=1.0">不加，移动端页面会默认缩放成“小地图” -
<title></title>缺失时，浏览器标签页显示空白或文件名，SEO直接归零 -
<link rel="stylesheet">和<script></script>可选，但顺序影响渲染阻塞——CSS放顶部，JS建议放底部或加defer
<div>的典型陷阱
<p><code><div>本身无语义，滥用会导致结构扁平、无障碍支持弱、SEO权重稀释。不是所有“分块”都该用<code><div>。
<ul>
<li>导航区域优先用<code><nav></nav>，页脚用<footer></footer>，主内容用<main></main>——这些语义标签自带隐含ARIA角色
<div>，比如纯装饰性容器或CSS布局隔离
<li>把<code><h1></h1>~<h6></h6>直接塞进<div>没问题，但若整个<code><div>代表一个独立文章区块，应换用<code><article></article>
真正卡住人的往往不是标签怎么写，而是某个<meta charset>放错位置导致中文变方块，或是lang写成zh_CN让语音助手读错声调——细节不在文档里，而在浏览器实际加载那一刻的解析行为中。
