是html文档唯一合法根元素，强制作为整个文档容器，所有标签必须嵌套其内；它定义解析契约、影响dom结构、css基准（如rem）、scroll事件绑定及可访问性，不可省略或替换。

根标签 是整个文档的容器，不是可选包装，而是强制嵌套边界

浏览器解析 HTML 时， 是唯一合法的根元素，所有其他标签（包括 和 ）都必须直接或间接位于它内部。没有它，文档就不是有效的 HTML5；即使某些浏览器能“容错渲染”，实际 DOM 树里也会自动补上一个隐式 ，但此时 document.documentElement 可能行为异常，脚本获取根节点容易出错。

• 必须紧跟在 后面，中间不能有文本、注释或空格（否则触发怪异模式）
• 它支持 lang 属性（如 ），影响屏幕阅读器发音、字体回退和 SEO 语义，不写不会报错但会丢失关键可访问性信息
• 不能嵌套另一个 —— 即使在 iframe 里，子页面也需独立的 ，父页里的 不会继承或覆盖

和 的职责边界常被混淆

很多人把样式或事件监听直接挂在 上，误以为它就是“页面容器”。实际上， 才是真正的视口级容器：CSS 中的 height: 100% 要生效，必须让 和 都显式设高；scroll 事件默认绑定在 （而非 ）上，尤其在 Safari 和旧版 Chrome 中表现明显。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给 设 margin: 0 不能清除默认边距，真正起作用的是 或重置规则里的 * { margin: 0; }
• document.body 是常用入口，但 document.documentElement 才对应 元素，操作全屏、滚动锚点或动态 class 时别用错对象
• 服务端渲染（SSR）中若漏掉 开闭标签，React/Vue 的 hydrate 会失败并抛出 Hydration failed 错误

为什么 不能省略、也不能自定义

HTML 规范硬性规定：只有一个根元素，且必须是 。它不是语义标签，而是解析器契约——浏览器靠它识别文档结构层级，DOM API 和 CSS 选择器引擎都依赖这个固定锚点。试图用 <div id="root"> 替代，会导致 <code>document.querySelector(':root') 返回 null，CSS 中的 :root 伪类失效，rem 单位基准丢失。

• 没有语义含义，不参与 ARIA role 映射，加 role="document" 属于冗余甚至干扰
• 它不可见、不可 focus、不响应 click（除非显式加 pointer-events: all），但它是 getBoundingClientRect() 计算的原始参考系
• 构建工具（如 Vite、Webpack）生成的 index.html 模板里若漏写 ，开发服务器可能不报错，但 Lighthouse 会标记“缺失根元素”为严重可访问性问题

真正容易被忽略的是：它既不是装饰性容器，也不是可绕过的语法糖。从 DOM 构建、样式继承到 JS 运行时， 是所有逻辑的起点锚点 —— 少它，整个页面就失去坐标系。