<!DOCTYPE html>必须位于文档第一行且前面不能有任何字符，否则浏览器进入怪异模式，导致CSS布局、JS属性等异常。
必须从 <!DOCTYPE html> 开始，且不能有任何字符（包括空格、BOM、注释）在它前面；否则浏览器会进怪异模式，CSS 布局、getBoundingClientRect、document.body.scrollHeight 都可能出错。
DOCTYPE 必须独占第一行，且不能带任何前导内容
常见错误现象：Quirks Mode 被触发，开发者工具里 Elements 面板顶部显示“Document is in Quirks Mode”；IE 或旧版 Safari 渲染错乱；box-sizing: border-box 失效；position: sticky 不生效。
使用场景：所有 HTML 文件，无论是否用构建工具生成，只要直接交付给浏览器，就必须满足此条件。
检查方法：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code 打开，右下角看编码是否为
UTF-8（不是UTF-8 with BOM） - 终端运行
file -i your.html，输出不含bom - 用
hexdump -C your.html | head -n 1确认前三个字节是3c 21 44（即）
<html lang="zh-CN"> 的 lang 属性不能省，也不能乱填
为什么这样做：屏幕阅读器靠它切换中文语音引擎；搜索引擎靠它判断页面主体语言；Chrome 会据此自动启用拼音输入提示、标点朗读规则（比如引号读“双引号”还是“单引号”）。
参数差异：
-
lang="zh"是泛化值，W3C 推荐使用带区域的zh-CN（简体）或zh-TW（繁体） -
lang="cn"、lang="ch"、lang="zh_CN"（下划线）均不符合 BCP 47 标准，会被忽略 - 多语言片段需局部覆盖，例如：
<p>鲁迅说:<span lang="en">"Hope is a thing with feathers"</span></p>
容易踩的坑：用记事本保存时默认加 BOM；Vue / React 模板中动态插值导致 lang 值为空或拼错；国际化项目里硬编码 lang="en" 却渲染中文内容。
<meta charset="UTF-8"> 必须放在 <head> 最开头
常见错误现象：中文显示为方框、乱码（）、Ajax 返回的 JSON 中文字段解析失败；document.title 读取时出现乱码；fetch 响应头 Content-Type 缺失时 fallback 到系统默认编码（如 GBK）。
性能影响：该标签必须是 <head> 内第一个元素，否则浏览器可能已按错误编码解析后续 HTML，再改也来不及。
实操建议：
- 写在
<head>内第一行，紧贴<head>开始标签 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（XHTML 风格，HTML5 不推荐） - 不要依赖服务器响应头替代——HTTP 头可被覆盖或缺失，
<meta>是最终兜底
<title> 不是可选装饰，而是强制 SEO 和可访问性字段
为什么这样做：W3C 验证器会报错；Lighthouse 可访问性审计失败；微信内置浏览器、钉钉等 WebView 在无 <title> 时默认显示域名；搜索结果摘要缺失标题，点击率暴跌。
使用场景：
- 静态页：直接写死，如
<title>首页 - 我的网站</title> - SPA：服务端预渲染必须有初始值，客户端 JS 修改需用
document.title = '新标题' - CI 流水线：可用
html-validate检查<title>是否存在且长度在 2–60 字符之间
容易被忽略的点：Vue Router 的 beforeEach 里只改了 document.title，但 SSR 输出仍是空 <title></title>；某些 CMS 导出 HTML 时漏掉该标签；<title> </title>（仅空格）也被视为无效。
真正难的不是写出骨架，而是让每个标签都出现在它该在的位置、带它该有的值、不被构建流程或编辑器悄悄污染。BOM、lang 值、charset 顺序、title 内容——四个点，任一出错，标准就塌了一角。
