移动端HTML必须用header、nav、main、section、footer语义化标签划分区块，main唯一且为body直系子元素；nav内用ul/li；aside小屏应折叠；属性按id→class→data-→aria-→src/href顺序书写，超3属性需换行；img/input须自闭合并带alt；viewport必须置于head最前。
移动端HTML结构必须用语义化标签切分区块
移动端屏幕窄、交互频繁，靠一堆 div 堆叠会导致结构模糊、可访问性差、响应式调试困难。必须用 header、nav、main、section、footer 明确划分逻辑区域。
常见错误：把整个页面写成三层 div 套嵌，结果在 320px 宽度下无法快速定位哪个区块负责导航、哪个是主内容流；更糟的是，屏幕阅读器会完全丢失上下文。
-
nav内部建议用ul/li，别用div+span模拟菜单 -
main必须且只能出现一次，不能嵌套在article或section外层再包一层div - 避免
aside在移动端硬塞侧边栏——它默认是“辅助内容”，小屏应折叠或移至底部
属性顺序和换行要适配移动端调试习惯
移动端开发常需在真机 + DevTools 双端反复验证，DOM 层级深、属性多时，混乱的书写会让 Elements 面板一眼看不出关键信息。
比如你查一个按钮为什么没响应点击，得先扫 class 看有没有 disabled，再看 data-action 是否正确，最后确认 onclick 或事件绑定是否遗漏——属性乱序会拖慢这个过程。
立即学习“前端免费学习笔记（深入）”；
- 强制按顺序书写：
id→class→data-*→aria-*→src/href→ 其他 - 单个标签超 3 个属性，就每个属性独占一行（尤其含
data-和aria-的） -
class值别堆成一长串，用换行或空格分隔语义组，例如：class="btn btn--primary js-modal-trigger"比class="btn btn--primary modal-trigger active"更易扫读
自闭合标签必须带斜杠，且不省略 alt 和 viewport
部分 Android WebView 或旧版 iOS Safari 对无斜杠的 img、input 解析不稳定，尤其在动态插入 DOM 时可能丢节点；而漏掉 alt 不仅影响无障碍，还会让图片加载失败时页面塌陷——移动端网络波动大，这是高频问题。
-
<img src="icon.png" alt="返回首页" />而不是<img src="icon.png" alt="返回首页"> -
<input type="tel" id="phone" name="phone" required />，required是布尔属性，不写=true -
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且放在<head>最前，否则 iOS Safari 可能忽略缩放控制
空行与缩进不是“看着舒服”，而是为了快速定位渲染瓶颈
移动端性能敏感，DOM 过深或结构错位会直接拉高首屏时间。格式化时加空行、控缩进，本质是在为 Chrome DevTools 的 Layers 面板和 Rendering 调试做准备——你得一眼看出哪段 HTML 对应哪块渲染层。
比如一个轮播图组件，如果 section、ul、li 全挤在一行，你根本没法判断 transform: translateX() 是作用在 ul 还是外层容器上；而缩进混乱会让 will-change 或 contain 的生效范围难以对齐。
- 块级元素之间必须空一行，尤其是
header/main/footer三者之间 - 嵌套超过 4 层就该警觉：是不是该抽成 Web Component 或用
template分离？ - 缩进统一用 2 个空格（不是 Tab），VS Code 中设
"editor.insertSpaces": true避免混用
viewport 元素写在 <head> 第二行之后，或者在 img 标签里留空 alt 还标“待补充”——这些格式细节在桌面端可能无感，但在低端安卓机上，就是白屏几秒和正常加载的区别。 
