html做一个目录

HTML创建目录树的基本结构

HTML本身并不具备创建目录树的功能，但我们可以通过结合CSS和JavaScript来实现这一需求，以下是一个简单的示例：

1、使用HTML创建一个无序列表(ul)作为目录树的主体：

<ul>
  <li>一级标题1
    <ul>
      <li>二级标题1</li>
      <li>二级标题2</li>
    </ul>
  </li>
  <li>一级标题2
    <ul>
      <li>二级标题3</li>
      <li>二级标题4</li>
    </ul>
  </li>
</ul>

2、使用CSS设置列表样式，使其呈现为目录树的形式：

ul {
  list-style-type: none;
}
li > ul {
  display: none;
}
li > a {
  text-decoration: none;
}
li > a:hover > ul {
  display: block;
}

3、在HTML中添加锚点链接，以便于页面跳转：

<ul>
  <li><a href="section1">一级标题1</a>
    <ul>
      <li><a href="subsection1">二级标题1</a></li>
      <li><a href="subsection2">二级标题2</a></li>
    </ul>
  </li>
  <li><a href="section2">一级标题2</a>
    <ul>
      <li><a href="subsection3">二级标题3</a></li>
      <li><a href="subsection4">二级标题4</a></li>
    </ul>
  </li>
</ul>

相关问题与解答

1、如何让目录树在页面加载时自动展开？

答：可以使用JavaScript的window.onload事件或者jQuery的$(document).ready()事件来实现目录树在页面加载时自动展开，使用jQuery的话，可以在HTML文件中添加以下代码：

$(document).ready(function() {
  $('ul > li > a').click();
});

这段代码会在文档加载完成后触发所有锚点链接的点击事件，从而实现目录树的自动展开。