HTML文档必须严格遵循结构规范：首行为无空格的，紧接带lang属性的标签，中须含charset、viewport和title，不可为空。
DOCTYPE 必须写在第一行，且不能少空格
浏览器靠 判断是否启用 HTML5 标准模式；如果漏掉、写错位置或中间多空格（比如写成 <code>），就会触发怪异模式（Quirks Mode），导致盒模型、字体渲染、Flex 布局等行为不一致。
常见错误现象：
- 明明写了
display: flex，子元素却不换行 -
margin: 0 auto居中失效 - 某些 CSS 单位（如
vh）计算值异常
实操建议：
- 用 VS Code 或其他编辑器新建文件后，第一行立刻敲入
，确认前后无空格、无 BOM 字符 - 大小写不敏感，但统一用小写，避免协作时风格混乱
- 不要加引号、分号、斜杠，也不要用自闭合写法（
>是错的）
html 标签必须紧跟 DOCTYPE，且推荐带 lang 属性
是文档唯一根元素，它必须紧接在 后面——中间不能有注释、空行或 JS 代码。缺少 <code>lang 不会报错，但会影响屏幕阅读器、SEO 和部分浏览器的字体回退逻辑。
使用场景：
- 中文页面写
，英文写 - 多语言站点可动态替换该属性值，无需改结构
注意点：
-
lang值需符合 BCP 47 标准，zh和zh-CN效果不同（后者更精确） - 不要写成
language="zh"或lang="chinese"—— 这些都不被识别
head 里至少要有 charset 和 title，viewport 不是可选的
现代 HTML 文档的 不再只是“可有可无的元数据容器”。<meta charset="UTF-8"> 决定整个页面的字符解码方式；没有它，中文可能显示为乱码；<title></title> 是 SEO 和浏览器标签页的必需字段；而 <meta name="viewport"> 直接影响移动端能否正常缩放。
参数差异：
-
charset必须写在最前面（早于任何<meta>或<link>），否则可能被忽略 -
viewport的initial-scale=1.0和width=device-width缺一不可；只写一个会导致 iOS Safari 横屏错位
示例最小合法 head：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
body 不能为空，但可以只含一个空 div
HTML5 规范允许 内容为空，但实际开发中，空 body 会让开发者误以为“还没写内容”，也容易在调试时漏掉 DOM 加载逻辑。更关键的是：某些老版本 WebView（如 Android 4.4 系统自带）遇到空 body 会拒绝渲染后续 JS。
实操建议：
- 哪怕只是临时占位，也写一行
<div id="app"></div>或<main></main> - 不要用注释代替内容（
<!-- placeholder -->不算有效内容） - 服务端渲染或框架初始化前，保持
至少有一个非空文本节点或元素
最容易被忽略的一点：所有这些结构要素（、<code>、、）必须严格嵌套、顺序固定，浏览器不会自动修复错位——它只会默默进入兼容模式，然后让你花半天时间排查布局 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
