HTML5 的 DOCTYPE 必须写为 <!DOCTYPE html>（全小写、无空格、无引号），字符集声明必须用 <meta charset="UTF-8"> 且置于 <head> 最前面；二者错误将触发怪异模式，导致样式错乱、JS 失效、表单验证异常。
HTML5 的 DOCTYPE 和字符集怎么写才不翻车
html5 的文档声明和编码声明不是“可选优化”，而是解析基础——写错会导致整个页面进怪异模式，样式错乱、js 失效、表单验证失效都可能由此而来。
-
<!DOCTYPE html>必须全小写、无空格、无引号、无 URL；旧版 HTML4 的长串 DTD 声明在 HTML5 中不仅多余，还可能触发 IE8 及以下的混杂模式 -
<meta charset="UTF-8">必须放在<head>最前面（越靠前越好），否则 Safari 或某些邮件客户端可能解析出乱码；旧写法<meta http-equiv="content-type" content="text/html; charset=utf-8">在 HTML5 中仍能工作，但冗余且易漏空格 - IE8 不识别
<meta charset>，但只要 DOCTYPE 正确 + html5shiv 加载了，语义标签就能用；字符集问题则必须靠位置保底，polyfill 也救不了
语义标签不是“换个 div”，而是结构和行为的双重升级
把 <div class="header"> 换成 <header> 看似只是标签名变短，实则影响 SEO、屏幕阅读器播报逻辑、CSS 选择器权重，甚至浏览器默认样式继承链。
-
<main>全页只能有一个，且不能嵌套在<article>或<section>内；误嵌套会导致辅助技术跳过内容，Google Search Console 也可能报结构错误 -
<nav>不等于“所有链接容器”，它专指主导航区块；侧边栏菜单、分页、面包屑应分别用<aside>、<ol>、<nav aria-label="breadcrumb"> - IE9+ 原生支持这些标签，但 CSS 里仍要显式写
header, nav, main { display: block; }；旧版 IE（如 IE8）靠 html5shiv 补丁后，仅解决 DOM 渲染，不自动加 display 属性
表单控件 type="email" 这类新属性，真能代替 JS 校验吗
不能。浏览器原生校验只管格式和必填，不校验业务逻辑（比如邮箱是否已注册、密码强度是否达标），而且行为不一致——iOS 的 type="date" 弹窗是原生日历，Android 可能是文本框+软键盘。
- 视觉反馈靠
:valid/:invalid伪类，但 JS 提交时必须调用input.checkValidity()主动触发，否则用户点提交却没提示 -
pattern属性只支持 RegExp 字面量（不带/g标志），且不校验空值；required对type="number"无效（空值会被转成 0） - 移动端键盘适配是真实收益：
type="tel"唤起数字键盘，type="search"自带清空按钮；但别指望type="url"能防 XSS，它只校验协议头
video/audio 标签看着简单，上线后最容易挂在哪
不是播不出，而是“播一半卡住”“静音没提示”“老浏览器留白”——这些问题几乎都出在格式兜底和 fallback 设计上。
- MP4(H.264+AAC) 是兼容性底线，WebM(VP9+Opus) 是开源首选，但 Safari 直到 17+ 才支持 VP9；AV1 视频目前仍不建议线上使用
- 必须用
<source>多次声明，不能只写<video src="xxx.mp4">；否则 Safari 遇到 WebM 源会静默失败，不触发 error 事件 - fallback 文本必须写在
<video>标签内部（不是 title 属性），否则禁 JS 环境或邮件客户端直接渲染为空白块
最常被忽略的是：HTML5 样式差异不只在标签名，而在于“浏览器如何理解这段 HTML”。一个 <time datetime="2026-03-12"> 不光是语义标记，它让搜索引擎知道这是日期而非普通文本，也让语音助手能正确朗读。这种隐性契约，比视觉效果更难调试，也更值得花时间对齐。
立即学习“前端免费学习笔记（深入）”；
