HTML语义化标签不提升渲染速度，但打通人机交互链路：<nav>优化焦点管理与导航逻辑，<main>确保主体内容快速触达，<button>/<form>解决iOS延迟与键盘行为，<time datetime>触发iOS日历功能，语义结构须在DOM构建初期确立。
HTML语义化标签本身不改变页面渲染速度，也不直接解决缩放、横滚或布局错位等典型移动端适配问题；它的关键作用在于打通人机交互链路——让屏幕阅读器、浏览器原生表单行为、SSR 工具链和系统级功能（如 iOS 的「添加到日历」）能准确识别结构并触发对应逻辑。
为什么 <nav> 在底部菜单里不能用 <div class="bottom-nav"> 替代
移动端 WebView（尤其是微信内置浏览器、部分安卓定制内核）对 <nav> 有焦点管理优化：当用户用 TalkBack 或 VoiceOver 导航时，<nav> 可被一键跳入/跳过；而 <div class="bottom-nav"> 会被当作普通容器，必须逐个滑动才能触达每个链接，操作成本翻倍。更实际的是，某些安卓 WebView 会忽略未包裹在 <nav> 中的 <a href> 的导航语义，导致「返回上一页」逻辑失效。
- 必须确保所有主导航链接（非面包屑、非页脚友情链接）都包裹在同一个
<nav>内 - 不要给
<nav>加role="navigation"—— 它已自带该 role，重复声明反而干扰辅助工具 - 若需多个导航区（如顶部主导航 + 底部快捷导航），应使用多个
<nav>并通过aria-label区分，例如<nav aria-label="底部快捷导航">
<main> 漏写或重复出现时，VoiceOver 用户要多滑 12 秒才能读到正文
<main> 是唯一标识“主体内容起点”的标签。漏写时，VoiceOver 默认从 <header> 开始逐个朗读 logo、导航、搜索框、轮播图……直到人工滑动到第一个 <p> 才进入正文。实测平均延迟 10–12 秒。重复出现则会让辅助工具无法确定哪个是真正主体，部分 iOS Safari 版本会静默忽略后续的 <main>。
-
<main>必须且只能出现一次，且不应嵌套在<article>或<section>内部（除非该节段本身是独立可分发内容） - 不要用
<main>包裹整个页面（含 header/footer），它只应包裹真正需要被用户优先获取的核心内容区块 - SSR 框架如 Next.js 依赖
<main>判断首屏关键内容范围，漏写会导致 hydration 后的焦点管理异常
<button> 和 <form> 不是“看起来像就行”，而是绕过 iOS 300ms 延迟与键盘行为丢失的硬性要求
在 iOS Safari 中，非 <button> 元素（比如 <div onclick>）默认有 300ms 点击延迟，且无法响应 type="submit" 或唤起键盘「完成」按钮。用 <form> 包裹输入框，才能让回车键提交、autofill 自动关联字段、系统键盘显示「前往」「搜索」等上下文按钮。
立即学习“前端免费学习笔记（深入）”；
- 所有可点击交互元素，只要触发 JS 行为，优先用
<button type="button">，而非<div role="button"> -
<form>必须包含至少一个<input>或<textarea>，否则部分安卓 WebView 会忽略其语义，导致 submit 事件不触发 - 避免在
<form>外部用 JS 模拟 submit 行为——这会切断 autofill、密码管理器和系统级输入法联动
<time datetime="2026-08-25"> 缺少 datetime 属性，iOS 就不会显示「添加到日历」快捷操作
iOS Safari 对 <time> 的支持高度依赖 datetime 属性的格式合规性。仅写 <time>今天</time>，系统完全无法解析时间值；必须提供 ISO 8601 格式（如 2026-08-25 或 2026-08-25T14:30），才能触发右键菜单中的「添加到日历」选项。这个细节在 H5 活动页、预约类页面中极易被忽略。
-
datetime值必须是机器可解析的，不能是中文（如「8月25日」）或相对时间（如「3天后」） - 若时间动态生成，务必在 JS 渲染前就注入合法
datetime，服务端渲染（SSR）阶段就要处理好 - Android TalkBack 不支持该特性，但 iOS 占比高，且该操作是用户高频刚需，值得单独保障
最容易被忽略的不是“该用什么标签”，而是“什么时候用”——语义结构必须在 DOM 构建第一刻就确立，而不是等样式写完再补标签。一个卡片组件，开头就该是 <article>，而不是先写 <div class="card"> 再回头改。
