标准HTML文档结构是硬性前提：必须以<!DOCTYPE html>开头（无空格/BOM），<html lang="zh-CN">为根，<head>内前置<meta charset="UTF-8">和<title>，<body>为唯一内容容器。
标准 HTML 文档结构不是“可选写法”，而是浏览器渲染和搜索引擎解析的硬性前提——漏掉 <!DOCTYPE html> 或错嵌 <head> 与 <body>，轻则页面乱码、样式失效，重则被搜索引擎降权。
为什么 <!DOCTYPE html> 必须放在第一行？
它不是 HTML 标签，而是文档类型声明（doctype），作用是告诉浏览器“用标准模式渲染，别用怪异模式”。如果它前面有空格、注释或 BOM 字节，浏览器会退化为怪异模式，导致盒模型、浮动、字体渲染全乱套。
- 常见错误：在
<!DOCTYPE html>上方加空行、UTF-8 BOM（尤其 Windows 记事本保存时默认带 BOM） - 验证方法：用浏览器开发者工具 → Elements 标签页，看顶部是否显示 “Rendered in Standards Mode”
- 编辑器建议：VS Code 默认 UTF-8 无 BOM；Sublime Text 保存时选 “UTF-8” 而非 “UTF-8 with BOM”
<html>、<head>、<body> 的嵌套关系不能颠倒
<html> 是唯一根元素，<head> 和 <body> 必须是它的直接子元素，且只能各出现一次。把 <script> 或 <div> 写在 <html> 外、或把 <title> 放到 <body> 里，浏览器虽会容错修复，但 DOM 结构已损坏，JS 获取 document.title 可能为空，SEO 元数据丢失。
- 典型错误：
<body><head><title>xxx</title></head></body>（<head>错塞进<body>） - 正确顺序：必须是
<html>→<head>+<body>（同级，无嵌套） - lang 属性别省：写成
<html lang="zh-CN">，影响屏幕阅读器发音和 Google 搜索结果语言识别
<head> 里哪些标签不可少？
<head> 不显示内容，但决定页面能否正常加载、被正确理解。最小可用集合只有三个：必需的 <meta charset="UTF-8">、必需的 <title>、以及隐式必需的 <meta name="viewport">（移动端适配）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须在<head>最靠前位置（最好第二行），否则前面的<title>中中文可能乱码 -
<title>不只是浏览器标签名，更是 SEO 第一关键词来源，长度建议 20–30 字符 - 没有
<meta name="viewport" content="width=device-width, initial-scale=1.0">，手机访问时页面会缩成一团小字 -
<link rel="stylesheet">和<script>可以后置，但<meta charset>和<title>顺序不能动
如何一秒生成合规骨架？
手动敲容易漏标签或拼错，现代编辑器都支持 Emmet 快捷展开。在空文件中输入 ! 后按 Tab（VS Code / WebStorm / Sublime 默认支持），直接输出完整、无 BOM、带中文 lang 的骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
注意：生成后立刻改 <title>，否则所有页面标题都是 “Document”，不利于调试和 SEO；<body> 里留空也行，但别删掉这层标签——哪怕只放一个 <p>，也得让它在 <body> 里面。
最常被忽略的是 <meta charset="UTF-8"> 的位置和 <html lang> 的值，这两处出错不会报红，但会让整个页面在部分环境里“看起来不对劲”。
