doctype必须首行首字符且全小写，lang须用bcp 47合规值如zh-cn，charset需紧贴第二行且文件无bom，三者错位将致怪异模式、乱码及辅助功能失效。
DOCTYPE、lang、charset 三者位置和写法错了，整个页面就掉进怪异模式或乱码深渊，不是样式不好看的问题，而是盒模型、Flex、甚至 JS 的 document.documentElement.lang 都会失效。
DOCTYPE 必须是文件第一行第一个字符
浏览器只认 ，且必须独占首行、全小写、前面零空格、零 BOM、零注释、零 PHP 输出。任何偏差都会触发怪异模式：<code>document.compatMode 返回 "BackCompat"，后果是 margin 折叠异常、display: flex 不生效、box-sizing 行为错乱。
- 禁止写成
<!-- 注释 --> 或 <code><?php echo '<!DOCTYPE html>'; ?> - 禁止大小写混用：
、<code> 全都不认 - 旧式 DTD 如
已被现代浏览器忽略，强制降级为怪异模式
lang 属性必须精确到区域变体
不是锦上添花，而是语音朗读、拼写检查、SEO 语言标注的硬性依据。设错或缺失，屏幕阅读器会用英文引擎念汉字拼音，Google 可能把你简体中文页标为“未知语言”。
- 禁用
lang="cn"、lang="ch"、lang="zh"—— 这些不是 BCP 47 合规值，浏览器解析时直接丢弃 - 大陆简体固定用
zh-CN，台湾繁体用zh-TW，香港用zh-HK - 局部切换语言可用
<p lang="en">Hello</p>，但不要在<main></main>内大面积混用
meta charset 必须紧贴
<meta charset="UTF-8"> 决定浏览器解码 HTML 的初始编码。它必须在 内最靠前的位置（通常第二行），且文件本身不能含 BOM —— 否则中文、emoji 一出现就是 ，后续再加 <meta> 也救不回来。
- VS Code 默认可能保存带 BOM 的 UTF-8，需手动关掉：“Save with Encoding” → “UTF-8”（非 “UTF-8 with BOM”）
- 禁止写成
<meta charset="utf8">（缺横杠）或<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 中冗余） - 它必须在所有 CSS/JS 引入之前，某些 Safari 版本遇到
<link rel="stylesheet">在它前面会直接中断解析
<main></main> 的嵌套和数量有硬性限制
<main></main> 不是语义化装饰，而是键盘用户按 Ctrl+Alt+Home 跳转主要内容的唯一锚点。违反规则会导致辅助技术完全跳过正文。
- 整个文档中只能出现一次
<main></main> - 不能嵌套在
<header></header>、<footer></footer>、<nav></nav>、<aside></aside>内部 - 禁止包裹在
<section></section>里：<section><main></main></section>会让<main></main>失效 - 它应直接包裹主体内容，且与
<article></article>、<section></section>分工明确：一个页面只有一个“主要内容区”，其余是独立模块或补充信息
最容易被忽略的是 BOM 和 lang 的合规性 —— 它们不会报错，但会在你调试 Flex 布局或接入语音朗读时突然爆发，而且排查路径极深。验证只需打开 validator.w3.org 粘贴代码，几秒就能定位这些“静默故障点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
