必须存在且带lang属性，因为它是文档根节点，缺失将导致dom树异常、屏幕阅读器发音错误、seo语言判断失效；lang="zh-cn"为中文网页规范写法，不可省略或简写。
构建 HTML 文档结构时，、、、<title></title> 这四个标签缺一不可；漏掉任意一个，浏览器仍可能渲染，但语义不完整、SEO 受损、部分辅助技术失效。
为什么 lang 属性？
是整个文档的根节点，所有其他元素都必须嵌套其中。没有它，DOM 树就无法正确建立 —— 浏览器会自动补全，但补全后无法保证 lang 值，影响屏幕阅读器发音和搜索引擎语言判断。
-
lang="zh-CN"是中文网页的推荐写法，不能只写lang="zh"（太宽泛）或留空 - 不要在
里放内容，它只起容器作用 必须紧贴在 <code>前一行，不能嵌套、不能省略
不显示内容，但决定页面如何被解析和呈现。真正不可省的是：<meta charset="UTF-8"> 和 <title></title>。
-
<meta charset="UTF-8">缺失 → 中文乱码概率极高，尤其在本地双击打开 HTML 文件时 -
<title></title>缺失 → 浏览器标签栏显示“无标题文档”，影响书签识别和 SEO 标题抓取 -
<meta name="viewport">在响应式页面中等效于“必选”，否则移动端默认缩放失效 -
<link rel="stylesheet">或<style></style>不是结构必需，但没样式往往等于没布局
HTML 规范明确要求：所有可见内容必须包裹在 内。把 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div> 等直接写在 <code> 和 之外，属于结构错误。
- 浏览器会尝试容错修复（如把孤立
<p></p>移进），但修复逻辑不统一，Firefox 和 Safari 处理方式可能不同 - 服务端渲染（SSR）或静态站点生成器（如 Hugo、Jekyll）可能直接报错退出
- 校验工具（如 W3C Validator）会标为 error，不是 warning
新手最容易忽略的两个隐性结构依赖
它们不表现为标签，但缺失会导致结构事实失效：
写成 <code>（小写）没问题，但写成 <code> 或漏掉末尾空格，在某些旧版 IE 中触发怪异模式（Quirks Mode），让盒模型、行高计算全乱-
<meta charset="UTF-8">必须在最前面（至少要在第一个<title></title>前），否则浏览器已按默认编码（如 ISO-8859-1）解析了部分<title></title>，再遇到 charset 声明也来不及修正
结构标签本身很简单，难的是它们之间的位置、顺序、属性值约束 —— 这些地方不报错，但一出问题就很难定位。
