<!DOCTYPE html>必须写且仅一次、位于首行，它不是标签而是文档类型声明，缺省或错误将触发怪异模式，导致CSS盒模型、JS行为异常；<html>的lang属性不可省略，否则影响屏幕阅读器发音和SEO多语言索引；<head>中硬性要求<meta charset="UTF-8">、<meta name="viewport">及<title>；所有可见内容必须严格置于<body>内。
<!DOCTYPE html> 必须写，且只能写一次，放在第一行——它不是标签，是文档类型声明，缺了它，浏览器会进怪异模式，CSS 和 JS 行为可能全乱。
为什么 <html> 标签的 lang 属性不能省略
屏幕阅读器依赖 lang 判断发音规则，搜索引擎用它优化多语言索引。不写或写错（比如 lang="en" 却页面全是中文），会导致语音朗读生硬、SEO 降权。常见写法：lang="zh-CN"（简体中文）、lang="ja"（日文）、lang="en-US"（美式英语）。
<head> 里哪些 <meta> 是硬性要求
现代网页至少要包含三项：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta charset="UTF-8">：指定字符编码，缺了中文会变方块或乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端适配基础，没它，手机上页面会缩成一团 -
<title>：虽然不是<meta>，但必须有——它定义浏览器标签页显示的文字，也影响 SEO 标题权重
<body> 外面不能塞任何可见内容
所有用户能看见、能交互的元素（<h1>、<p>、<img>、<button> 等）必须严格放在 <body> 内部。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 把
<script>或<style>直接写在<html>和<head>之间 - 误以为
<header>或<main>能替代<body>的包裹作用 - 在
</body>之后再写<div>——这部分会被浏览器自动移到<body>末尾，但语义已毁，DOM 操作可能出错
结构不是装饰，是浏览器解析和辅助技术依赖的契约。哪怕只少一个 <meta charset>，或者 lang 值写成 "zh"（非标准），都可能让某个用户群体完全无法正常使用页面。
