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