HTML5是HTML的第五个正式版本，核心是将网页升级为应用平台；通过DOCTYPE声明可秒判版本，语义标签、原生多媒体、表单增强和本地存储是关键升级点。
看 DOCTYPE 就能 1 秒判断是不是 HTML5
这是最可靠、最不依赖 JS 或渲染结果的识别方式。
- 打开网页源码（右键 → “查看网页源代码”或
Ctrl+U），第一行就是答案 - 如果首行是
<!DOCTYPE html>→ 确认是 HTML5 - 如果首行是
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...>或带 XHTML URL 的长串 → 属于 HTML4/XHTML - 注意：哪怕页面用了
<video>或<canvas>，只要 DOCTYPE 不对，浏览器仍以“怪异模式”或“准标准模式”解析，语义标签可能降级为普通 div
语义化标签不是“写得好看”，而是影响 DOM 和 SEO 的硬规则
HTML4 全靠 <div class="header"> 这类组合模拟结构；HTML5 提供原生语义标签，浏览器和爬虫会按真实含义解析它们。
-
<header>、<nav>、<main>、<article>、<aside>、<footer>都是合法且有语义的 HTML5 标签 - 这些标签在 DOM 中会生成独立节点，可被
document.querySelector('header')直接命中，而<div class="header">只是普通容器 - 搜索引擎用它们理解内容层级；读屏软件靠它们组织导航逻辑；省略 class 名也不会丢失结构意图
- ⚠️ 坑点：不要嵌套错误，比如
<article><section><header></header></section></article>是合理结构，但<header><article></article></header>就违反语义（header 应属于其父级内容，而非包裹全文）
原生多媒体和 Canvas 不再是“插件方案”，而是 DOM 一等公民
HTML4 播视频要靠 <object> + Flash，现在这些标签直接进标准，属性即能力。
-
<video controls src="demo.mp4"></video>：一行启用播放控件，无需 JS 初始化 -
<audio preload="metadata">：预加载元数据（时长、封面），比整个文件快得多 -
<canvas id="chart" width="600" height="400"></canvas>后接getContext('2d')，就能逐像素绘图 —— 这在 HTML4 中根本不存在 - ⚠️ 坑点：
<video>默认静音且不自动播放（移动端强制策略），加muted autoplay才可能生效；Canvas 的宽高必须用标签属性设，CSS 缩放会导致模糊
表单增强和本地存储是“零成本升级点”，但容易被忽略
很多老项目还在用 JS 校验邮箱格式，其实 HTML5 已内置支持。
立即学习“前端免费学习笔记（深入）”；
-
<input type="email">触发原生键盘（iOS 邮箱专用）、提交前校验格式（非正则，是浏览器内置规则） -
<input type="date">在支持系统上唤起日期选择器，无需引入 moment.js 或日历组件 -
localStorage.setItem('token', 'abc123')可存 5–10MB 字符串，关页不丢，比 cookie 更安全、更持久 - ⚠️ 坑点：
required属性只对 submit 有效，不触发 blur 校验；localStorage存的是字符串，存对象必须JSON.stringify()，取出来记得JSON.parse()
<nav>”，而是**在旧项目里混用新旧模式却不自知**：比如 DOCTYPE 还是 HTML4，却强行用 <main>；或者写了 <video> 却没提供 <source> 备用格式，导致 Safari 下空白。区分版本不是为了贴标签，是为了让每个特性落在它该生效的环境里。 
