正确：<!DOCTYPE html>必须位于HTML文档第一行且前面不能有任何字符，否则浏览器将进入怪异模式，导致渲染异常。

!DOCTYPE html 必须放在第一行，且前面不能有任何字符（包括空格、注释、BOM）。它不是HTML标签，而是向浏览器声明文档类型和解析模式的指令；不写或写错会导致浏览器进入怪异模式（Quirks Mode），触发错误的盒模型、浮动行为和CSS渲染逻辑。

为什么 !DOCTYPE html 不能省略或写成其他形式

现代浏览器只认 !DOCTYPE html 这一种简写形式来触发标准模式。旧式写法如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 虽然仍能工作，但冗长易错，且对HTML5新元素（如 section、article）无额外支持。更危险的是：<!doctype>、<!DOCTYPE> 或带拼写错误的版本，会让IE9及以下直接退化为怪异模式——此时 width: 100% 可能不包含 padding，float 元素可能无法正确清除，调试时很难定位根源。

<html> 标签里 lang 属性到底要不要加

要加，且必须准确反映页面主要语言。例如中文页用 <html lang="zh-CN">，英文页用 <html lang="en">。这不是可选项：

• 屏幕阅读器依赖它切换发音规则和语速
• 搜索引擎用它判断内容地域相关性
• 部分CSS伪类（如 :lang()）和字体回退逻辑会据此生效
• 缺少 lang 属性时，Chrome DevTools 会在 Accessibility 面板标为“警告”

<head> 中 <meta charset="UTF-8"> 的位置和必要性

它必须是 <head> 内前几个标签之一（建议紧随 <title> 之后或之前），且必须在任何可能含非ASCII字符的标签（如 <title>、<script>）之前出现。原因很实际：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 浏览器一旦开始解析 <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> 里面不能放 <div> ——浏览器会自动闭合 <p>，导致结构断裂。应改用 <section> 或 <article>
• <li> 必须直接放在 <ul> 或 <ol> 内，中间插 <div> 会让浏览器把 <div> 移到列表外
• <head> 里不能出现 <script>（除非 defer 或 type="module"），否则会阻塞解析；更隐蔽的问题是：若 <script> 含 document.write()，会清空整个 <head>

真正容易被忽略的，是 !DOCTYPE 和 charset 的顺序与位置——它们不报错，但一出问题就是全局性的解析偏差，而且你很难第一时间想到是它们惹的祸。