HTML5 新特性与文档模式
HTML5 相对 HTML4.x 新增了一大批能力：语义标签（header/nav/article/section/footer）、表单增强（type="email" 内置校验、placeholder、required）、多媒体（audio/video 原生播放）、绘图（canvas、SVG 内联）、本地存储（localStorage/sessionStorage）、地理定位与拖放。
面试常被追问两个细节：一是“空（void）元素”有哪些 —— img、br、hr、input、meta、link、source 等没有闭合标签的元素；二是 DOCTYPE 的作用 —— 声明触发标准模式（standards mode），不写则进入怪异模式（quirks mode），盒模型与表格渲染都会走 IE 老逻辑。
- HTML5 = 语义标签 + 表单校验 + 音视频 + canvas + 本地存储的一揽子增强
- 空元素：img / br / hr / input / meta / link 等无闭合标签
- 是标准模式的开关，不写会回落到怪异模式
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- HTML5 表单：内置校验，无需 JS --> </head> <body> <form> <input type="email" placeholder="邮箱" required> <input type="number" min="0" max="100" placeholder="分数"> <input type="date"> <button type="submit">提交</button> </form> <!-- 原生音视频：不再依赖 Flash 插件 --> <video src="demo.mp4" controls width="480"></video> <!-- canvas：JS 绘图的画布 --> <canvas id="cv" width="200" height="100"></canvas> <script> var ctx = document.getElementById('cv').getContext('2d'); ctx.fillStyle = '#f0c33c'; ctx.fillRect(10, 10, 120, 60); </script> </body> </html>
本节要点HTML5 的关键词是“原生能力”：表单校验、音视频、canvas、存储都不再依赖插件；DOCTYPE 是标准模式的开关。
