html5项目经验怎么写_html5项目经验描述【攻略】

html5项目经验需聚焦真实问题：如用+srcset实现多分辨率图片适配，设viewport解决ios双击缩放并权衡可访问性，service worker+cache api实现离线策略，canvas/web audio性能优化及兼容性取舍。

html5 项目经验不是罗列“用过 HTML5”，而是得让人一眼看出你解决过什么具体问题、踩过哪些坑、怎么权衡的。

怎么写“用 HTML5 做了响应式页面”才不空洞

面试官看到“使用 HTML5 开发响应式网站”这种描述，基本等于没写。关键是你用了哪些 HTML5 特性来支撑响应式，而不是靠纯 CSS 媒体查询硬撑。

• 明确写出你用 <picture></picture> + srcset + sizes 处理多分辨率图片，而不是只写“适配移动端”
• 如果用了 viewport meta 标签，要说明为什么设 width=device-width, initial-scale=1.0，而不是默认值；有没有在 iOS safari 上遇到双击缩放失效，怎么加 user-scalable=no（并意识到它影响可访问性）
• 是否用 flexbox 或 grid 布局替代了 Float / table，但注意：CSS 是 CSS，HTML5 是 HTML5 —— 别把 css3 功能混进 HTML5 经验里

写“支持离线功能”必须带上 Service Worker 和缓存策略

光写“实现 PWA”没意义。HTML5 本身不提供离线能力，真正起作用的是 Service Worker + Cache API + manifest.json 这套组合。不提这些，就是没落地。

• 写清楚缓存了哪些资源：是只缓存 index.html 和静态 JS/CSS，还是连 API 响应也做了 stale-while-revalidate？
• 有没有处理 fetch 事件失败后 fallback 到缓存页？比如用户断网时展示 /offline.html
• navigator.onLine 不可靠 —— 它只反映网络接口状态，不是真实连通性。别把它当离线判断唯一依据

涉及 Canvas 或 Web Audio 的经验，必须写清渲染/音频链路瓶颈

写“用 canvas 实现图表动画”或“用 Web Audio API 做音效合成”，容易变成名词堆砌。真实项目里，卡顿、音频延迟、内存泄漏才是重点。

立即学习“前端免费学习笔记（深入）”；

• Canvas：是否用 requestAnimationFrame 控制帧率？有没有做 canvas 尺寸缩放适配（devicePixelRatio 导致模糊）？清除画布是用 clearRect() 还是重置 width/height（后者会清空所有状态）？
• Web Audio：是否复用 AudioContext？有没有在 iOS Safari 上遇到首次触摸才能启动 audio 的限制？用 GainNode 控制音量时，是否避免直接赋值导致爆音（要用 setValueAtTime + exponentialRampToValueAtTime）？

HTML5 的边界很清晰：语义化标签、表单增强（input type="date"）、本地存储（localStorage / indexedDB）、多媒体原生支持（video / audio）、Canvas、Web Workers……写经验时，每个点都要锚定到一个真实问题，而不是特性列表。最常被忽略的是兼容性取舍 —— 比如为了支持 IE11 而放弃 fetch 改用 XMLHttpRequest，这个决策过程比“用了 fetch”重要得多。