<!DOCTYPE html>是强制触发标准模式的开关，必须位于文件首行且无任何前置字符；缺失或错误将导致怪异模式，引发CSS错乱、盒模型异常及API不准等问题。
从 DOCTYPE 开始就别跳过
很多新手直接写 <html>，结果浏览器进怪异模式（Quirks Mode），CSS 错乱、盒模型异常、getBoundingClientRect() 返回值不准——全因没写 <!DOCTYPE html>。它不是可选注释，而是强制触发标准解析模式的开关。
必须紧贴文件第一行，前面不能有任何字符（包括空格、BOM、注释）。常见错误有：
-
<!-- 注释 --><!DOCTYPE html>→ 失效 -
<!DOCTYPE html>→ UTF-8 BOM 导致失效 -
<?php echo '<!DOCTYPE html>'; ?>→ 服务端输出前有空行
验证方式：打开 DevTools → Elements 面板顶部看是否显示 “Rendered in Standards Mode”；或者执行 document.compatMode，返回 "CSS1Compat" 才对。
lang 属性不是摆设，是语义和可访问性的起点
<html lang="zh-CN"> 不只是给翻译插件看的。它直接影响屏幕阅读器的发音规则、拼写检查、字体 fallback 行为，甚至影响某些 CSS 的 :lang() 伪类匹配。
立即学习“前端免费学习笔记（深入）”；
常见误用：
- 写成
lang="cn"或lang="ch"→ 必须用 IETF BCP 47 标准（如zh-Hans、zh-Hant、en-US） - 只在
<html>写，但页面里混入英文段落却不加lang="en"→ 屏幕阅读器仍按中文读英文单词，发音荒谬 - 动态切换语言时只改
document.documentElement.lang，却忘了同步更新<meta http-equiv="content-language">（虽已不推荐，但部分旧系统仍依赖）
真实影响案例：某政务站未设 lang，视障用户反馈“所有按钮名都读成拼音”，根本无法操作。
head 里 meta charset 必须在所有其他标签之前
<meta charset="UTF-8"> 要放在 <title>、<script>、<link> 之前。否则浏览器可能用默认编码（如 ISO-8859-1）解析后续内容，导致中文标题乱码、内联脚本语法错误。
原因：浏览器从上到下解析，遇到第一个能确定编码的 <meta> 就锁定编码；若位置靠后，前面已解析的内容就不可逆地错了。
正确顺序示例：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> <link rel="stylesheet" href="style.css"> </head>
注意：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 是过时写法，优先用 charset 属性。
body 里别堆 div，用语义容器锚定逻辑区块
写 <div id="header">、<div class="main"> 看似省事，但丢掉了结构语义。搜索引擎、屏幕阅读器、自动化测试工具全靠语义标签识别页面骨架。
对应关系要严格：
- 页眉 →
<header>（不是每个<div>都叫 header） - 主导航 →
<nav>（且一个页面通常只该有一个主<nav>） - 主要内容 →
<main>（全局唯一，不能嵌套在<article>里） - 独立内容单元 →
<article>（如博客文章、新闻条目） - 逻辑分组 →
<section>（必须带标题<h2>–<h6>）
坑点：用 <section> 却不配标题，会导致无障碍树里出现“无名区块”，AT（辅助技术）直接跳过；用多个 <main>，部分读屏软件会报错或只朗读第一个。
建立体系不是背标签列表，而是把每个标签放进“文档结构—语义意图—机器可理解性”三重坐标里定位。最容易被忽略的是：浏览器解析顺序和 DOM 构建过程不可逆，写错位置比写错标签更难调试。
