HTML页面必须以<!DOCTYPE html>开头且无前置字符，配合<html lang="zh-CN">、<meta charset="UTF-8">、<meta name="viewport">和<title>构成标准结构，否则触发怪异模式或导致乱码、错位、JS异常等问题。
HTML 页面结构不是“随便写写就能跑”，缺了 <!DOCTYPE html> 或 <html> 根标签，浏览器就可能退化到怪异模式，中文乱码、样式错位、JS 行为异常都可能由此而来。
必须写在第一行的 <!DOCTYPE html>
这个声明不是 HTML 标签，而是告诉浏览器：“请用 HTML5 标准解析本页”。不写、写错位置（比如缩进或前面有空格）、写成旧式声明（如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">），都会触发怪异模式（Quirks Mode）——此时 box-sizing、height: 100% 等行为和标准模式完全不同，调试时会误以为是 CSS 写错了。
实操建议：
- 严格放在文件最开头，前面不能有任何字符（包括空格、BOM、注释）
- 大小写不敏感，但惯例全大写加空格：
<!DOCTYPE html> - 不要写成
<doctype html>或<!doctype html>（部分编辑器会自动转大写，但别依赖）
<html lang="zh-CN"> 的 lang 属性不能省
不设 lang 不影响页面显示，但会影响屏幕阅读器发音、搜索引擎语义识别、甚至某些 CSS 伪类（如 :lang(zh)）和字体回退逻辑。中文页写 lang="en"，拼音可能被读成英文音；写 lang="" 或留空，等于没声明。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 中文内容统一用
lang="zh-CN"（非zh或zh-cn，后者不符合 BCP 47 规范） - 如果页面含多语言区块（如英文引用），可用局部
lang="en"覆盖，例如：<blockquote lang="en">...</blockquote> - VSCode 中装 “Auto Rename Tag” 插件可避免
</html>忘闭合
<head> 里这三行是底线配置
<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">、<title> 这三项，少一个就埋一个坑：
-
<meta charset="UTF-8">缺失 → 中文显示为方块或问号（尤其 Windows 记事本另存为时默认 ANSI） - 没
viewport→ 移动端页面被缩放成小字，用户得双指放大才能看，SEO 也扣分 - 无
<title>→ 浏览器标签栏空白，不利于书签管理、搜索结果展示、微信内嵌页标题显示
注意：<meta charset> 必须在 <title> 之前（规范要求），否则部分老浏览器可能误判编码。
<body> 以外的内容不会渲染，但 <head> 里的 JS 可能阻塞
所有用户可见内容必须写在 <body> 内。有人把 <script> 放 <head> 末尾却没加 defer，结果 JS 执行卡住页面白屏——这不是结构错误，但和结构认知偏差直接相关。
实操建议：
- 初学阶段，把所有内容（文字、图片、链接）只往
<body>里放，别试探“能不能放别处” - 若需在
<head>引入 JS，务必加defer（顺序执行）或async（异步并行），除非你明确需要同步阻塞 -
<body>内容为空（仅空格或换行）时，页面就是纯白，不是 bug，是预期行为
最容易被忽略的点：很多人复制代码时漏掉 </body> 和 </html> 闭合标签，浏览器虽会自动补全，但 DOM 树结构已变，后续用 JavaScript 操作 document.body 可能取到意外节点——别靠浏览器容错，自己写全。
