HTML5必须使用<!DOCTYPE html>和<meta charset="utf-8">，二者须置于<html>前且不可混用；语义化标签如<header><article>等是可访问性与SEO硬性要求，非视觉替代；表单type属性触发原生校验与系统控件；video/audio需多格式source及正确MIME类型。
DOCTYPE 和字符编码写法必须改，否则不算真正 HTML5
HTML5 不是“加几个新标签”就完事，最基础的文档声明和编码方式已经强制简化。旧版 XHTML 常见的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在 HTML5 中不仅冗余，还会触发怪异模式（Quirks Mode），让浏览器降级渲染。
正确写法只有且必须是：<!DOCTYPE html>（不区分大小写，但建议小写）；字符编码也从 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 改为更简洁的 <meta charset="utf-8">。
- 这两个标签必须放在
<html>标签之前，且<meta charset>应紧随<head>开始后——放晚了可能导致前几个字节乱码 - 不能混用：如果写了
<meta charset>，就别再写http-equiv版本，浏览器可能忽略后者或报警告 - 所有现代浏览器都支持这种写法，包括 IE9+；IE8 及以下根本不认 HTML5，这类项目通常已不需兼容
语义化结构标签不是“锦上添花”，而是 DOM 可访问性和 SEO 的硬性依赖
用 <div id="header"> 和用 <header> 渲染效果可能一样，但对屏幕阅读器、搜索引擎爬虫、甚至 JS 的 document.querySelector('header') 行为，意义完全不同。
常见误用是把 <section> 当成 <div> 的替代品无脑替换，结果结构混乱。它本质是“有主题的独立内容块”，必须配 <h1>–<h6> 才算完整语义。
立即学习“前端免费学习笔记（深入）”；
-
<article>：可独立分发/复用的内容（如博客正文、新闻条目），自带隐式 sectioning root -
<aside>：与主内容相关但可剥离的补充信息（如侧边栏推荐、术语注释），不是所有侧栏都适合 -
<nav>：仅用于主要导航链接集合，面包屑、页脚链接、版权声明都不该塞进去 - 旧版中大量使用的
<font>、<center>、<u>等纯样式标签，HTML5 已彻底废弃，CSS 替代是唯一合法路径
表单控件升级不只是“长得好看”，关键在原生校验和移动端体验
HTML5 新增的 type="email"、type="date"、type="number" 等，并非只改个输入框样式。它们直接调用系统级控件（iOS 日期滚轮、Android 邮箱键盘），并触发浏览器原生验证逻辑。
比如用户输错邮箱格式，提交时会自动弹出提示，无需 JS 监听 input 事件手动判断。但要注意：这些校验是“友好提醒”，不是安全屏障，后端仍必须验证。
-
required、min、max、pattern等属性在 HTML5 中才具备实际校验能力，旧版只当普通字符串属性 -
type="date"在 Safari 和 Firefox 桌面端支持较弱，若需强一致性，得 fallback 到第三方日历组件（如 flatpickr） - 移动端对
type="tel"会调起数字键盘，但type="number"可能带小数点——要限制整数，得加step="1"
video/audio 标签省略 src 属性是常见错误，但更隐蔽的问题在 MIME 类型和 fallback
很多人写 <video controls><source src="a.mp4"></video> 就以为完事，结果在某些服务器上播放失败。根本原因常是服务器没返回正确的 Content-Type（如 video/mp4），浏览器直接拒播。
另一个坑是只提供一种格式：MP4 在 iOS 全系支持，但 Linux 或部分安卓机可能需要 WebM；没有 <source> 备选，就会静音黑屏。
- 务必为同一视频提供至少两种格式：
<source src="a.mp4" type="video/mp4">+<source src="a.webm" type="video/webm"> - 服务器需配置对应 MIME 类型，Nginx 示例：
types { video/mp4 mp4; video/webm webm; } - 永远在
<video>内部加 fallback 文字或 poster 图片，避免用户看到空白区域：“您的浏览器不支持视频播放”比什么都不显示更可靠
真正写 HTML5，不是换几个标签名，而是接受它的约束逻辑：语义即结构，结构即行为，行为即体验。最容易被跳过的，其实是 DOCTYPE 和 charset 这两行——它们不出错时不显眼，一出错却全盘失效。
