将DOCTYPE改为并确保其位于文件最顶端、无BOM和空格；须在内前1024字节且唯一；需符合BCP 47标准；语义标签按功能准确替换，避免滥用；旧浏览器需特性检测而非版本判断，并补全CSS重置。
怎么改DOCTYPE才能不触发怪异模式
直接把旧的 或 XHTML 声明整行删掉，换成 <code> ——就这一行，必须在文件最顶上，前面不能有空格、BOM、注释，哪怕一个 UTF-8 BOM 字节（<code>EF BB BF）都会让 IE 和老版 Chrome 强制进怪异模式。
常见错误现象：页面布局突然错位、盒模型计算异常、width 表现不一致。这不是 CSS 写错了，是浏览器根本没按标准模式解析。
- 用编辑器检查是否启用了“显示不可见字符”，确认第一行开头干干净净
- VS Code 可右下角看编码格式，选“UTF-8 with BOM”就危险；推荐存为“UTF-8”无 BOM
- 线上验证：用
validator.nu扫描，它会明确报出“DOCTYPE missing or invalid”或“Quirks mode triggered”
meta charset 和 lang 属性怎么写才合法
<meta charset="utf-8"> 必须出现在 内前 1024 字节里，且只能出现一次；旧式写法 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 要删掉，两者共存反而可能被忽略。
中的 lang 值不是随便填的，必须符合 BCP 47 标准。写成 lang="zh" 或 lang="" 是无效的；中文推荐用 zh-CN（简体）、zh-TW（繁体），多语言子页可用 zh-Hans-CN。
立即学习“前端免费学习笔记（深入）”；
- 不写
lang会影响屏幕阅读器语调、搜索引擎对语言的识别，也违反 WCAG 可访问性要求 - 如果页面含英文段落，可局部加
<span lang="en-US">...</span>，但根的lang不可省略
div 到语义化标签该怎么换，别瞎套
不是所有 <div class="header"> 都该换成 <code><header></header>。HTML5 的语义标签有明确含义：<header></header> 是**某个区块的头部**（可以多个），<main></main> 全局唯一且只包主内容，<nav></nav> 必须是导航链接集合。
典型误用：把整个顶部栏（logo + 搜索框 + 用户菜单）全塞进一个 <header></header>，再把侧边栏菜单也标成 <nav></nav> ——结果是结构混乱，辅助技术无法区分主次。
- 先识别功能：哪个
<div> 真正承载页面主导航？只给它换 <code><nav></nav> - 主文章区域外包裹一层
<main></main>，但不要包广告或相关推荐 -
<section></section>应有标题（<h2></h2>或更高），否则只是逻辑分组，用<div> 更合适 <h3>旧浏览器兼容要补什么，别只靠 html5shiv</h3> <p><code>html5shiv.js只解决 IE8 及以下**识别新标签+能加 CSS**的问题，但它不提供语义、不修复 DOM API 缺失、也不让<video></video>播起来。很多项目只引入它就以为万事大吉，结果在 IE9 里document.querySelector("article")仍报错。真正要做的：检测特性而非检测浏览器版本。比如用
"querySelector" in document判断是否支持现代选择器，而不是if (IE 。- IE9+ 已原生支持
<header></header>等标签，但默认无样式，需手动重置header, nav, main { display: block; } -
html5shiv必须放在里，且在任何 CSS 之前加载，否则样式不生效 - 更稳妥的做法是渐进增强：基础功能用传统标签保底，新特性仅在支持时启用
最容易被忽略的是字符编码和 DOCTYPE 的组合效应——哪怕 DOCTYPE 写对了，
<meta charset>放在<title></title>后面，某些低版本 Android 浏览器仍会乱码。这不是 bug，是 HTML5 规范里白纸黑字写的硬性约束。 - IE9+ 已原生支持
