HTML 开发避坑指南
本技能聚焦于现代 Web 开发中高频出现却常被忽视的 HTML 细节问题，涵盖布局稳定性、表单交互、无障碍访问、安全链接及 SEO 优化五大维度。
核心用法
- 布局稳定性：强制为
<img>设置width/height属性，即使配合 CSS 也能让浏览器提前预留空间；使用aspect-ratio作为响应式后备方案。 - 表单精细化：
autocomplete应使用具体值（如email、new-password）而非简单的on/off；单选/复选框组必须用<fieldset>+<legend>包裹；利用inputmode和enterkeyhint优化移动端输入体验。 - 无障碍修复：跳转链接须为首个可聚焦元素；表格表头需显式声明
scope；装饰性图标用aria-hidden，布局表格用role="presentation"。 - 链接安全：
target="_blank"必须搭配rel="noopener noreferrer"；用户生成内容链接需标记rel="nofollow ugc"。 - SEO 基础：每页设置自引用
<link rel="canonical">；社交图片og:image必须使用绝对 URL；twitter:card值严格限定于枚举选项。
显著优点
- 覆盖 WCAG 无障碍标准的关键实现点
- 兼顾性能（CLS 优化）与安全（Tabnabbing 防护）
- 原生 HTML5 特性优先，减少 JavaScript 依赖
潜在局限
- 部分
autocomplete值浏览器支持不一致 enterkeyhint在 iOS/Android 表现存在差异- 未涉及复杂 ARIA 模式（如 tabs、tree）
适合人群
前端开发者、全栈工程师、关注 Core Web Vitals 与可访问性合规的技术团队。
常规风险
- 过度使用
aria-hidden可能误隐藏交互元素 rel="noopener"遗漏将导致window.opener安全漏洞- 表单自动填充与虚拟键盘提示需充分测试真机环境