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