HTML5页面必须以开头且无前置字符，配合置于最前，并使用语义化标签与defer脚本加载机制。
HTML5 页面不是靠“制作”出来的，是靠写对 开始的
很多初学者卡在第一步：页面打开是乱码、样式不生效、控制台报错 The document is not a HTML5 document。根本原因往往是漏了声明或写错了位置。
必须把 放在第一行，前面不能有任何字符（包括空格、BOM、注释）。常见错误：<code><?php ... ?> 输出前有空行；编辑器保存带 UTF-8 BOM；复制代码时粘贴进隐藏符号。
必须全小写，<code> 也合法，但大小混写（如 <code>）在部分旧工具里会触发怪异模式- 不要写成
—— 这是 HTML4 声明，浏览器会降级渲染 - 不需要加
lang属性在 doctype 上，那是的事
用 <meta charset="UTF-8"> 解决中文变问号
页面里中文显示为方块或问号？90% 是编码没对齐。HTML5 只认 <meta charset="UTF-8">，且必须放在 最前面（在 <title></title> 之前），否则浏览器可能已按默认编码解析了一部分。
别用 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> —— 它冗长、易错、且在 HTML5 中已过时。
立即学习“前端免费学习笔记（深入）”；
- 服务器返回的 HTTP 头
Content-Type: text/html; charset=utf-8优先级高于 meta，但开发阶段常依赖 meta，所以务必写 - 文件本身必须存为 UTF-8 无 BOM 格式。VS Code 默认是，但记事本、Sublime 有时会偷偷加 BOM
- 如果用了构建工具（如 Vite、Webpack），确保输出 HTML 模板里也保留这行，别被模板引擎删掉
语义化标签不是加分项，是避免 display: block 硬 hack 的刚需
不用 <header></header>、<nav></nav>、<main></main>、<article></article>，也能让页面“看起来一样”。但一旦要适配屏幕阅读器、SEO 抓取、或者改用 CSS Grid 布局，就会发现 <div id="nav"> 根本没法被 <code>nav { display: flex; } 选中——因为浏览器不认识你自定义的“nav”含义。
现代 CSS 选择器（比如 main > *:first-child）和可访问性 API 都依赖原生语义。
-
<section></section>不等于“一个区块”，它需要有标题（<h2></h2>等），否则语义断裂 -
<aside></aside>不是“侧边栏容器”，而是与主内容相关但可独立存在的内容（如引用、注释） - 老项目升级时，别强行把所有
<div class="footer"> 改成 <code><footer></footer>—— 如果里面塞了广告、第三方脚本加载器，反而破坏语义<script></script>放哪儿，直接决定白屏时间和报错时机把
<script src="app.js"></script>放在里，页面可能长时间白屏；放到底部又容易遇到document.getElementById(...) is null。HTML5 提供两个明确解法：defer和async，但它们行为完全不同。多数情况该用
defer：脚本按顺序下载、DOM 构建完再执行，适合操作 DOM 的逻辑。-
async适合完全独立的脚本（如统计、埋点），下载完立刻执行，不保证顺序，也不等 DOM - 内联脚本（
<script>console.log(...)</script>）没有defer或async，会立即阻塞解析 - 现代框架（React/Vue）打包产物通常带
defer，但手写 HTML 时得自己加，否则首屏 JS 执行时机不可控
真正麻烦的不是语法，是浏览器如何解释每一行字节——从 DOCTYPE 到 script 加载，每个细节都可能让页面在某个设备、某次刷新、某个缓存状态下突然失灵。写完别急着测功能，先看 Network 面板里 HTML 是不是 status 200 + MIME type
text/html，再看 Console 有没有 failed to load resource 或 parser error。 -
