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