HTML5新特性全解析与应用技巧

本文深入剖析了HTML5在实际开发中四大高频踩坑场景：Canvas绘图必须调用beginPath()避免路径累积和移动端锯齿问题；fetch发送POST请求时Content-Type的精准配置（JSON需手动设、表单由浏览器自动处理、文件上传禁设）；localStorage存储对象时因循环引用导致的序列化崩溃及安全替代方案；以及Flex布局中flex:1在旧版Safari中的兼容性陷阱与显式写法建议。更关键的是点明了两个极易被忽视却最耗调试时间的“静默杀手”——fetch未捕获异常导致请求失败无提示，以及localStorage残留调试数据悄然耗尽存储配额，直击真实项目中的痛点与盲区。

HTML5 的 怎么画一条线？别漏掉 beginPath()

不调用 beginPath()，多次绘图会累积路径，导致意外重绘或性能下降。比如连续两次 stroke()，第二次会把第一次的线再描一遍。

• 必须先 ctx.beginPath()，再 ctx.moveTo() 和 ctx.lineTo()
• ctx.stroke() 只描当前路径，不自动清空；下次绘图前不 beginPath()，旧路径还在
• 移动端 Safari 对未闭合路径的抗锯齿处理较弱，线条边缘容易发虚，加 ctx.lineCap = 'round' 有改善

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath(); // 关键！
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();

用 fetch() 发 POST 请求，Content-Type 设错就 400

后端（尤其 Express、Django、Spring Boot）默认只解析 application/json 或 application/x-www-form-urlencoded，其他类型直接拒收。

• 传 JSON：必须设 headers: { 'Content-Type': 'application/json' }，且 body: JSON.stringify(data)
• 传表单数据：用 new URLSearchParams(formObj)，Content-Type 由浏览器自动设为 application/x-www-form-urlencoded，别手动覆盖
• 上传文件用 FormData，此时不能设 Content-Type —— 浏览器要自动生成带 boundary 的 multipart 类型，手动设反而会破坏格式

localStorage 存对象报错 TypeError: Converting circular structure to JSON

因为 localStorage.setItem() 只接受字符串，而 JSON.stringify() 遇到循环引用（比如 DOM 元素、函数、互相引用的对象）就会崩。

• 常见踩坑：直接存 localStorage.setItem('user', userObj)，其中 userObj 含 ref 或 __proto__
• 安全做法：只存明确字段，如 localStorage.setItem('user', JSON.stringify({ id: u.id, name: u.name }))
• 调试时可用 console.log(JSON.stringify(obj, null, 2)) 快速暴露循环引用点
• 需要存复杂状态？换 sessionStorage 不解决根本问题，考虑用 structuredClone()（Chrome 98+）配合内存缓存，而非硬塞 localStorage

Flex 布局中 flex: 1 在 Safari 15.6 之前不支持缩写语法

老版 Safari 把 flex: 1 解析成 flex: 1 1 0%，但实际行为是等同于 flex: 1 1 0px，导致内容溢出或高度塌陷。

• 兼容写法：显式写全 flex: 1 1 0px 或 flex: 1 1 auto
• 如果子项含图片或文字，0% 在某些 Safari 版本下会误判为不可伸缩，0px 更稳
• 现代项目若已放弃 Safari ≤15.6，可放心用 flex: 1，但 CI 中的 E2E 测试仍可能跑在旧 WebKit 环境里，别只信本地 Chrome

今天关于《HTML5新特性全解析与应用技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！