必须顶格置于第一行，否则触发怪异模式，导致盒模型错乱、css解析异常、语义标签降级；它不是标签而是解析指令，大小写不敏感但须严格无前置字符。
DOCTYPE html 必须在第一行，lang 属性不能漏，charset 和 viewport 缺一不可——否则页面在手机上会缩成一团，中文乱码，甚至被搜索引擎降权。
为什么 !DOCTYPE html 不能写错或省略
它不是标签，而是文档类型声明。浏览器靠它决定用「标准模式」还是「怪异模式」渲染。写成 （小写）或 <code> 都可以，但一旦写成 <code>..>（XHTML 风格），现代浏览器虽能兼容，但会触发不必要的解析开销；更糟的是漏掉它，IE 和部分旧版 Edge 直接退化为怪异模式，box-sizing、flex 行为全乱。
- 必须独占第一行，前面不能有空格、注释、BOM 字符
- 大小写不敏感，但统一用小写
更稳妥 - 不要加任何引号、分号或多余空格，例如
>是无效的
lang 属性到底该设成什么
它影响屏幕阅读器发音、搜索引擎语言识别、浏览器内置翻译触发逻辑。设成 lang="zh" 或 lang="zh-CN" 都合法，但推荐 lang="zh-CN"：前者只声明“中文”，后者明确“简体中文（中国大陆）”，对拼音输入法、字体回退、SEO 地域权重都有细微但实际的影响。
- 如果页面含繁体内容（如台湾用户访问），应动态切换为
lang="zh-TW" - 嵌套内容语言不同需单独标注，比如英文引用段落加
<blockquote lang="en"></blockquote> - 没写
lang不报错，但 WCAG 无障碍检查会标为「中风险」
meta charset 和 meta viewport 的顺序与写法
这两个 meta 必须放在 最前面，且 charset 要在 viewport 之前——因为浏览器解析到 charset 才知道怎么解码后续内容；如果 viewport 写在前面，而页面含中文，可能刚读几字就因编码未定导致乱码闪现。
-
<meta charset="UTF-8">是唯一被广泛支持的写法，utf8、utf-8（带横线）都无效 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">中width=device-width是核心，缺了它移动端默认按 980px 渲染，文字小得看不清 - 不需要加
user-scalable=no——除非你真在做 kiosk 设备应用，否则禁缩放违反无障碍规范
要不要加 http-equiv="X-UA-Compatible"
2026 年已完全不用。这个 meta 是给 IE 时代的兼容性补丁，现代 Edge（Chromium 内核）、Chrome、Firefox、Safari 全部忽略它。加上去只会让 HTML 多 56 字节，还可能误导新人以为它仍有作用。
- 如果你维护老项目且仍需支持 IE11，才保留这一行；新项目直接删
- 同理，
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">是 XHTML 遗留写法，和<meta charset="UTF-8">功能重复，选其一即可，优先用后者 - 模板里若看到
html:5或html:xt快捷生成，注意区分：VS Code / WebStorm 的html:5输出的是现代精简结构，html:xt生成的是 XHTML 1.0 过时模板，别混用
真正容易被忽略的，是 lang 属性的动态一致性——比如页面主体是中文，但通过 JS 加载的评论模块返回英文数据，却没给容器补 lang="en"，会导致语音朗读错乱；还有 charset 声明位置偏移一两个标签，就足以让某些低配安卓 WebView 解析出半个乱码页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
