代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="first-directory">
<li>JavaScript
<ol>
<li>第一章
<ul>
<li>const</li>
<li>let</li>
</ul>
</li>
<li>第二章
<ul>
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol>
<li>第一章
<ul>
<li>class</li>
<li>package</li>
</ul>
</li>
<li>第二章
<ul>
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>
</body>
</html>```
效果图：
这个列表可以分为三层，最外层的无序列表:
`<ul><li>JavaScript</li><li>Java</li></ul>`
<ul><li>JavaScript</li><li>Java</li></ul>
中间层的有序列表:
`<ul><li>JavaScript<ol><li>第一章</li><li>第二章</li></ol></ul>`
<ul><li>JavaScript<ol><li>第一章</li><li>第二章</li></ol></ul>
第三层无序列表:
`<ul><li>JavaScript<ol><li>第一章<ul><li>const</li><li>let</li></ul></li></ol></ul>`
<ul><li>JavaScript<ol><li>第一章<ul><li>const</li><li>let</li></ul></li></ol></ul>
1、不同类型的有序列表
<ol></ol>数字列表
<ol type="A"></ol>字母列表
<ol type="a"></ol>小写字母列表```
2、不同类型的无序列表
<ul type="disc"></ul>
<ul type="circle"></ul>
<ul type="square"></ul>```