HTML5是HTML的升级版，直接写即入门；无需先学HTML4，浏览器默认按HTML5解析；漏写该声明会导致怪异模式、语义标签失效等问题。
HTML5 不是新语言，是 HTML 的升级版，直接写 就算入门
很多人卡在“学 html5 要不要先学 html4”，其实不用。html5 从 2014 年起就是 w3c 正式标准，浏览器默认按 html5 解析——只要你用 开头，后面写的 <code><div>、<code><p></p>、<section></section> 全都按 html5 规则处理。
常见错误现象：Uncaught SyntaxError: Unexpected token 或页面空白，往往是因为漏了 <code>，导致浏览器进 quirks mode（怪异模式），连基本语义标签都识别不了。
- 新建文件就写这行开头，别写
这类老声明 -
的lang属性现在是强推荐，影响屏幕阅读器和 SEO，不是可选项 - 别试图“只学 HTML5 新标签”，像
<article></article>、<nav></nav>这些没语义基础（比如不懂块级/行内区别）反而更难理解
用 input 类型和 required 属性就能做基础表单验证，不用 JS
新手常以为“HTML5 表单”等于“必须写一堆 JS”，其实原生支持已足够应付登录、注册、联系方式等大多数场景。
使用场景：用户填邮箱、手机号、日期、数字范围时，浏览器会自动校验格式并弹出提示（无需监听 submit 事件）。
-
<input type="email" required>比type="text"+ 正则判断快且可靠，移动端还会调起对应键盘 -
min/max对type="number"或"date"有效，但对type="text"完全无效 -
required只检查是否为空，不校验内容逻辑（比如邮箱格式合法但不存在），别指望它替代后端验证 - 样式上，
:valid和:invalid伪类可直接写 CSS，但 Safari 旧版本对:invalid的触发时机有延迟
Canvas 绘图前必须确认 getContext("2d") 返回值不为 null
很多教程直接写 const ctx = canvas.getContext("2d"); ctx.fillRect(...)，但实际项目里一旦 canvas 元素未正确挂载或尺寸为 0，getContext 就返回 null，后续调用直接报 TypeError: Cannot read property 'fillRect' of null。
立即学习“前端免费学习笔记（深入）”；
性能影响：getContext("2d") 是重量级操作，反复调用（比如在动画循环里）会明显掉帧；getContext("webgl") 更耗资源，且部分低端安卓机不支持。
- 务必加判空：
if (!ctx) return;或抛错提示环境不支持 - canvas 宽高必须用
canvas.width/canvas.height设置，CSS 缩放会导致图像模糊，且绘图坐标系不变 - 不需要动画时，避免用
requestAnimationFrame循环获取 context，一次取完复用即可
本地开发别依赖 file:// 协议跑 HTML5 API
很多功能在双击打开 HTML 文件时看似正常，一上线就失效——根本原因是现代浏览器对 file:// 协议做了严格限制：
-
localStorage、indexedDB在 Chrome/Firefox 下多数可用，但 Safari 完全禁用（除非手动开启开发者选项） -
navigator.geolocation、MediaDevices.getUserMedia()（摄像头/麦克风）强制要求 HTTPS 或localhost -
fetch()加载本地 JSON 文件会触发 CORS 错误，报Access to script at 'file:///...' from origin 'null' is blocked
解决方法很简单：开个最小本地服务。Python 用户用 python3 -m http.server 8000，Node 用户装 http-server，VS Code 装 Live Server 插件——只要地址是 http://localhost:xxx，95% 的 HTML5 API 就能照常工作。
容易被忽略的地方：手机真机调试时，用 USB 连接电脑后访问 http://192.168.x.x:8000 才算“同源”，直接扫二维码打开 file:// 链接依然受限。
