doctype必须首行无空格，lang值须为zh-cn或zh-tw，charset必须在head最顶部且早于title和viewport，viewport需含initial-scale=1.0，语义标签嵌套须合规，html结构要为主次内容预留可预测钩子。
DOCTYPE 必须写在第一行，lang 和 charset 位置不能错，否则响应式行为会从根上失效——不是样式没生效，而是浏览器压根没按你预期的方式解析文档。
DOCTYPE 和 lang 属性必须紧贴开头，中间不能插空行或注释
很多模板复制粘贴后在手机上布局错乱，查半天 CSS，结果是 前面多了个空格，或者 <code> 后面跟了个换行加注释。IE 和旧版 Safari 遇到这种写法会直接退到怪异模式，flex、grid、甚至 max-width 都可能被忽略。
-
lang值必须来自 IANA 注册表，中文只认zh-CN（简体）或zh-TW（繁体），写成zh或cn会让屏幕阅读器发音异常、翻译按钮灰掉 -
<meta charset="UTF-8">必须放在最顶部，早于<title></title>和任何<meta name="viewport">，否则前几个字节可能被误读为 ASCII，导致中文标题显示为乱码 - 注释里禁用连续两个短横：
<!-- 这里有个 -- -->会让浏览器认为注释提前结束，后续所有 HTML 变成纯文本渲染
viewport meta 标签缺一不可，且 content 值不能简写
只写 <meta name="viewport" content="width=device-width"> 是常见错误。它会让 iOS Safari 在横屏时把页面缩放成“全屏但内容极小”的状态，用户得双指放大才能看清文字。
- 完整写法必须是：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要加
user-scalable=no——它会禁用缩放，违反 WCAG 可访问性要求，iOS 系统级设置也会警告 - 不建议用
maximum-scale或minimum-scale，它们在 iOS 10+ 已被 Safari 忽略，徒增维护负担
语义标签不是装饰，嵌套规则直接影响响应式逻辑
用 <header></header> 包 <nav></nav> 没问题，但把 <main></main> 套进 <section></section> 里，或让 <footer></footer> 出现在 <main></main> 外部，会导致辅助工具跳过关键区域，CSS 的 @media 查询也可能因结构歧义而漏匹配。
-
<main></main>全局只能出现一次，且不能是<article></article>、<aside></aside>、<footer></footer>的子元素 -
<nav></nav>应该只包裹主导航链接；页脚里的“友情链接”用普通<ul></ul>更合适，强行套<nav></nav>会误导屏幕阅读器重复播报 -
<section></section>必须有显式<h2></h2>~<h6></h6>作为标题，否则它和<div> 无实质区别，JS 动态加载时容易丢失上下文<h3>响应式结构依赖 CSS，但 HTML 层要预留可预测的钩子</h3> <p>别指望光靠媒体查询就能救活一堆 <code><div class="col-4">。如果 HTML 本身没分清“主内容区”和“侧边栏”，<code>@media (max-width: 768px)里再怎么display: block也难保证阅读顺序正确。- 优先用
<main></main>+<aside></aside>明确主次，比用class="main-content"+class="sidebar"更可靠 - 避免
<div role="button"> 这类伪语义写法——真要交互，就用 <code><button></button>或带tabindex的<a></a>，否则键盘 Tab 浏览时焦点会跳空 - 图片必须带
alt，且不能为空字符串；<picture></picture>+srcset要配<img>的width/height属性，否则 SSR 渲染时会触发 FOIT（Flash of Invisible Text）
真正卡住响应式的，往往不是 media query 写得不够多，而是
开头那三行没对齐浏览器的解析预期——一个空格、一个错位的引号、一个非法 lang 值，都可能让整套响应式逻辑在源头失效。 - 优先用
