HTML文档结构是浏览器解析、搜索引擎索引和辅助技术读取的唯一依据；DOCTYPE必须首行且无前置内容以触发标准模式；meta charset须在title前确保正确解码；语义标签关乎可访问性；本地调试需HTTP服务而非file://协议。
HTML文档结构不是“写完就能跑”的装饰性框架，而是浏览器解析、搜索引擎索引、辅助技术读取的唯一依据——错一层嵌套，main就可能被忽略；漏一个charset，中文就可能变乱码。
为什么<!DOCTYPE html>必须放在第一行？
它不是可选注释，而是触发浏览器“标准模式”的开关。如果前面有空格、BOM字符或<!-- comment -->，部分旧版IE会降级到怪异模式（Quirks Mode），导致盒模型、display: flex等行为完全失常。
- 用文本编辑器保存时选“UTF-8 无 BOM”编码，避免隐藏字节干扰
- VS Code 中可通过右下角编码切换，Sublime Text 需手动 Save with Encoding → UTF-8
- 检查方式：打开开发者工具 → Elements 标签页，看顶部是否显示
<!DOCTYPE html>且无任何前置内容
<head>里哪些标签顺序不能乱？
<meta charset="UTF-8"> 必须在 <title> 和所有 <link> / <script> 之前。因为浏览器一旦开始解析后续标签，就会按当前已知编码解码文本——若此时还没声明编码，中文标题或 CSS 文件路径就可能解析错误。
- 典型错误：
<title>我的网页</title><meta charset="UTF-8">→ 标题“我的网页”可能显示为“鎴戠殑缃戦〉” - 正确顺序：
<meta charset="UTF-8">→<title>→<meta name="viewport">→<link rel="stylesheet"> -
<meta name="viewport">虽不涉编码，但应紧随charset，避免移动端首次渲染时缩放异常
<body>内语义标签不是“锦上添花”，而是 DOM 可访问性的硬门槛
屏幕阅读器依赖 header、nav、main、footer 等元素跳转导航。用一堆 <div class="header"> 替代 <header>，等于把路标全拆了只留油漆字。
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个文档中只能出现一次，且不应嵌套在<article>或<section>内 -
<nav>不等于“所有链接集合”，仅用于主要导航区块（如顶部菜单、侧边栏导航）；页脚友情链接建议用<aside>或普通<div> - 没有语义标签？至少补
role属性：<div role="main">比纯<div>强，但不如原生<main>
修改 HTML 文档时最容易被忽略的 DOM 同步点
直接编辑 .html 文件并刷新，看似最简单，但容易掩盖两个关键问题：一是服务器返回的 Content-Type 是否为 text/html（而非 text/plain）；二是本地双击打开文件时，浏览器用 file:// 协议加载，<link> 的相对路径和 AJAX 请求会全部失效。
- 验证方式：F12 打开开发者工具 → Network 标签页 → 刷新页面 → 查看第一个请求的 Response Headers 中
Content-Type值 - 本地调试务必起一个最小 HTTP 服务：
npx serve、python3 -m http.server或 VS Code Live Server 插件 - 动态插入内容后，别只检查 HTML 源码（右键 → 查看网页源代码），要查 Elements 面板——那是实时 DOM 树，才是 JS 真正操作的对象
