参考资料

  1. HTML DOM 重置表单
  2. HTML DOM 返回一个button所属表的ID 实例
  3. HTML DOM 返回文档中锚的数目
  4. HTML DOM获得下拉列表的选项数量
  5. HTML DOM 返回图像映射的某个区域的hostname实例
  6. HTML DOM 改变image的src
  7. HTML DOM对单个单元格的内容水平对齐
  8. HTML DOM 元素

HTML DOM 根节点格式化

根节点介绍

HTML文档的根节点是<html>元素，它是DOM树的最顶层节点，包含整个文档内容。

主要标签

  • <html>: 文档根元素

  • <head>: 包含元信息和引用

  • <body>: 包含可见内容

基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

功能特性

  1. 定义文档类型和语言

  2. 包含文档元信息

  3. 组织页面结构

  4. 提供CSS和JavaScript的作用域

CSS扩展

可以通过根选择器:root或html元素来设置全局CSS变量和样式：

:root {
    --main-color: #06c;
    --padding: 15px;
    font-size: 16px;
}

html {
    scroll-behavior: smooth;
}

示例说明

1. 基本结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

2. 使用CSS变量

<!DOCTYPE html>
<html>
<head>
    <style>
        :root {
            --primary-color: blue;
            --secondary-color: green;
        }
        
        .box {
            color: var(--primary-color);
            border: 1px solid var(--secondary-color);
        }
    </style>
</head>
<body>
    <div class="box">这是一个带样式的盒子</div>
</body>
</html>

3. JavaScript访问根节点

// 获取根元素
const rootElement = document.documentElement;

// 修改根元素属性
rootElement.lang = "en";

// 添加CSS类
rootElement.classList.add("dark-theme");

根节点格式化是HTML文档的基础，正确的结构有助于浏览器解析和渲染页面。

TAG：节点文档结构格式化元素内容信息基本页面示例