最简HTML页面需4个核心标签：<!DOCTYPE html>、<html>、<head>、<body>；DOCTYPE必须顶格小写且无BOM，meta charset须在head最前1024字节内，lang属性影响语义与渲染，可见内容仅能位于body内。
标准 HTML 页面能跑起来，最简结构只要 4 个核心标签：<code><!DOCTYPE html></code>、<code><html></code>、<code><head></code>、<code><body></code>。少一个，浏览器可能降级渲染；多写一堆没闭合的标签，页面就容易错位或 JS 拿不到元素。
为什么 <code><!DOCTYPE html></code> 必须顶格写且不能带空格
这是触发浏览器“标准模式”的唯一开关。如果写成 <code><!doctype html></code>（小写）、<code><!DOCTYPE HTML></code>（大写混用），或者前面加了空格、注释、BOM 字节，IE 和旧版 Safari 会直接切到怪异模式（Quirks Mode）——盒模型、getBoundingClientRect() 行为全变，CSS 布局可能当场崩。
实操建议：
- 复制粘贴时务必检查开头是否干净：第一行第一列必须是 <code><!DOCTYPE html></code>
- 用 VS Code 或 Sublime 编辑时，新建 .html 文件后按
!+ Tab，它自动生成的骨架就符合规范 - 不要手动加 UTF-8 BOM（即文件开头的
EF BB BF字节），否则即使写了 <code><!DOCTYPE html></code>，某些环境仍判为怪异模式
<code><meta charset="UTF-8"></code> 必须放在 <code><head></code> 最前面的原因
浏览器解析 HTML 是流式进行的。一旦遇到非 ASCII 字符（比如中文），而此时还没读到 charset 声明，就会按系统默认编码（如 GBK）尝试解码，导致乱码。更糟的是，这个声明必须出现在前 1024 字节内，否则部分浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 本地打开正常，部署到 Nginx 后中文全变成
- Chrome 控制台报
Failed to decode downloaded font，其实根源是 meta 位置太靠后
正确顺序示例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的页面</title> </head>
<code><html lang="zh-CN"></code> 不只是给翻译插件看的
这个属性影响实际功能：屏幕阅读器靠它切换语音引擎；CSS 的 :lang(zh) 伪类能针对性调整标点挤压（如中文引号间距）；搜索引擎用它判断内容语种，影响 SERP 展示。不写或写错值（比如 lang="cn"），会导致语义识别失效。
使用场景与参数差异：
- 中国大陆站点用
zh-CN（BCP 47 标准），不是zh或zh-chs - 繁体中文站点用
zh-TW或zh-HK，不能混用 - 若页面含多语言段落，可在局部标签上覆盖，例如 <code><p lang="en">Hello</p></code>
为什么 <code><head></code> 里不能放可见内容，但 <code><body></code> 外面也不能写
HTML 规范明确：所有用户可感知的内容（文字、图片、按钮）只能在 <code><body></code> 内；而 <code><head></code> 只允许元数据标签（<title>、<meta>、<link>、<script> 等）。把 <code><h1></code> 放进 <code><head></code>，浏览器会自动把它“修复”到 <code><body></code> 开头，但 DOM 树已错乱，JS 查询 document.head.querySelector('h1') 返回 null。
容易踩的坑：
- 复制别人代码时，误把 <code><body></code> 标签删了，只剩 <code><div></code> 在外面——这些元素会被塞进隐式创建的 <code><body></code>，但开发者无法控制顺序
- 用 JS 动态插入内容时，写成
document.head.innerHTML += '<div>xxx</div>'，结果 div 出现在页首空白处，还干扰样式继承
真正该关心的，是 <code><body></code> 内部结构是否语义清晰——比如用 <code><header></code>、<code><main></code> 替代一堆 <code><div class="wrap"></code>，这对 SEO 和可访问性影响远大于标签多写一行。
