HTML响应式模板生效依赖语义化结构、正确viewport和媒体查询三者咬合；header、nav、main、section、aside、footer为骨架核心，viewport必须写在head中且内容为“width=device-width, initial-scale=1.0”，main只能出现一次，section须有标题，断点应基于内容而非设备尺寸硬编码。
直接说结论：HTML响应式模板不是靠“写对某个标签”生效的，而是靠语义化结构 + 正确的 viewport + 媒体查询触发点三者咬合。其中，header、nav、main、section、aside、footer 这六个标签是骨架核心，但写错嵌套或滥用 div 会直接让响应式逻辑失效。
viewport 必须写对，否则所有媒体查询都白搭
很多人在模板里写了 @media (max-width: 768px)，却在手机上依然横向滚动——八成是漏了或写错了 <meta name="viewport">。它不是可选项，是响应式启动开关。
- 必须放在
内，且优先级高于任何 CSS 或 JS - 标准写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止写成
content="width=1200"或漏掉initial-scale=1.0，否则 iOS Safari 会强制缩放，导致布局错位 - 如果用了 rem 布局，还要额外加
maximum-scale=1.0, user-scalable=no防止双击放大（仅限纯展示页）
语义化标签不能当 div 用，尤其注意 main 和 section 的边界
main 不是“主要内容容器”，它是页面唯一主内容区；section 不是“随便分块”，它必须有主题性。混淆这两者，会导致屏幕阅读器跳过关键内容，SEO 权重分散，甚至影响 CSS 的 :has() 选择器行为。
-
main在整个页面中只能出现一次，且不能嵌套在article、aside、footer等内部 -
section必须有标题（h1–h6），否则建议改用div—— 没标题的section是语义污染 -
aside是辅助内容，比如相关文章推荐、广告位；它和section不是并列关系，更不是“侧边栏 div”的替代品 - 导航一定要包在
nav里，且最好加上aria-label，如<nav aria-label="主导航"></nav>，否则 VoiceOver 无法识别导航意图
响应式断点要基于内容，不是设备尺寸硬编码
模板里常见的 @media (max-width: 768px) 很危险——它假设所有平板都是 768px 宽，但 iPad Pro 是 1024px，Surface Go 是 834px。真正在项目里起效的断点，得看内容何时“撑不开”。
立即学习“前端免费学习笔记（深入）”；
- 先写移动版（mobile-first），CSS 默认为小屏样式，再用
min-width向上增强 - 断点值应来自真实内容测试：比如一段三列卡片，在宽度 @media (min-width: 680px)，而不是凑整到 768
- 避免在 HTML 中写内联样式（如
style="display: none"），它会覆盖媒体查询，且无法被 JS 安全控制 - 图片务必用
srcset+sizes，而不是只靠max-width: 100%—— 后者不阻止大图下载，LCP 直接拉垮
最容易被忽略的一点：语义化不是“写对标签就完事”，而是整套 DOM 结构要经得起 document.querySelector('main > section:first-child h2') 这样的路径推演。一旦你发现需要靠 class 名才能定位主内容，说明语义结构已经塌方了。
