W3C标准HTML地基由DOCTYPE、lang属性、charset声明及head/body结构四部分构成：必须首行声明<!DOCTYPE html>，<html>标签须带lang属性，<meta charset="UTF-8">需在<head>内前1024字节，且根节点下仅允许一个<head>和一个<body>且顺序固定。
符合W3C标准的HTML底层框架，不是靠加一堆验证工具“凑出来”的，而是从文档类型、根结构、语义层级到字符编码这四块地基就定死的。没建好这些，后面加再多ARIA或微数据都只是补丁。
必须声明 <!DOCTYPE html> 且只能在第一行
这是W3C HTML5标准强制要求的触发条件。浏览器看到它才启用严格渲染模式；漏掉、写错位置（比如前面有空格或注释）、用旧式DTD（如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">）都会让浏览器降级到怪异模式，导致盒模型、Flex布局行为不一致。
实操建议：
-
<!DOCTYPE html>必须是文件开头第一个字符，前面不能有任何内容（包括BOM、空格、<!-- comment -->） - 大小写不敏感，但惯例全大写，便于识别
- 不要混用XHTML语法（如自闭合标签写成
<br />），HTML5中<br>合法且更轻量
<html lang="xx"> 的 lang 属性不可省略
W3C明确要求 <html> 标签必须带 lang 属性，否则屏幕阅读器无法正确切换语音引擎，SEO也会弱化页面语言信号。设成 lang="en" 或 lang="zh-CN" 是底线，不是可选项。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 只写
<html>，没加lang - 写成
lang="zh"—— 缺少区域码，zh-CN和zh-TW发音/用词差异大，应明确 - 动态生成时硬编码写死，多语言站点没随请求头或用户偏好动态切换
字符编码必须用 <meta charset="UTF-8"> 且放在 <head> 前1024字节内
W3C规定：若未通过HTTP头声明字符集，HTML内必须用 <meta charset="UTF-8">，且该标签必须出现在文档前1024字节内（通常意味着紧贴 <head> 开始）。放太晚会导致前段文本被错误解码，出现乱码或解析中断。
注意点：
- 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是HTML4写法，冗长且易被忽略优先级 - UTF-8 是唯一推荐编码，不要用
GBK或ISO-8859-1 - 服务端已发
Content-Type: text/html; charset=UTF-8头时，HTML内仍建议保留该<meta>标签，作为双重保障
根节点下只允许一个 <head> 和一个 <body>，且顺序固定
W3C标准禁止嵌套、重复或颠倒这两个元素。<head> 必须在 <body> 之前，且二者都必须是 <html> 的直接子元素。任何其他结构（如把 <script> 写在 <html> 外、用 <div> 包裹 <head>）都会被解析器自动修正，但可能引发脚本执行时机错乱或SEO抓取失败。
典型陷阱：
- 模板引擎拼接出
<html><body>...</body><head>...</head></html>—— 浏览器会把<head>挪到前面，但JS可能已执行 - SSR框架输出时遗漏
<head>，只留空<body>，导致CSS/JS加载失败 - 误将
<title>放在<body>内 —— W3C校验直接报错，且影响浏览器标签页显示
真正卡住W3C验证的，往往不是那些冷门属性，而是开头三行：DOCTYPE位置、lang值、charset声明顺序——它们像电路板上的供电引脚，一松动，整块逻辑就失准。其他语义标签、ARIA属性再规范，也救不回地基裂缝。
