viewport meta标签必须放在<head>最前面且不可动态插入，否则移动端按980px渲染导致文字过小、点击错位、媒体查询失效；标准配置为content="width=device-width, initial-scale=1.0"。
viewport meta 标签必须放在 最前面，且不能动态插入
没它，所有响应式 CSS 都可能失效——移动端浏览器会按约 980px 宽度渲染，再整体缩放，导致文字小、点击错位、@media 不触发。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">要写在<head>里，且是<title>之前（越靠前越稳妥） - 不要用 JS 动态添加，部分 iOS Safari 和旧版安卓 WebView 不识别
- 若需兼容更严苛场景，可加
maximum-scale=1，但别写user-scalable=no——这会禁用双指缩放，违反 WCAG 可访问性要求
语义化 HTML5 标签不是“加分项”，而是响应式结构的前提
用 <header>、<nav>、<main>、<section>、<article>、<footer> 替代一堆 <div>，不是为了“好看”，而是让媒体查询和 Grid/Flex 布局有明确作用目标。
-
<main>是内容主容器，@media中重设宽度/显示隐藏时逻辑更干净；<nav>单独控制导航折叠比操作一堆 class 更可靠 - 避免在
<section>外层套<div class="wrapper">——这会打断 Grid 的grid-area或 Flex 的flex-direction继承链 - 屏幕阅读器和搜索引擎依赖这些标签判断结构层级，语义缺失会导致小屏下焦点流混乱或 SEO 权重稀释
DOCTYPE 和 charset 必须声明，且顺序不能错
没有 <!DOCTYPE html>，IE 和部分旧 WebView 会进入怪异模式（Quirks Mode），box-sizing: border-box、rem 计算、甚至 flex 行为都可能异常。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<!DOCTYPE html>必须是文档第一行，前面不能有任何空格、注释或 BOM 字符 -
<meta charset="UTF-8">要紧随其后放在<head>开头，否则中文、emoji 等可能乱码，影响content属性（如伪元素）渲染 - 别写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——冗余且不如charset属性解析稳定
HTML 结构里最容易被忽略的“响应式断点”其实是盒模型
再完美的 Grid 布局，如果没统一 box-sizing，padding 和 border 就会偷偷撑破容器——尤其在移动端窄屏下，1px 边框 + 1em padding 可能直接导致横向滚动条出现。
立即学习“前端免费学习笔记（深入）”；
- 全局重置建议写在
:root或html上：* { box-sizing: border-box; }（注意性能，生产环境可用*, *::before, *::after） - 别只给容器设
max-width，还要检查子元素是否意外设置了width: 100vw或固定px值——它们会在小屏上强行突破父级限制 - 表格、预格式化文本（
<pre>）、内联 SVG 等“硬块”内容，必须单独加overflow-x: auto包裹，否则永远无法真正响应
