<!DOCTYPE html>必须位于第一行，否则浏览器可能进入怪异模式导致布局异常；<html lang="zh-CN">影响屏幕阅读器、拼写检查及CSS伪类；<meta charset="UTF-8">须置于<head>靠前位置以防中文乱码。
为什么 <!DOCTYPE html> 必须写在第一行？
浏览器解析 HTML 时，会先读取文档开头的声明来决定用哪种渲染模式。如果 <!DOCTYPE html> 缺失、位置不对（比如缩进或前面有空格/注释），浏览器可能进入“怪异模式（Quirks Mode）”，导致 <h1>、<p> 等标签的默认间距、盒模型行为异常，尤其是 CSS 布局容易错位。
- 它必须是文档最开头的字符，前面不能有任何内容（包括 BOM 字符、空行、
<!-- comment -->） - 不区分大小写，但惯例全大写加空格，写成
<!doctype html>或<!DOCTYPEHTML>也能识别，可读性差且易被误删 - 不是 HTML 标签，不参与 DOM 构建，所以 JS 里查不到它，也不占
document.children长度
<html lang="zh-CN"> 的 lang 属性到底影响什么？
这个属性不只为了 SEO，它直接影响屏幕阅读器发音、浏览器拼写检查、字体 fallback 逻辑，甚至部分 CSS 的 :lang() 伪类匹配。
- 中文站点推荐用
zh-CN（简体中文，中国大陆），而非笼统的zh；港澳台用户可能需要zh-HK或zh-TW - 如果整个页面混用中英文，可在局部元素上覆盖：比如
<p lang="en">Hello</p> - 漏写
lang不报错，但 Chrome 开发者工具的“Accessibility”面板会标为 warning，WCAG 合规性检查直接不通过
<meta charset="UTF-8"> 放错位置会导致中文乱码
这行必须放在 <head> 内、且尽可能靠前（最好第二行），否则浏览器在解析到中文文本时还没读到编码声明，会按默认编码（如 windows-1252）解码，显示成 或一堆问号。
- 它只能在
<head>里生效，放在<body>中完全无效 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是 HTML4 写法，冗余且易出错 - VS Code 默认保存为 UTF-8 with BOM，某些老服务器会把 BOM 当作页面开头内容，破坏
<!DOCTYPE html>位置，建议在编辑器设置里关掉 BOM
新手常把 <head> 和 <body> 内容搞混
典型错误：把 <h1> 写进 <head>，或把 <title> 放到 <body> 里。浏览器不会报错，但语义彻底错乱：<title> 在 <body> 中只是普通文本，不会出现在浏览器标签页；<h1> 在 <head> 中根本不会渲染。
立即学习“前端免费学习笔记（深入）”；
-
<head>只放元数据：字符集、标题、视口、CSS/JS 引入、SEO 相关<meta> -
<body>才是用户真正看到的内容区域，所有可视标签（<h1>～<h6>、<p>、<img>、<div>）都该在这儿 - 没有闭合
</head>或</body>通常不影响渲染（浏览器自动补全），但会让代码难以维护，也干扰部分 lint 工具判断
真实项目里，结构松散比语法错误更难调试。一个没 lang 的页面可能看起来完全正常，直到盲人用户打不开，或者某天换了个 CDN 就开始乱码。这些点不在报错里，但在上线后才暴露。
