标准html文档结构必须包含、、（含在前）和四部分；须顶格首行无空格或注释，否则触发怪异模式导致渲染异常，lang属性影响读屏与seo，charset须为首个元标签以避免乱码。
标准HTML文档结构必须包含 、<code>、 和 四个不可省略的部分，缺一就会触发浏览器怪异模式或导致 SEO/可访问性失效。
为什么 必须顶格写在第一行
这个声明不是 HTML 标签，而是告诉浏览器“用标准模式解析本页”。如果前面有空格、注释或 BOM 字符，浏览器会退化为怪异模式（Quirks Mode），CSS 盒模型、getBoundingClientRect() 行为、甚至 Flex 布局都可能出错。
- 常见错误：在它上面加
<!-- 注释 -->或缩进 - 验证方式：打开开发者工具 → Elements 面板顶部看是否显示 “Rendered in Standards Mode”
- UTF-8 文件若带 BOM，也等效于开头多了一个不可见字符，建议用 VS Code 保存为 “UTF-8 without BOM”
lang 属性到底要不要写
要写，而且必须准确。屏幕阅读器靠它切换语音引擎，Google 用它判断页面语言归属，lang="zh" 和 lang="zh-CN" 在语义上不同——后者明确指向简体中文大陆规范，影响拼音输入法候选词、字体 fallback 顺序、甚至 spellcheck 行为。
- 错误示例：
（太宽泛，部分读屏软件不识别） - 正确写法：
或 - 动态站点注意：服务端渲染时需根据用户请求头
Accept-Language动态输出，不能硬编码
<meta charset="UTF-8"> 和 <meta name="viewport"> 的位置与必要性
这两个 <meta> 必须放在 内且尽可能靠前，尤其 charset 必须是 中第一个标签（除 <title></title> 外），否则浏览器可能已按默认编码（如 ISO-8859-1）解析了后续内容，造成中文乱码。
-
<meta charset="UTF-8">错位后果：标题里的中文显示为 ，但源码明明写了“你好” -
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失 → 移动端页面被强制缩放，文字小到无法阅读 - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，这是过时写法，已被charset属性取代
哪些标签可以省略而不影响结构合法性
HTML5 允许省略某些结束标签（如 、），但 和 的开始/结束标签绝不能省——即使浏览器能自动补全，手动省略会导致代码可维护性骤降，且和 Linter（如 ESLint + HTML plugin）、SSG（如 Astro、Hugo）模板解析逻辑冲突。
- 可安全省略的：
、、（仅限纯静态 HTML 文件） - 不建议省略的：所有
<title></title>、<meta charset>、<meta viewport>—— 它们是功能性刚需，不是装饰 - 真实陷阱：用 Pug/Jinja 模板时，若父模板没闭合
，子模板插入内容会跑到 DOM 树外，JS 查不到元素
真正容易被忽略的，是 <title></title> 标签的双重角色：它既是用户看到的标签页标题，也是搜索引擎结果页的第一行文案。空 <title></title> 或纯符号（如 <title>—</title>）会让页面在搜索中彻底消失，且无障碍检测工具（axe-core）会直接报严重错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
