分层列表，跨行列表格，试卷页面 的实现过程

1. 列表的实现

我要完成的作业是酱紫啦：

• ok，来第一步 先实现最外层的连个大标题 Javascript 和 Java

<ul>    
     <li>Javascript</li>    
    <li>Java</li>
</ul>

• 实现二级菜单有序列表

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

• 实现第三层的 无序列表

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

ok完成了！

知识点总结 ** 无需列表符号**：

• Disc 无序列表符号

<h4>Disc 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
</ul>  

实心黑圈圈

• Circle 无序符号列表

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
   <li>苹果</li>
</ul>

空心圈圈

• Square 无序符号列表:

<h4>Square 项目符号列表: </h4>
<ul type="square">
 <li>苹果</li>
</ul>  

方框实心黑点

2. 现在来实现一个跨行、列的表格，如下：

其实这个没什么难点
只要知道这些：

• 表格的模板

<table>   
    <caption>这里写上表格的标题</caption>    
    
   <thead>  //表格的头部       
       <tr>  //一行           
           <th></th>  //一列      
       </tr>    
  </thead>    
  
  <tbody>  //表格的身体     
          <tr>  //一行       
　　　　　 <td></td>  //一列    
　　　</tr>    
　</tbody>    

　<tfoot>  //表格的尾部    
　　<tr> //一行        
　　<td></td> 一列    
　　</tr>    
　</tfoot>
</table>

跨行操作：

• rowspan : 用来合并行,表示表格占得行数

• colspan: 用来合并列,表示表格占得列数

• 实现表格的头部

<table border="2"> 
     <caption>购物车</caption>
     <thead> 
          <tr> <th rowspan="2">名称</th>
          <th colspan="2">2016-11-22</th> 
          <th rowspan="2">小计</th> 
         </tr> 
         <tr> 
        <td>重量</td> 
       <td>单价</td> 
      </tr> 
   </thead>
</table>

• 接下来实现　中部　和尾部，过程比较简单，这里就不细说了，请见我的github地址