doctype声明必须为首行且唯一，否则触发怪异模式；lang属性和charset meta缺一不可，需设为zh-cn和utf-8并置于head最前；viewport meta须写width=device-width, initial-scale=1.0；语义化标签如main、nav、section须严格遵循规范。
DOCTYPE 声明必须是第一行且仅此一行
浏览器靠它切换到标准模式，缺了或写错（比如多空格、带注释、放在 后面）就会触发怪异模式，盒模型、getBoundingClientRect() 返回值、甚至 font-size 解析都可能出偏差。
是唯一被现代浏览器认可的 HTML5 声明，大小写不敏感但建议小写- 不要加任何前缀或后缀，比如
属于过时写法 - 确保该行前面没有任何字符（包括 BOM、空格、换行），否则部分旧版 Safari 或 IE 会静默降级
lang 属性和 charset meta 缺一不可
没设 lang，屏幕阅读器无法正确朗读语言变体（如中文简繁混排时读音错乱）；没设 <meta charset="UTF-8">，非 ASCII 字符（中文、emoji、特殊符号）在某些服务器配置下会变成 。
-
比lang="zh"更精确，利于搜索引擎区分区域版本 -
<meta charset="UTF-8">必须出现在最前面，越早声明越好——晚于其他<meta>或<title></title>可能导致部分浏览器解析错乱 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，冗余且兼容性不如前者
viewport meta 决定响应式是否真正生效
很多页面写了媒体查询却依然在手机上显示缩放后的小字，问题往往出在这里。没有这个标签，移动端浏览器默认按 980px 宽度渲染，再缩放适配，100vw、rem 基准、触摸事件坐标全都会偏移。
- 标准写法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免加
user-scalable=no——它破坏可访问性，且 iOS 10+ 已限制其效果 - 不要写成
content="width=375"这类固定值，设备宽度是动态的，硬编码会导致横屏失效
语义化结构不是“锦上添花”，而是 DOM 渲染路径的关键变量
浏览器解析 HTML 时，对 <header></header>、<nav></nav>、<main></main> 等元素有原生优化：它们会提前建立导航上下文、影响 document.querySelector('main') 的查找效率、甚至改变辅助技术遍历顺序。用一堆 <div class="header"> 不仅增加 JS 查询开销，还会让 Lighthouse 的“结构化标记”审计直接扣分。
<ul>
<li>
<code><main></main> 在整个文档中只能出现一次，且不应嵌套在 <article></article> 或 <section></section> 内部
<nav></nav> 应包裹真正用于页面跳转的链接，面包屑、页脚链接不属于它<section></section> 无标题——规范要求每个 <section></section> 至少含一个 <h2></h2> 到 <h6></h6>，否则语义断裂<meta charset> 的位置和 <main></main> 的唯一性约束——它们不报错，但会在 SEO 抓取、无障碍测试、甚至某些 SSR 框架 hydration 阶段引发隐性故障。
