必须独占第一行且不可省略，它是触发浏览器标准模式的唯一开关；若缺失或前有空格/bom/注释，将降级为怪异模式，导致css盒模型、js尺寸计算等底层行为异常。
HTML文档结构不是模板填空，而是浏览器解析和渲染的契约起点。不写，或把<code>放在之后，浏览器就可能降级到怪异模式（Quirks Mode），CSS盒模型、JS获取元素尺寸都会出错——这不是“看起来差不多”，而是底层行为彻底不同。
为什么必须放在第一行且不能省略
它不是注释，也不是可选声明，而是触发标准模式（Standards Mode）的唯一开关。浏览器看到它，才按HTML5规范解析后续标签；没它，或前面有空格/注释，就会回退到怪异模式，box-sizing、getBoundingClientRect()返回值全乱套。
- 必须独占第一行，前面不能有任何字符（包括BOM、空格、
<!-- comment -->） -
html全小写即可，HTML或Html也合法，但大小混用易引发团队风格争议 - 不要写
这类旧声明——现代项目无兼容必要，反而增加解析负担
lang属性到底影响什么
它不控制页面显示语言，而是告诉屏幕阅读器、搜索引擎、翻译插件当前文本的自然语言。设错会导致语音朗读音调错误、SEO关键词匹配失准、浏览器自动翻译失效。
- 中文必须用
lang="zh-CN"（简体）、lang="zh-TW"（繁体），lang="zh"太宽泛，部分辅助技术不识别 - 多语言页面可在局部覆盖：比如
<p lang="en">Hello</p>，此时该段落独立于根lang - 服务端动态生成时，务必从用户请求头（
Accept-Language）或配置中取值，硬编码lang="en"对中文用户极不友好
顺序决定加载优先级和执行时机。<meta charset="UTF-8">必须在<title></title>之前，否则标题里的中文可能乱码；<link rel="stylesheet">位置影响FOUC（Flash of Unstyled Content）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<meta charset="UTF-8">应为内第一个标签（除<title></title>外，但实际建议放最前） -
<title></title>尽早出现，利于SEO抓取和标签页快速显示文字 -
<link rel="stylesheet">放在<script></script>之前，避免阻塞渲染；多个CSS文件按依赖顺序排，避免@import嵌套 -
<script defer></script>可放在末尾，但<script></script>（无defer/async）必须放前，否则会阻塞DOM构建
看似自由的内容，其实受隐式规则约束。比如<div>直接包<code><h1></h1>没问题，但把<h1></h1>塞进<p></p>里，浏览器会自动闭合<p></p>——导致DOM结构和预期不符。
-
<p></p>、<li>、<td>等流内容容器，禁止嵌套标题级标签（<code><h1></h1>–<h6></h6>），浏览器会“修复”成意外结构 -
<main></main>必须且只能有一个，且不应被<article></article>或<section></section>包裹——它是页面主体内容的语义锚点 - 自闭合标签如
<img>、<input>后面不要加/（<img src="x">），HTML5不强制，但多余斜杠在某些XML解析场景下反而出错
真正难的不是记住每个标签怎么写，而是理解浏览器遇到非法嵌套或缺失声明时“自动纠错”的逻辑——它救了你一次，下次就可能埋下定位不到的样式或JS bug。
