代碼：
<!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>數(shù)字列表
<ol type="A"></ol>字母列表
<ol type="a"></ol>小寫字母列表```
2、不同類型的無序列表
<ul type="disc"></ul>
<ul type="circle"></ul>
<ul type="square"></ul>```