一个合格的html文档必须包含、、和四部分；须首行无前置内容以防怪异模式；中lang属性不可省略以保障无障碍与seo；内、和缺一不可；需用语义化标签替代纯布局。
一个合格的HTML文档结构，必须包含 、<code>、 和 四个不可省略的部分；漏掉任意一个，都可能导致页面渲染异常、SEO失效或无障碍访问失败。
为什么 必须放在第一行且不能有任何前置内容
浏览器遇到非空白字符（包括注释、空格、BOM）出现在 之前时，会强制进入“怪异模式”（Quirks Mode），导致 CSS 盒模型、盒阴影、flex 布局等现代特性行为异常。常见现象是页面在 Chrome 看正常，但在 IE 或旧版 Safari 中错位、字体发虚、<code>margin 折叠失效。
- 必须严格写成
（全部小写，无空格，无引号，无额外属性） - VS Code 或 Notepad++ 新建文件后，先按 Ctrl+A 全选 → Delete，再输入，避免隐藏 BOM 字符
- 用
file -i filename.html（Linux/macOS）或 PowerShell 的Get-Content -Encoding Byte检查是否含 UTF-8 BOM
lang 属性不是可选项
不设 lang 会导致屏幕阅读器无法正确发音，搜索引擎无法判断页面语言归属，甚至影响某些字体回退逻辑（比如中英文混排时系统可能错误调用日文字体）。zh-CN 是简体中文最通用的值，zh-TW 用于繁体中文站点。
- 若页面含多语言区块（如英文引用段落），应在局部加
<blockquote lang="en"></blockquote> - 不要写成
language="zh-CN"—— 这是无效属性，浏览器忽略 - 服务端渲染时，确保模板中
lang值与实际内容语言一致，避免硬编码成固定值
<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">、<title></title> 是现代网页的“生存底线”。少一个，轻则乱码、移动端缩放失控，重则被搜索引擎降权。
-
<meta charset="UTF-8">必须在最前面（紧随<title></title>之后也允许，但不能在<title></title>之后太远） -
viewport缺失时，iOS Safari 默认以 980px 宽度渲染，用户需双指放大才能看清文字 -
<title></title>不仅显示在标签页，还直接影响搜索结果点击率；长度建议控制在 30 字以内，避免被截断
只用 <div> 套 <code><div> 虽然能跑通，但会让辅助技术（如读屏软件）、爬虫和维护者完全失去上下文。现代 HTML5 明确要求用 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<aside></aside>、<footer></footer> 替代无意义的 <div class="header">。
<ul>
<li>
<code><main></main> 在整个文档中只能出现一次，且必须包裹主体内容（不能只包导航或侧边栏）
<article></article> 表示可独立分发的内容单元（如博客文章、新闻条目），不是所有“区块”都该用它<header></header> 里不要再放 <header></header>，应改用 <h1></h1>～<h6></h6>
真正难的不是写出结构，而是让结构在不同设备、不同辅助工具、不同爬虫规则下保持语义一致。比如 <figure></figure> 和 <figcaption></figcaption> 组合，看似只是图片加标题，实则告诉屏幕阅读器“这是一个独立媒体对象”，比单纯用 <p><img></p> 多一层含义。这种细节，往往在上线后被忽略，直到收到无障碍审计报告才补救。
