<!DOCTYPE html>必须独占第一行且不可省略，它是触发浏览器标准模式的唯一开关；若缺失或前有空格/BOM/注释，将降级为怪异模式，导致CSS盒模型、JS尺寸计算等底层行为异常。

HTML文档结构不是模板填空，而是浏览器解析和渲染的契约起点。不写<!DOCTYPE html>，或把<html>放在<head>之后，浏览器就可能降级到怪异模式（Quirks Mode），CSS盒模型、JS获取元素尺寸都会出错——这不是“看起来差不多”，而是底层行为彻底不同。

为什么<!DOCTYPE html>必须放在第一行且不能省略

它不是注释，也不是可选声明，而是触发标准模式（Standards Mode）的唯一开关。浏览器看到它，才按HTML5规范解析后续标签；没它，或前面有空格/注释，就会回退到怪异模式，box-sizing、getBoundingClientRect()返回值全乱套。

• 必须独占第一行，前面不能有任何字符（包括BOM、空格、<!-- comment -->）
• html全小写即可，HTML或Html也合法，但大小混用易引发团队风格争议
• 不要写<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">这类旧声明——现代项目无兼容必要，反而增加解析负担

<html>标签的lang属性到底影响什么

它不控制页面显示语言，而是告诉屏幕阅读器、搜索引擎、翻译插件当前文本的自然语言。设错会导致语音朗读音调错误、SEO关键词匹配失准、浏览器自动翻译失效。

• 中文必须用lang="zh-CN"（简体）、lang="zh-TW"（繁体），lang="zh"太宽泛，部分辅助技术不识别
• 多语言页面可在局部覆盖：比如<p lang="en">Hello</p>，此时该段落独立于根lang
• 服务端动态生成时，务必从用户请求头（Accept-Language）或配置中取值，硬编码lang="en"对中文用户极不友好

<head>里哪些标签顺序不能乱

顺序决定加载优先级和执行时机。<meta charset="UTF-8">必须在<title>之前，否则标题里的中文可能乱码；<link rel="stylesheet">位置影响FOUC（Flash of Unstyled Content）。

Html2md

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

下载

立即学习“前端免费学习笔记（深入）”；

• <meta charset="UTF-8">应为<head>内第一个标签（除<title>外，但实际建议放最前）
• <title>尽早出现，利于SEO抓取和标签页快速显示文字
• <link rel="stylesheet">放在<script>之前，避免阻塞渲染；多个CSS文件按依赖顺序排，避免@import嵌套
• <script defer>可放在<head>末尾，但<script>（无defer/async）必须放</body>前，否则会阻塞DOM构建

<body>里常见的结构陷阱

看似自由的<body>内容，其实受隐式规则约束。比如<div>直接包<h1>没问题，但把<h1>塞进<p>里，浏览器会自动闭合<p>——导致DOM结构和预期不符。

• <p>、<li>、<td>等流内容容器，禁止嵌套标题级标签（<h1>–<h6>），浏览器会“修复”成意外结构
• <main>必须且只能有一个，且不应被<article>或<section>包裹——它是页面主体内容的语义锚点
• 自闭合标签如<img>、<input>后面不要加/（<img src="x" />），HTML5不强制，但多余斜杠在某些XML解析场景下反而出错

真正难的不是记住每个标签怎么写，而是理解浏览器遇到非法嵌套或缺失声明时“自动纠错”的逻辑——它救了你一次，下次就可能埋下定位不到的样式或JS bug。