用HTML5做网站关键在于正确声明DOCTYPE和MIME类型，而非堆砌新标签；语义化需严格遵循规范，本地开发须启用HTTP服务，旧浏览器需html5shiv支持，兼容性依赖真机测试。
html5 本身不是一套“开发流程”，它只是 html 的最新标准；所谓“用 html5 做网站”，本质是用现代浏览器支持的语义化标签、api 和配套技术（css3、javascript）搭一个能跑在真实环境里的网页——流程和十年前没本质区别，但细节坑多得多。
怎么写一个真正被浏览器当 HTML5 解析的页面
关键不在用了多少 <section> 或 <article>，而在文档类型声明和 MIME 类型是否匹配。很多所谓“HTML5 网站”其实被服务器发成 text/html 却没声明 <!DOCTYPE html>，或者用了 <!DOCTYPE html PUBLIC ...> 这类过时写法，导致 IE 或旧版 Safari 进入怪异模式。
- 必须以
<!DOCTYPE html>开头，且必须是第一行、无空格、无注释 - 服务器返回的
Content-Type响应头得是text/html; charset=utf-8，不能是application/xhtml+xml（除非你真打算用 XHTML 模式，那基本等于自找麻烦） - 别信编辑器自动补全的“HTML5 模板”——有些老插件塞了
xmlns属性或xml:lang，这些在 HTML5 里不合法，会触发解析错误
哪些 HTML5 标签该用、哪些不该乱用
语义化不是贴标签比赛。<header> 不等于“页面顶部”，<nav> 也不等于“所有带链接的栏”。用错反而让屏幕阅读器更难理解结构。
-
<main>页面中只能出现一次，且不能嵌套在<article>、<aside>、<footer>里 -
<time>必须带datetime属性才有效，纯文本<time>2024年</time>对机器无意义 -
<figure>+<figcaption>是独立内容单元（比如一张图+它的说明），不是用来包任意图片的“样式容器” - 别为了“用 HTML5”把所有
<div class="card">强改成<article>——没标题、没独立上下文、不被 RSS 抓取的内容，就不是<article>
本地双击打开 HTML 文件为什么很多 HTML5 功能不工作
因为浏览器对 file:// 协议限制极严：localStorage、fetch()、Geolocation、甚至某些 <video> 编解码都直接禁用。这不是 bug，是安全策略。
- 本地开发必须起一个最小 HTTP 服务，哪怕只用 Python：
python3 -m http.server 8000 - VS Code 插件 Live Server 本质也是干这事，但它默认加了 CORS 头，可能掩盖线上部署时的真实跨域问题
- Chrome 启动时加
--unsafely-treat-insecure-origin-as-secure="file://"参数只是临时绕过，别当成解决方案
CSS 和 JS 配合 HTML5 时最常漏掉的兼容处理
HTML5 标签本身在 IE8 及以下不被识别，但问题不在标签名——而是浏览器根本不认识这些元素，document.createElement('article') 都不会生成有效节点，导致 CSS 选择器失效、JS 获取不到元素。
立即学习“前端免费学习笔记（深入）”；
- 必须引入
html5shiv.js（注意不是 “shim”），且只在 IE9- 用条件注释加载：<!--[if lt IE 9]><script src="html5shiv.min.js"></script><![endif]--> - CSS 里对新标签设
display: block是必须的（老浏览器默认当 inline 元素），但现代框架如 Bootstrap 已内置，自己写 CSS 时别漏 -
input[type="date"]在 Safari 和旧 Android 上根本没原生控件，得靠 JS 库降级；别只测 Chrome 就上线
真正卡住人的从来不是“怎么开始写”，而是上线前发现 iOS 微信内置浏览器不支持 IntersectionObserver，或者某个安卓 WebView 把 flexbox 解析错了两层——这些没法靠“完整流程”规避，只能靠目标环境清单+真机测试。
