HTML嵌套规则核心是：块级元素可含内联或部分块级元素，内联元素不可含块级元素；p、h1~h6、dt等特殊块级元素仅能含内联元素；禁止交叉嵌套，且需严格闭合。
HTML不是编程语言，而是网页的骨干架构语言——它不负责计算或逻辑，只决定“哪些内容该出现在哪、以什么身份出现”。浏览器拿到 HTML 文件后，先按标签解析出结构树（DOM），再交由 CSS 排版、JavaScript 交互。没 HTML，CSS 和 JS 就像没地基的装修和家具。
为什么 <DOCTYPE html> 必须写在第一行？
这是告诉浏览器：“用 HTML5 标准来解析我”，否则浏览器可能退回到怪异模式（Quirks Mode），导致盒模型、字体大小、甚至 display 行为都和预期不一致。常见错误是把它前面加空格、注释或 BOM 字节，结果整个页面布局错乱。
-
<DOCTYPE html>必须顶格、无空格、无注释，且仅出现一次 - 大小写不敏感，但惯例全小写；
<!doctype html>也合法，但统一用小写更稳妥 - 缺失或写错（如
<!DOCTYPE html5>）会触发怪异模式，开发者工具里 Elements 面板顶部会标出 “Quirks Mode”
<html lang="zh-CN"> 的 lang 属性到底影响什么？
它不控制字体渲染，但直接影响屏幕阅读器朗读语种、搜索引擎对页面语言的识别、甚至部分浏览器自动翻译的触发逻辑。中文页面写成 lang="en"，会导致读屏软件用英语音调读中文，体验极差。
- 必须与实际内容语言一致：
zh-CN（简体中文）、zh-TW（繁体中文）、en-US等 - 可作用于局部：比如一段英文引文可写
<blockquote lang="en">，内部文字就按英语处理 - 不写
lang不报错，但 WCAG 可访问性标准明确要求——很多政企项目过审会卡这点
为什么 <meta charset="UTF-8"> 要放在 <head> 最前面？
浏览器从上到下解析 HTML，一旦遇到非 ASCII 字符（比如中文），而此时还没读到字符集声明，就会按默认编码（通常是 ISO-8859-1）尝试解码，造成乱码。等后面读到 charset 时，已经晚了。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须在
<head>内、且尽可能靠前，理想位置是第二行（<html>之后，<title>之前） - 不能写成
<meta charset="utf-8">（小写 utf-8）——虽然多数浏览器能容错，但 W3C 标准规定值为UTF-8（全大写） - 如果用 UTF-8-BOM 编码保存文件，即使漏写这行 meta，也可能不乱码，但这属于“碰巧”，不可依赖
<header>、<main>、<footer> 这些语义标签能随便嵌套吗？
能嵌套，但有隐含约束：比如 <main> 在整页中只能出现一次，且不能是 <article>、<aside>、<footer>、<header>、<nav> 的后代。违反这些规则不会让页面崩溃，但会破坏辅助技术对文档结构的理解。
-
<main>是页面唯一主内容区，别把它塞进<article>里（<article>自己有独立的主内容语义） -
<header>可以多次出现：页面顶部一个，每个<article>里也能有一个 - 用开发者工具检查 DOM 结构时，留意右侧“Accessibility”面板是否提示 “
mainis not a landmark” —— 那往往是嵌套或遗漏导致的语义断裂
HTML 的“简单”在于标签易写，它的“复杂”藏在隐含规则里：DOM 构建顺序、解析容错边界、语义层级约束。这些不报错，却会在可访问性测试、SEO 收录、跨设备适配时突然暴露——别等上线后被 QA 或用户反馈才回头查 <meta charset> 的位置。
