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