HTML5是现代网页开发的事实标准，提供语义化标签、原生音视频支持、增强表单控件及localStorage/sessionStorage等能力，需关注兼容性、降级策略与浏览器特性差异。
HTML5 不是“另一个 HTML”，而是现代网页开发的事实标准——它把过去靠插件、hack、polyfill 才能做的事，变成了浏览器原生支持的能力。你不用再纠结“要不要上 HTML5”，而是该考虑“哪些旧写法可以安全替换了”。
语义化标签直接替代 div+class 布局
旧版 HTML 用 <div id="header"> 或 <div class="nav"> 模拟结构，机器无法识别含义；HTML5 提供了明确语义的原生标签，搜索引擎、屏幕阅读器和开发者都能立刻理解内容角色。
-
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>是最常用的一组，覆盖 90% 页面结构需求 - 别嵌套错：
<header>可以出现在<article>内部，但<main>全页只能有一个，且不能嵌在<article>或<section>里 - 兼容性无压力：IE9+ 原生支持这些标签，IE8 及以下需加载
html5shiv.js（仅需 script 标签引入，无需改 HTML）
video/audio 不再依赖 Flash，但格式和 fallback 得手动管
以前写视频得埋一段 Flash 的 object/embed，现在一行 <video> 就能播，但浏览器对编码格式的支持并不统一——这恰恰是上线后最容易出问题的地方。
- MP4（H.264 + AAC）兼容性最好，几乎所有现代浏览器都支持；WebM（VP8/VP9 + Vorbis/Opus）开源友好，Chrome/Firefox/Safari（17+）也支持；但 Safari 仍不支持 AV1 视频
- 必须用
<source>多格式兜底，不能只写一个src属性 - 务必写 fallback 文本，否则老浏览器或禁 JS 环境会留白
<video controls width="640" height="360"> <source src="demo.mp4" type="video/mp4"> <source src="demo.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
表单控件升级不是“多几个 type”，而是触发系统级交互
<input type="date"> 在 iOS 和 Android 上会唤起原生日期选择器，type="email" 在移动端自动切换为带 @ 符号的键盘——这些不是 CSS 效果，是浏览器主动适配设备能力的结果。
立即学习“前端免费学习笔记（深入）”；
- 验证逻辑部分由浏览器接管：
required、pattern、min/max都能触发:valid/:invalid伪类，但 JS 中仍要用checkValidity()主动校验 - 不要假设所有浏览器都渲染同一种 UI：Firefox 的
type="range"默认无刻度，Chrome 有；Safari 的type="color"选色器样式与其他浏览器差异明显 -
type="number"并不阻止用户输入字母（只是限制提交），真正要过滤得靠input事件 +setSelectionRange控制光标
localStorage/sessionStorage 替代 cookie，但容量和作用域规则完全不同
Cookie 是为 HTTP 请求设计的，每次发请求都会带上；而 localStorage 是纯前端存储，容量更大（通常 5–10MB）、无网络开销，但也不随请求发送到服务端。
- 同源策略严格：协议、域名、端口三者完全一致才可读写；
http://a.com和https://a.com是两个独立存储空间 - 数据是字符串：存对象必须
JSON.stringify()，取出来要JSON.parse()；直接赋值非字符串会隐式转成字符串（比如localStorage.x = true存进去其实是"true"） - 没有过期机制：
localStorage永久存在（除非手动清除或用户清缓存），sessionStorage关闭标签页即销毁——别把它当临时 session 用，它和服务器 session 完全无关
真正难的不是“HTML5 有什么新标签”，而是判断某个特性在目标用户环境里是否可用、失效时有没有合理降级、以及 JS 和 DOM 如何配合这些新能力工作。比如 <canvas> 绘图再炫，若用户禁用 JS，整个区域就是空白——这时候你得决定：是加一张静态图 fallback？还是用 SVG 保底？还是干脆不显示？这种权衡，才是 HTML5 落地的核心。
