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