HTML 是前端体验的底层骨架，语义化标签提升可访问性、SEO与性能；避免 div 套娃，善用 native 元素；优化 script/link 加载策略；表单、图片、媒体等均需按 HTML 原生能力精细控制。
HTML 本身不直接实现 UX 优化，但它是所有前端体验的底层骨架——错用标签、忽略语义、乱加 div 套娃，会立刻让可访问性、SEO、加载性能和交互逻辑掉坑里。
用对语义化标签代替 div + CSS 模拟
屏幕阅读器、搜索引擎、甚至浏览器内置的“阅读模式”都依赖 HTML 的语义。写 <div class="button"> 不如直接用 <button>；用 <div class="header"> 不如 <header>。
-
<nav>包围主导航，<main>标明主体内容，<aside>放侧边栏或相关链接——这些不是装饰，是结构信号 - 避免用
<span>或<div>模拟标题（如<div role="heading" aria-level="2">），优先用原生<h2>～<h6> - 表单控件必须配
<label for="id">，否则触屏点击区域小、语音助手无法关联
控制初始渲染阻塞：删掉没用的 script 和 link
HTML 解析时遇到 <script>（无 async 或 defer）会暂停 DOM 构建，用户看到白屏时间拉长；<link rel="stylesheet"> 也会阻塞渲染，尤其内联大量 CSS 或引用未压缩的第三方样式表。
- 第三方统计、埋点脚本一律加
async，且放在</body>前（不要放<head>里） - 关键 CSS 提取成
<style>内联在<head>，非关键 CSS 用media="print" onload="this.media='all'"异步加载 - 删除注释掉的
<script src="old-analytics.js">—— 它仍会被浏览器请求并解析失败，触发错误日志干扰调试
表单体验细节：从 input 类型到验证反馈
移动端软键盘类型、自动聚焦、输入提示、错误定位——全靠 HTML 属性驱动，JS 补救永远慢半拍。
立即学习“前端免费学习笔记（深入）”；
- 邮箱输错？用
<input type="email">，浏览器自动校验格式并唤起邮箱键盘 - 密码要显示明文？加
<input type="password" autocomplete="current-password">，配合<button type="button">切换type值，别自己监听 keydown 拦截 - 必填字段必须带
required，且用<input required aria-invalid="false">配合 JS 动态更新aria-invalid，否则屏幕阅读器读不出错误状态 - 提交失败后，焦点应自动回到第一个出错的
input，而不是让用户手动滚动查找
图片与媒体的懒加载和降级处理
一张未设 width/height 的 <img> 会导致页面重排；没写 alt 的图在加载失败时变成空白方块；<video> 缺少 preload="metadata" 会让首帧延迟明显。
- 所有
<img>必须带width和height属性（可为响应式值，如width="100%"），防止布局抖动 - 长列表图片统一加
loading="lazy"，但首屏关键图（如 banner）去掉该属性，避免被懒加载误伤 -
<img>的alt不是可选：纯装饰图写alt=""，内容图写准确描述（如alt="红底白字‘立即试用’按钮"），别写“图片”“图标”这种废话 -
<picture>+<source>做响应式图片时，<img>标签仍需保留，作为兜底
最常被忽略的其实是“HTML 变更后没测可访问性”——改完一个按钮从 div 换成 button，得真用 VoiceOver 或 NVDA 点一遍，看焦点是否自然、朗读是否准确。工具能扫出 70% 的问题，剩下 30% 得靠人眼+真实设备验证。
