如何用HTML编写树状图？

在HTML中创建树状图（也称为树形结构或层级列表）通常使用无序列表（`

）和有序列表（

`），通过嵌套这些列表，可以构建出层次分明的树状结构，以下是一个简单的示例，展示了如何在HTML中编写树状图：

树状图示例
一级节点1
二级节点1.1
三级节点1.1.1
三级节点1.1.2
二级节点1.2
一级节点2
二级节点2.1
三级节点2.1.1
三级节点2.1.2

在这个示例中，我们使用了三个级别的节点来构建树状图，每个级别的节点都嵌套在其父节点的列表项中，从而形成了层次结构。

为了增强树状图的可读性和美观性，可以使用CSS样式对树状图进行格式化，可以为不同级别的节点设置不同的缩进、字体大小或颜色等，以下是一个简单的CSS示例：

ul {
  list-style-type: none; /* 移除默认的列表符号 */
  padding: 0; /* 移除默认的内边距 */
}
li {
  margin-left: 20px; /* 为每个列表项设置左边距 */
}
li::before {
  content: '•'; /* 在每个列表项前添加自定义符号 */
  color: #333; /* 设置符号的颜色 */
  display: inline-block; /* 使符号与文本在同一行显示 */
  width: 1em; /* 设置符号的宽度 */
  margin-left: -1em; /* 将符号左移到列表项的左侧 */
}
/* 根据需要为不同级别的节点添加更多样式 */
li li::before {
  content: '–'; /* 二级节点前的符号 */
}
li li li::before {
  content: '—'; /* 三级节点前的符号 */
}

将上述CSS添加到HTML文档的`