正确：必须位于html文档第一行且前面不能有任何字符，否则浏览器将进入怪异模式，导致渲染异常。
!DOCTYPE html 必须放在第一行，且前面不能有任何字符（包括空格、注释、BOM）。它不是HTML标签，而是向浏览器声明文档类型和解析模式的指令；不写或写错会导致浏览器进入怪异模式（Quirks Mode），触发错误的盒模型、浮动行为和CSS渲染逻辑。
为什么 !DOCTYPE html 不能省略或写成其他形式
现代浏览器只认 !DOCTYPE html 这一种简写形式来触发标准模式。旧式写法如 虽然仍能工作，但冗长易错，且对HTML5新元素（如 <code>section、article）无额外支持。更危险的是：、<code> 或带拼写错误的版本，会让IE9及以下直接退化为怪异模式——此时 <code>width: 100% 可能不包含 padding，float 元素可能无法正确清除，调试时很难定位根源。
lang 属性到底要不要加
要加，且必须准确反映页面主要语言。例如中文页用 ，英文页用 。这不是可选项：
- 屏幕阅读器依赖它切换发音规则和语速
- 搜索引擎用它判断内容地域相关性
- 部分CSS伪类（如
:lang()）和字体回退逻辑会据此生效 - 缺少
lang属性时，Chrome DevTools 会在 Accessibility 面板标为“警告”
<meta charset="UTF-8"> 的位置和必要性
它必须是 内前几个标签之一（建议紧随 <title></title> 之后或之前），且必须在任何可能含非ASCII字符的标签（如 <title></title>、<script></script>）之前出现。原因很实际：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 浏览器一旦开始解析
<title>你好</title>却还没看到charset声明，会按系统默认编码（如 Windows-1252）解码，导致中文显示为乱码 - 即使服务器返回了
Content-Type: text/html; charset=utf-8，HTML内声明仍是兜底保障——HTTP头可能被代理覆盖或遗漏 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，这是HTML4遗留写法，已被<meta charset>取代，前者在部分旧Android WebView中解析不稳定
HTML结构里哪些标签绝对不能嵌套错
浏览器对嵌套错误容忍度高，但某些组合会静默修正，带来意料外的行为：
-
<p></p>里面不能放<div> ——浏览器会自动闭合 <code><p></p>，导致结构断裂。应改用<section></section>或<article></article> -
<li>必须直接放在<ul></ul>或<ol></ol>内，中间插<div> 会让浏览器把 <code><div> 移到列表外 <li> <code>里不能出现<script></script>（除非defer或type="module"），否则会阻塞解析；更隐蔽的问题是：若<script></script>含document.write()，会清空整个
真正容易被忽略的，是
!DOCTYPE 和 charset 的顺序与位置——它们不报错，但一出问题就是全局性的解析偏差，而且你很难第一时间想到是它们惹的祸。
