DOCTYPE必须顶格写在第一行，否则浏览器触发怪异模式导致盒模型、flex、position:sticky等解析异常；需避免空格、BOM、注释前置，并用hex校验或CI脚本确保合规。
DOCTYPE 必须顶格写在第一行，且前面不能有空格或注释
浏览器看到开头不是 <!DOCTYPE html>，或者前面多了空格、BOM、注释，就会退回到怪异模式（Quirks Mode）。这时候 CSS 的盒模型、flex 行为、甚至 getBoundingClientRect() 返回值都可能出错。
常见错误现象：
- 本地开发看着正常，部署到 Nginx 后布局崩了
- VS Code 保存时自动加了 UTF-8 BOM，导致 IE/Safari 直接不渲染
<main> -
<!-- 注释 -->写在<!DOCTYPE html>前面，整个页面降级为怪异模式
实操建议：
- 用编辑器设置 “保存时移除 BOM”
- 检查文件开头：用 hex 编辑器或
head -c 10 index.html | xxd确认前几个字节是3c 21 44 4f 43 54 59 50 45（即<!DOCTYPE） - CI 流程里加一行校验：
grep -q '^<!DOCTYPE html>' index.html || exit 1
lang 属性必须匹配 IANA 语言子标签，不能写成 zh 或 cn
lang="zh" 看似简洁，但实际会导致屏幕阅读器发音不准、Google 搜索结果页显示“翻译此页”按钮、甚至某些 CDN 缓存策略误判内容区域。IANA 官方注册的中文子标签只有 zh-CN（简体）、zh-TW（繁体）、zh-HK 等，没有 zh 单独存在。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 面向大陆用户：固定用
lang="zh-CN" - 多语言站点：动态切换时，必须同步改
document.documentElement.lang，否则 JS 读取的lang和 HTML 实际值不一致 - SEO 工具（如 Screaming Frog）会直接报
lang值无效警告
容易踩的坑：
- 后端模板里硬编码
lang="{{ locale }}"，但locale可能是zh或zh_CN，没做标准化映射 - 用
document.querySelector('html').setAttribute('lang', 'zh')改值，但没触发辅助技术重读
charset 必须是 <head> 的第一个子元素，且位置不能超过前 1024 字节
浏览器解析 HTML 时，会在读取前 1024 字节内查找 <meta charset="UTF-8">。如果它被 <title>、<link> 或注释挡在后面，就可能按默认编码（如 ISO-8859-1）解码，造成中文乱码、CSS 文件路径解析失败、甚至 fetch() 请求头里的 Content-Type 被覆盖。
实操建议：
-
<meta charset="UTF-8">紧跟<head>标签后，不换行、不缩进 - 避免在
<head>里放任何非元数据内容（比如内联<script>初始化逻辑） - Webpack/Vite 构建时，确保 HTML 插件没把
<link rel="stylesheet">提前注入到<meta charset>前面
语义化标签嵌套不能违反规范，<main> 和 <section> 尤其敏感
<main> 是页面唯一主内容容器，规范明确要求“只能出现一次”，且不能嵌套在 <article>、<aside>、<footer>、<header>、<nav> 内；<section> 必须有标题（<h1>–<h6>），否则会被辅助技术忽略。
常见错误现象：
- 用
<section><main>.../section>导致 NVDA 朗读跳过整个<main> - 多个
<main>在同一页面，Chrome DevTools 的 Accessibility 面板直接标红 -
<section class="hero">...没配<h2>，VoiceOver 完全不识别该区块
实操建议：
- 用
document.querySelectorAll('main').length !== 1做自动化检测 - 组件库中封装
<Section>时，强制要求传入titleprop 并渲染为<h2> - 不要为了“结构好看”把
<main>当作通用容器——它不是<div role="main">
真正难的不是记住这些规则，而是让它们在多人协作、多框架混用、前后端分离的项目里持续生效。比如 Web Component 的 shadow DOM 里 lang 不继承、SSR 模板中 charset 插入位置被框架劫持、构建产物里 DOCTYPE 被压缩工具意外删掉 —— 这些才是日常要盯住的地方。
