DOCTYPE声明必须放在第一行且不能有任何前置字符；否则IE6–IE9等浏览器会触发怪异模式，导致盒模型、CSS渲染等行为异常，标准写法为<!DOCTYPE html>且必须是文件最开头的15个字符。
DOCTYPE 声明必须放在第一行，且不能有任何前置字符
浏览器靠 <!DOCTYPE html> 判断是否启用 HTML5 标准渲染模式。如果前面有空格、BOM 字节、注释或换行，部分旧版 IE 会触发怪异模式（Quirks Mode），导致盒模型、字体大小等行为异常。
实操建议：
-
<!DOCTYPE html>必须是文件最开头的 15 个字符，前面不能有<!--、（UTF-8 BOM）、空行或空格 - 大小写不敏感，但统一用小写更稳妥；不要写成
<!doctype html>或<!DOCTYPE HTML>（虽能工作，但破坏一致性） - 别加任何分号、斜杠或引号——它不是标签，也不是指令，就是一个固定字符串声明
html 标签要带 lang 属性，且必须包裹 head 和 body
<html> 是唯一根元素，所有其他标签都得在里面。漏掉它，W3C 验证失败；没加 lang，屏幕阅读器可能读错语种，SEO 也少一层语言信号。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 把
<head>或<body>直接写在<!DOCTYPE html>后面，没包进<html>—— 浏览器会自动“修复”，但 DOM 结构不可靠，JS 获取document.documentElement可能出意外 -
lang写成language或lang="ch"—— 正确值如zh-CN、en-US，参考 ISO 639-1 + ISO 3166 - 中文页面用了
lang="en"，语音朗读时声调全错，辅助技术体验直接降级
head 里 charset 和 viewport 必须存在，title 不可为空
<meta charset="UTF-8"> 决定浏览器怎么解码字节流；<meta name="viewport" content="width=device-width, initial-scale=1.0"> 控制响应式基础；<title> 是 SEO 和标签页识别的第一依据。
参数差异与影响：
-
charset必须是UTF-8（全大写或小写均可，但推荐大写），不能写utf8、utf-8（中间短横在某些旧解析器中可能被忽略） -
viewport的content值里不要加多余空格，比如width = device-width会失效；移动端若漏掉它，页面默认按 980px 渲染，文字小得看不清 -
<title>不能为空（<title></title>），否则浏览器标签显示 “无标题文档”，搜索引擎也不收录
body 内容必须真实存在，空 body 会导致可访问性警告
即使只是占位，也要放至少一个语义化元素，比如 <main>、<p> 或 <div>。W3C 验证器不会报错，但 axe、Lighthouse 等工具会标记 “document.body is empty” 为可访问性问题。
容易踩的坑：
- 以为
<body></body>合法就提交——它合法，但对用户和机器都不友好 - 把 JS 脚本生成的内容当“有内容”，而初始 HTML 中
<body>确实为空——搜索引擎爬虫和首屏渲染仍视其为空白页 - 误用
<noscript>替代真实内容，结果 JS 关闭时页面彻底黑屏
<!DOCTYPE html> 的干扰，以及 lang 值与页面真实语言不一致——这两处不出错，但会让后续调试变得隐晦。 
