html5就是你已会的html，仅需声明即可启用现代解析模式；/语义化即用，表单验证需js增强，canvas绘图须设dom宽高，动画首选requestanimationframe。
HTML5 不是需要“入门教程”才能开始写的东西，它就是你已经在写的 HTML，只是换了个更宽松、更实用的规则集。
为什么 是唯一必须加的“HTML5 特征”
浏览器识别 HTML5，只看这一行。没有版本号，不区分大小写，也不依赖任何属性。旧页面加了它，立刻获得现代解析模式；新页面漏了它，可能触发怪异模式（quirks mode），导致盒模型、字体渲染全乱。
- 别写
—— 这是 HTML4 的，现在纯属冗余 - 别把
放在注释后面或空行之后 —— 必须是文档第一行，且前面不能有任何字符（包括 BOM） - 它不改变标签语法，但会影响
document.compatMode的返回值，间接影响 JS 获取元素尺寸的行为
<video></video> 和 <audio></audio> 标签根本不用等“教程”就能用
它们不是黑箱，而是语义化容器，播放控制靠原生属性和 JS API 驱动。没插件、不依赖 Flash，但格式兼容性得自己兜底。
- MP4（H.264 + AAC）在所有主流浏览器都支持，
<source></source>标签里优先放它 - WebM（VP8/VP9 + Vorbis/Opus）是开源首选，但 Safari 旧版不认，别单独只写 WebM
- 加
controls属性才显示默认控件；不加就得自己用play()、pause()、currentTime写逻辑 - 移动端 iOS Safari 默认禁止自动播放（含
autoplay），必须用户手势触发后才能调用play()
表单验证不是“加个 required 就完事”
HTML5 表单约束（required、type="email"、pattern）只做基础拦截，视觉反馈弱、错误信息不可控、无法覆盖业务逻辑。
立即学习“前端免费学习笔记（深入）”；
-
type="number"在部分安卓浏览器会唤起数字键盘，但输入字母不报错，只让valueAsNumber返回NaN -
pattern值必须是完整匹配（隐式带^...$），写pattern="[0-9]+"没用，得写pattern="[0-9]+"（实际有效，但容易误解）—— 更稳妥是用inputmode="numeric"配合 JS 校验 - 提交时触发验证，但
submit事件仍会执行；想拦截得用event.preventDefault()，再手动调checkValidity() - 样式上，
:valid/:invalid伪类在用户未交互前就生效，体验反直觉，建议结合:user-invalid（Chrome/Edge 支持）或 JS 添加 class 控制
Canvas 绘图卡住？大概率是忘了 getContext('2d') 或尺寸设错
<canvas></canvas> 是位图画布，本身不渲染内容，所有绘制都靠上下文对象。它的宽高必须用 DOM 属性（width/height），不能只靠 CSS。
- CSS 设置
width: 300px; height: 200px;只缩放画面，不改变分辨率 —— 会导致图像模糊或拉伸 - 正确做法：
canvas.width = 600; canvas.height = 400;，再用 CSS 控制显示尺寸，实现高清适配 -
getContext('2d')返回null的常见原因：canvas 元素还没插入 DOM、被 display:none 隐藏、或传了错误字符串如'webgl2'（应为'webgl'） - 动画循环别直接用
setTimeout，优先用requestAnimationFrame，否则帧率不稳、掉帧明显
真正卡住人的从来不是“怎么写 HTML5”，而是忽略浏览器实际行为差异、混淆 DOM 属性与 CSS 样式、把语义标签当功能组件用。写完多开几个浏览器点一点，比读十篇“入门教程”管用。
