html5 web

HTML5 的落地效果，不取决于用了多少新标签，而取决于是否把语义、API、性能与安全串成可维护的工程实践。判断一个项目是否真正用好 HTML5，建议看四项标准：结构是否语义化、特性是否按需增强、性能预算是否可量化、安全与可访问性是否进入验收。

一、语义化结构：先让文档可读

适用场景：内容站点、后台系统、SEO 敏感页面。 执行步骤：

• 用 `header`、`nav`、`main`、`article`、`section`、`aside`、`footer` 划分骨架，每页只保留一个 `main`。
• 标题按 `h1` 到 `h6` 递进，不因字号需求跳级，样式交给 CSS。
• 列表、表格、按钮、表单控件优先使用原生元素，减少 `div` 模拟。

注意事项：`section` 适合有明确主题的区块，`div` 用于纯样式容器。语义化不会直接提升排名，但能降低维护和辅助技术适配成本。

二、表单与原生交互：优先使用浏览器能力

适用场景：登录、搜索、筛选、支付信息填写。 推荐做法：

• 使用 `type="email"`、`tel`、`url`、`number`、`date` 触发合适的软键盘与校验。
• 用 `required`、`pattern`、`min`、`max`、`step` 做第一层校验，复杂规则仍放服务端。
• 用 `details`、`summary`、`dialog`、`progress`、`meter` 替代部分自定义组件。

注意：原生校验提示样式有限。若需统一视觉，可用 `:invalid`、`:valid` 配合自定义提示，但要保留可读的错误文本。

三、多媒体与图形：按交付目标选择 API

适用场景：视频播放、图表、地图、游戏、数据可视化。 选择建议：

• 音视频：`video`、`audio` 配合 `source` 多格式回退，提供字幕 `track`，避免自动播放带声。
• 矢量图：图标、图表优先 SVG，便于缩放和 CSS 控制。
• 位图与逐帧：照片、纹理用 `img`、`picture`；像素操作、滤镜、游戏用 `canvas`。
• 高性能 3D：WebGL、WebGPU，注意降级与上下文丢失处理。

注意：`canvas` 内容对搜索引擎和读屏不友好，需提供替代文本或 DOM 回退。

四、存储与离线：先分清数据生命周期

适用场景：弱网、PWA、草稿保存、缓存加速。 技术选择：

• `localStorage`：小量键值对、用户偏好；同步 API，不存敏感信息。
• `sessionStorage`：会话级临时数据。
• `IndexedDB`：大量结构化数据、离线队列、文件 Blob。
• `Cache API` 与 Service Worker：缓存静态资源与请求，控制离线策略。

步骤：先定义缓存策略，再写代码；版本化缓存名，激活时清理旧缓存；动态接口可采用 network-first 或 stale-while-revalidate。注意 Service Worker 只在 HTTPS 或 localhost 生效，更新逻辑要处理。

五、性能与兼容：用特性检测替代 UA 判断

适用场景：多端适配、老浏览器、低端设备。 执行细节：

• 用 `@supports`、`typeof` 检测 API，而不是判断浏览器名称。
• 对不支持的特性提供渐进增强：基础 HTML 可用，增强层再加载。
• 图片使用 `srcset`、`sizes`、`loading="lazy"`、`decoding="async"`；视频用 `preload="metadata"`。
• 设置性能预算，将首屏 JS、LCP、CLS、INP 等指标纳入 CI。

注意：Web Components、WebGPU、文件系统访问等 API 兼容性差异仍存在，建议按目标浏览器矩阵决定是否使用。

六、安全与可访问性：把验收项前移

适用场景：所有面向用户的页面。 安全清单：

• 对用户内容转义，避免直接插入 `innerHTML`。
• 表单加 CSRF 防护；Cookie 设 `HttpOnly`、`Secure`、`SameSite`。
• 用 CSP 限制脚本来源。
• URL 参数、表单字段中的手机号、身份证、token 不进入前端日志或埋点。

可访问性清单：

• 图片有 `alt`，表单控件有 `label`，键盘可操作，焦点可见。
• 颜色对比度达到 WCAG 建议值。

这些不是 HTML5 独有，但 HTML5 的语义元素和 ARIA 能显著降低适配成本。 小结 HTML5 的价值在于用标准能力替换脆弱的自定义实现，同时保留降级路径。推荐您按“语义化结构、原生交互、存储离线、性能兼容、安全可访问”的顺序推进。每引入一个 API，先明确适用场景、兼容边界和回退方案。若团队刚起步，可先从语义化、表单校验、图片懒加载和 Service Worker 缓存四项入手；若已规模化，建议把性能预算、CSP 和无障碍检查纳入发布门禁。如有进一步需求，随时告诉我。