<html>标签是HTML文档的强制根容器，缺失会导致浏览器进入怪异模式，引发document.documentElement错误、:root伪类失效、<meta charset>乱码等问题；它必须成对使用、不可自闭合或嵌套，且支持lang等全局属性但有语义约束。
<html> 标签不是可有可无的装饰，它是整个文档的强制根容器——没有它，浏览器无法识别这是一份合法 HTML 文档，解析行为会退化为“怪异模式”（Quirks Mode），样式和脚本行为可能意外失效。
为什么必须用 <html> 包裹全部内容
浏览器在解析时，会先查找 <html> 开始标签作为文档结构的锚点。如果缺失，它可能把第一个块级元素（比如 <body> 或 <h1>）误认为根节点，导致：
-
document.documentElement指向错误节点，JavaScript 获取根元素失败 - CSS 中的
:root伪类不生效，全局变量（--color-primary）无法继承 -
<head>内容可能被忽略或错位，<meta charset="utf-8">失效引发乱码
<html> 上能合法设置哪些属性
它支持全局属性（如 lang、class、id），但有特殊语义约束：
-
lang必须设，且应精确到子语言（如lang="zh-CN"而非笼统的lang="zh"），影响屏幕阅读器发音和搜索引擎分词 -
dir仅在需要显式覆盖文本方向时使用（如dir="rtl"用于阿拉伯语页面），不要依赖它替代 CSS 的direction -
translate设为"no"可禁用浏览器自动翻译，但只对当前元素及后代生效，不能跨<iframe>
常见错误：嵌套错位与自闭合误用
<html> 是严格成对标签，绝不允许自闭合（<html/> 是无效写法）；也不得嵌套在其他标签内（哪怕只是调试时随手加了个 <div> 包住它）。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<div><html>...</html></div>→ 浏览器会自动剥离外层<div>，但 DOM 树已受损 - 遗漏结束标签：
<html><head>...</head><body>...→ 后续所有标签都会被当作<html>的子元素，<body>可能被吞掉 - 多个
<html>：HTML 解析器只认第一个，其余被忽略或转为文本节点
真正容易被忽略的是它的“不可见性”——你几乎从不给它写样式或绑定事件，但它决定了整个页面的坐标系、字体继承链和渲染上下文。一旦出问题，往往表现为整页布局塌陷或脚本静默失败，而不是报错提示。
