下面我們來介紹一下如何實現下圖所示的列表

list.png

Step 1

觀察所需完成列表的結構和構成
經過前期 html 基礎知識的學習，可將列表進行如下簡單劃分

列表.png

觀察所需完成列表可知，該列表由無序列表和有序列表嵌套構成。

Step 2

將整個列表由外到內進行如下分解：
首先，最外層是兩個無序列表項，且無序列表前的符號為實心圓點。則第一層代碼如下：

<ul type="disc">
  <li>JavaScript</li>
  <li>Java</li>
</ul>

運行結果：

<ul type="disc">
<li>JavaScript</li>
<li>Java</li>
</ul>

然后，每一個無序列表包含兩個有序列表項，且有序列表前的符號為從1開始的阿拉伯數字。則第二層代碼如下：

<ul type="disc">
    <li>JavaScript
     <ol type="1" start="1">
       <li>第一章</li>
        <li> 第二章</li>
     </ol>
    </li>
    <li>Java
        <ol type="1" start="1">
            <li>第一章</li>
            <li> 第二章</li>
        </ol>
    </li>
</ul>

注意：無序列表的默認符號為實心原點，而有序列表序號默認從1開始，所以以上代碼中，無序列表的type 和有序列表的 start 可以不寫。
運行結果：

<ul type="disc">
<li>JavaScript
<ol type="1" start="1">
<li>第一章</li>
<li> 第二章</li>
</ol>
</li>
<li>Java
<ol type="1" start="1">
<li>第一章</li>
<li> 第二章</li>
</ol>
</li>
</ul>

最后，第二層的每個有序列表包含兩個無序列表項，且無序列表前的符號為實心方塊。則最終代碼如下：

<ul type="disc">
    <li>JavaScript
     <ol type="1" start="1">
       <li>第一章
         <ul type="square">
             <li>const</li>
             <li>let</li>
         </ul>
        </li>
        <li> 第二章
           <ul type="square">
               <li>function</li>
               <li>object</li>
           </ul>
        </li>
     </ol>
    </li>
    <li>Java
        <ol type="1" start="1">
            <li>第一章
               <ul type="square">
                   <li>class</li>
                   <li>package</li>
               </ul>
            </li>
            <li> 第二章
              <ul type="square">
                  <li>private</li>
                  <li>public</li>
              </ul>
            </li>
        </ol>
    </li>
</ul>

運行結果：

<ul type="disc">
<li>JavaScript
<ol type="1" start="1">
<li>第一章
<ul type="square">
<li>const</li>
<li>let</li>
</ul>
</li>
<li> 第二章
<ul type="square">
<li>function</li>
<li>object</li>
</ul>
</li>
</ol>
</li>
<li>Java
<ol type="1" start="1">
<li>第一章
<ul type="square">
<li>class</li>
<li>package</li>
</ul>
</li>
<li> 第二章
<ul type="square">
<li>private</li>
<li>public</li>
</ul>
</li>
</ol>
</li>
</ul>

這樣整個列表就完成啦！
代碼點這里
運行結果點這里