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