html5是底层重写而非升级补丁，需用和触发标准模式，语义标签、表单验证、音视频等特性须按浏览器实际兼容性谨慎落地。
HTML5 不是 HTML4 的“升级补丁”，而是从文档声明、语义结构到表单能力的一次底层重写。你只要改两行代码（ 和 <code><meta charset="utf-8">），浏览器就会切换到标准模式，后续所有新特性才真正生效——否则，哪怕写了 <header></header>，IE9 以下照样当普通 div 渲染。
DOCTYPE 和字符集声明必须前置且极简
HTML4 的 DOCTYPE 是一长串带 URL 的 DTD 声明，稍有拼写错误或大小写混用（比如 DOCTYPE 写成 DocType），IE 就会退回到怪异模式（Quirks Mode），导致盒模型、浮动、CSS 计算全乱套。HTML5 只要 ，全小写、无空格、无 URL，浏览器立刻启用标准解析。
<meta charset="utf-8"> 必须放在 最前面（早于任何 CSS/JS 引入），否则 Safari、旧版 Chrome 可能按系统默认编码（如 ISO-8859-1）解码，中文直接变乱码。HTML4 的 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 冗长且易漏写 http-equiv 或引号，还常被误插在 里失效。
- IE8 及更早版本不识别
<meta charset>，必须用 HTML4 写法兜底（但此时已无法启用 HTML5 新标签） -
<meta charset>若不在前 1024 字节内，部分浏览器会跳过解析 - 省略引号的写法如
<input type="button" value="提交">虽合法，但易引发属性值截断（比如 value="user name" 丢掉空格后半），不推荐生产环境使用
语义化标签不是“换汤不换药”的 div 替代
<header></header>、<nav></nav>、<main></main>、<article></article> 这些标签自带隐式 ARIA 角色和 DOM 层级语义。屏幕阅读器会把 <nav></nav> 当作导航区域单独播报，搜索引擎会把 <article></article> 内容加权为独立内容单元。而 <div class="header"> 在 DOM 树里只是个无意义容器，无障碍工具和爬虫完全无视。
<ul>
<li>
<code><main></main> 页面中只能出现一次，重复会导致辅助技术混淆
<nav></nav> 应包裹主要导航链接，页脚的“关于我们”“隐私政策”不算，得用 <footer></footer>
<section></section> 必须有标题（<h1></h1>–<h6></h6>），否则语义断裂，不如直接用 <div>
<li>IE8 及以下不识别这些标签，需用 <code>document.createElement('header') 注册，或引入 html5shiv.js原生表单验证和输入类型实际可用但有坑
HTML5 表单控件如 <input type="email">、<input type="date">、<input required> 在现代浏览器中会触发 UI 提示和基础校验，但行为差异极大：
-
<input type="date">在 Safari 和 Firefox 中仍显示为文本框，无日期弹出层，必须用 JS 库（如 flatpickr）fallback -
pattern属性只支持 JavaScript 正则语法（不支持\p{Han}等 Unicode 属性类），且错误提示文案不可定制 -
min/max对type="number"有效，但对type="text"无效；用户仍可手动输入超限值，需配合 JS 再校验 - 移动端键盘类型由
type决定（email弹邮箱键盘，tel弹数字键盘），但 iOS 上type="number"会强制显示小数点按钮，影响整数输入体验
video/audio 和 canvas 的兼容性不能只看“是否支持”
<video></video> 标签本身被广泛支持，但视频格式支持度天差地别：mp4（H.264）兼容性最好，webm（VP8/VP9）在 Chrome/Firefox 行，Safari 却长期不支持 VP9；<audio></audio> 同理，ogg 在 Safari 上直接不播放。只写一个 <source></source> 标签等于放弃部分用户。
-
<canvas></canvas>是位图绘制 API，适合游戏、图表、图像处理；SVG 才适合图标、响应式矢量图——两者定位不同，不能互换 -
<canvas></canvas>内容无法被搜索引擎索引，也不具备可访问性，关键信息（如数据图表标题）必须额外用<figcaption></figcaption>或 ARIA 标注 - 所有
<video></video>都应提供<track kind="subtitles"></track>，否则字幕功能在 Chrome 中默认关闭，且需确保 VTT 文件编码为 UTF-8 BOM-free
最常被忽略的是：HTML5 特性不是“开了就自动好用”。<main></main> 多写一个会破坏语义，<input type="date"> 在 Safari 里形同虚设，<video></video> 不配多格式 source 就等于没做兼容。真正的落地，永远卡在“浏览器实际怎么执行”和“用户真实怎么用”之间。
