HTML列表

下面我们来介绍一下如何实现下图所示的列表

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>

这样整个列表就完成啦！
代码点这里
运行结果点这里