合法html文档必须以开头且仅有一个根元素，否则浏览器可能进入怪异模式；影响语音朗读与seo；中charset、viewport、title缺一不可；需用语义化标签结构化。
一个合法的 HTML 文档必须以 开头，且只允许有一个 <code> 根元素；缺了它，浏览器可能降级到怪异模式，样式和脚本行为会不可预测。
为什么 不能省、也不能写错
这不是可选注释，而是触发标准模式（Standards Mode）的唯一开关。写成 或漏掉空格、大小写混乱（如 <code>），都可能导致 IE 或旧版 Edge 进入 Quirks Mode —— 表单提交异常、<code>box-sizing 失效、getBoundingClientRect() 返回值偏移。
现代项目只需严格使用小写、无多余字符的写法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要加引号、版本号、URL 或 DTD 声明
- 必须是文档第一行，前面不能有任何空格、BOM 或注释
- 大小写敏感：
可接受，但 <code> 在部分解析器中会告警
直接影响屏幕阅读器语调、拼写检查、搜索引擎语义识别，也关系到 CSS 中 :lang() 伪类能否生效。不写或写错（如 lang="zh" 而非 zh-CN）会导致多语言站点语音朗读生硬、翻译插件误判语言。
- 中文推荐用
zh-CN（简体）、zh-TW（繁体），避免只写zh - 如果页面含英文段落，可用
<section lang="en"></section>局部覆盖 - 服务端渲染时，务必从请求头
Accept-Language动态注入，别硬编码
很多新手以为 只放 <title></title>，其实少了关键三项，页面在移动端、SEO、字符显示上立刻出问题：
-
<meta charset="utf-8">：必须放在最前面（紧挨后），否则早期字节可能被错误解码为 ISO-8859-1，导致乱码无法挽回 -
<meta name="viewport" content="width=device-width, initial-scale=1">：没有它，iOS Safari 会默认按 980px 渲染，文字小得看不清，100vw也不等于屏幕宽度 -
<title></title>：不仅是标签页标题，更是 SEO 第一权重项、微信/钉钉分享卡片默认摘要来源；长度建议控制在 30 字以内，避免被截断
虽然浏览器容错强，把 <div> 直接扔进 <code> 能显示，但语义缺失会带来真实代价：无障碍工具无法建立内容层级，搜索引擎降低页面可信度，CSS 的 display: contents 或 all: revert 在无结构区域表现异常。
- 至少用
<header></header>、<main></main>、<footer></footer>划分主体区块，比全用<div class="header"> 更轻量且语义明确 <li> <code><main></main>必须有且仅有一个，不能嵌套在<article></article>或<aside></aside>内 - 图像必须带
alt属性，空字符串alt=""表示装饰图，alt缺失会被屏幕阅读器读出文件名，非常干扰
最容易被忽略的是：HTML 结构不是“能跑就行”，而是每一层标签都在参与浏览器的渲染流水线、辅助技术树构建、搜索引擎索引切片 —— 写错一个 lang 或漏掉 charset，问题往往延迟暴露在海外用户访问、视障用户投诉或搜索排名下滑时。
