DOCTYPE必须顶格首行且无任何前置字符，否则IE等旧浏览器强制进入怪异模式，导致box-sizing失效、sticky不工作、Flex错乱；lang属性须精确为zh-CN，charset须在1024字节内紧贴head开头。
DOCTYPE 必须顶格首行且无任何前置字符
浏览器一读到非空白字符就决定解析模式。如果 <!DOCTYPE html> 前有 BOM、空行、注释或 PHP 输出，IE 和部分旧内核会强制进入怪异模式（document.compatMode === "BackCompat"），导致 box-sizing 失效、position: sticky 不工作、Flex 布局错乱——这些不是“偶尔出问题”，而是必然发生。
-
<!-- 注释 --><!DOCTYPE html>❌ -
<?php echo '<!DOCTYPE html>'; ?>❌ -
<!doctype html>或<!DOCTYPE HTML>❌（大小写/空格不合规，CI 流程可能阻断部署） - VS Code 默认模板可靠，但手动保存时务必选 “UTF-8 without BOM” ✅
lang 属性必须精确且不可省略
lang 不是装饰属性，它直接影响屏幕阅读器发音、拼写检查器词库匹配、Google 搜索结果语言标注。写错等于主动放弃无障碍和 SEO。
-
<html lang="zh-CN">✅（大陆简体，BCP 47 合规） -
<html lang="zh">❌（语音引擎可能用台湾腔或日语逻辑读拼音） -
<html lang="cn">或<html lang="ch">❌（IANA 未注册，等价于未声明） - 局部切换语言用
<p lang="en">API response</p>，不要滥用xml:lang - SSR 场景下，服务端输出的
lang值必须与前端 hydration 一致，否则 React/Vue 报 DOM 差异错误
meta charset 必须紧贴 开头且在 1024 字节内
浏览器只扫描 <head> 前 1024 字节来确定字符集。一旦错过这个窗口，中文、emoji 一出现就是乱码，刷新也救不回来。
- 正确顺序：
<meta charset="UTF-8">→<meta name="viewport">→<title> -
<meta charset="utf8">❌（缺横杠，部分浏览器忽略） -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">❌（HTML5 中冗余，Chrome 120+ 已忽略） - 禁止把
<script>或注释放在<meta charset>之前
main 标签的硬性约束常被误用
<main> 不是 <div class="main"> 的语义替代品，它是键盘用户跳转主要内容区的唯一锚点。违反规则会导致辅助技术完全绕过核心内容。
立即学习“前端免费学习笔记（深入）”；
- 整个文档中只能出现一次 ✅
- 不能嵌套在
<header>、<footer>、<nav>或<section>内 ❌ - 不能与
<article>混用：<main>是页面级主体，<article>是可独立分发的内容单元（如一篇博客） - 验证手段：W3C Validator（validator.w3.org）会明确报出
main嵌套违规，别只靠肉眼检查
实际项目里最容易被忽略的，是 <DOCTYPE html> 和 lang 的组合效应：一个管解析模式，一个管内容解释方式。两者同时缺失，连 document.title 都可能读不准。
