HTML5不是要“安装”的东西，它就是你写的
很多人搜“HTML5怎么用”，第一反应是去下载个软件或库——其实不用。HTML5 是浏览器原生支持的标记语言规范，只要你写一个以 开头的文件，用现代浏览器（Chrome/Firefox/Safari/Edge）打开，就自动在 HTML5 模式下运行了。
常见错误现象：document.querySelector 报错、localStorage 用不了、audio 标签不播放——往往不是 HTML5 本身的问题，而是文档类型没声明，或者浏览器加载的是本地 file:// 协议（部分 API 如 fetch 在该协议下被禁用）。
- 务必把第一行写成
，不能写成 <code>（大小写无所谓，但不能漏） - 开发时尽量通过本地服务器预览，比如用 VS Code 的 Live Server 插件，或命令行
npx http-server，避免file://带来的权限限制 - 不需要引入任何 JS 库、CDN 或“HTML5 shiv”来启用基础语义标签（如
<header></header>、<article></article>），IE9+ 都原生识别
语义化标签不是“加分项”，而是影响 DOM 结构和可访问性的硬规则
用 <div id="nav"> 还是 <code><nav></nav>？差别不在样式，而在浏览器如何理解这个区域：屏幕阅读器靠它导航，搜索引擎靠它判断内容权重，开发者工具里 DOM 树结构也更清晰。
使用场景：写导航栏、文章主体、侧边栏、页脚时，优先选 <nav></nav>、<main></main>、<aside></aside>、<footer></footer>，而不是堆 <div>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code><main></main> 页面中只能有一个，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部
<section></section> 必须有标题（<h1>–<h6></h6>
</h1>），否则语义弱于 <div>；它表达“有主题的分组”，不是通用容器<li>
<code><article></article> 可独立分发或复用（比如 RSS 订阅项），<section></section> 则属于当前文档上下文
input 类型升级后，表单验证和键盘适配直接生效
把 <input type="text"> 换成 <input type="email">，不只是加了个邮箱图标——移动端会自动调出带 @ 符号的键盘，浏览器也会在提交前做基础格式校验（无需 JS）。
性能 / 兼容性影响：所有现代浏览器都支持 type="email"、type="url"、type="number"、type="date" 等；老版本 IE（≤9）会降级为 type="text"，但不会报错，只是失去增强能力。
-
type="date"在 iOS Safari 和 Chrome Android 上唤起日期选择器，桌面端 Chrome 显示日历弹窗，Firefox 仍为文本输入（但支持min/max属性约束） -
required属性配合任意type都能触发原生提示，但提示文案不可定制；若需控制提示文字，得用setCustomValidity() - 别依赖
type="number"防止用户输字母——它只限制提交校验，input.value仍是字符串，且允许输入e或-，真正校验还得靠 JS 或后端
Canvas 和 Video 不是“高级功能”，它们的加载与交互逻辑和普通元素完全不同
把 <canvas></canvas> 当成图片用？把 <video></video> 当成 GIF 用？很容易卡住：Canvas 内容不会随页面缩放重绘，Video 默认不自动播放（尤其移动端），而且它们的事件流、尺寸设置、资源加载时机都和 <img alt="HTML5入门使用方法_html5怎么用【基础】" > 不一样。
容易踩的坑：canvas.width 和 canvas.height 是绘图缓冲区尺寸，不是 CSS 显示尺寸；设成 100% 的 CSS 宽高会导致画面模糊；video 加了 autoplay 但没加 muted，在 Chrome 移动端直接静音且不播。
- Canvas 渲染清晰的关键是：先用 JS 设置
canvas.width和canvas.height为实际像素值（如canvas.width = canvas.clientWidth * window.devicePixelRatio），再用 CSS 控制显示大小 - Video 自动播放必须满足：
autoplay+muted（即使你后续用 JS 解除静音），否则多数浏览器拒绝播放 - Canvas 绘图前务必检查
getContext('2d')是否返回有效对象，某些旧安卓 WebView 可能返回null
最常被忽略的一点：HTML5 的“新”不在语法多炫，而在于每个特性都有明确的**失效边界**——比如 localStorage 有容量限制（通常 5MB）、fetch 不发 cookie 除非显式设 credentials: 'include'、IntersectionObserver 在低电量模式下可能暂停回调。不查 MDN 的兼容表格和注意事项，光靠“它应该能用”去写，十有八九掉坑里。
