合法html5页面需满足：①首行声明；②根元素含lang属性；③用语义标签替代div命名；④script置body末尾或加defer/async；⑤新标签按需使用，避免滥用；⑥本地开发须启用本地服务器。
HTML5 本身不是“做网页”的工具，而是浏览器支持的一套标准——你写的还是 HTML，只是用新标签、新 API、更合理的语义结构来组织它。
怎么写一个合法的 HTML5 页面（不是“手把手”，是检查清单）
所谓“HTML5 网页”，核心是文档类型声明 + 语义化结构 + 浏览器能识别的新特性。别被“手把手”带偏，先确保基础不翻车：
- 第一行必须是
—— 不带版本号，不加引号，不分大小写但惯例小写；少了它，IE 或旧 Chrome 会进怪异模式 - 根元素必须是
，lang属性不是可选的，影响屏幕阅读器和 SEO - 避免用
<div id="header"> 这类纯样式命名，改用 <code><header></header>、<nav></nav>、<main></main>、<article></article>等语义标签——不是为了“看起来高级”，而是让 JS 获取document.querySelector('main')更稳，也让打印样式表自动忽略<aside></aside> -
<script></script>标签默认是同步阻塞的，如果放在里又没加defer或async，页面会白屏卡住 -
<video></video>和<audio></audio>：真要嵌入媒体时必用，比 iframe 嵌 YouTube 更可控；但别为了“用 HTML5”硬塞空<video controls></video>，浏览器会报Failed to load resource: the server responded with a status of 404 () -
<canvas></canvas>：适合动态绘图、游戏、数据可视化；但别拿来当图片容器——<img src="xxx.jpg" alt="html5怎么做网页_手把手教你用html5制作网页【指南】" >加载更快、支持右键保存、自带 alt 文本 -
<section></section>和<article></article>：有明确主题边界的内容才用，比如博客正文用<article></article>，侧边推荐列表用<section></section>；混用或嵌套错层（如<article></article>里套<section></section>再套<article></article>）会让辅助技术混乱 -
<time datetime="2024-06-15">昨天</time>：对日期/时间做机器可读标注有用，但别写成<time datetime="yesterday">昨天</time>——datetime值必须是规范格式，否则 JS 调new Date(el.dateTime)会返回Invalid Date - Chrome / Edge 默认禁止
file://下的fetch()、XMLHttpRequest、WebSockets，会直接抛Access to script at 'file:///xxx.js' from origin 'null' has been blocked -
<video></video>的src如果是相对路径（如src="videos/demo.mp4"），在file://下可能因 MIME 类型缺失被拒绝加载，控制台报The video on this page cannot be played - 解决方法只有一个：用本地服务器跑。命令行执行
npx serve（需 Node）、python3 -m http.server或 VS Code 安装 Live Server 插件——别试图用“禁用安全策略”启动 Chrome，那不是开发，是自欺
哪些 HTML5 标签真该用，哪些其实可以不用
新标签不是越多越好，关键看是否带来实际收益。比如：
本地打开 HTML 文件就报错？常见兼容性陷阱
很多人双击 .html 文件在浏览器里打开，发现 <video></video> 不播、fetch() 报 CORS、localStorage 读不到——这不是 HTML5 的问题，是浏览器对 file:// 协议的限制：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写多少个新标签，而是判断什么时候该用 <details></details> 而不是自己写展开收起 JS，或者为什么 input type="email" 校验通过了却还是被后端拒收——这些细节不在“手把手”里，但在每次提交表单失败的那一刻，你得知道去查哪一行。
