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