练习：

1、说明下面这个列表是如何实现的：

列表

2、说明以下表格是如何实现的：

表格

练习一

练习一主要是对于列表的练习。在HTML中，列表主要分为有序和无序两种，非别用block级标签<ol>和<ul>标记，而列表中的条目则用标签<li>标记。观察练习提供的图片，不难从它的缩进等级发现这是一个三层嵌套的列表，因此html代码如下：

<ul>
    <li>JavaScript</li>
    <ol>
        <li>第一章</li>
        <ul>
            <li>const</li>
            <li>let</li>
        </ul>
        <li>第二章</li>
        <ul>
            <li>function</li>
            <li>object</li>
        </ul>
    </ol>
    <li>Java</li>
    <ol>
        <li>第一章</li>
        <ul>
            <li>class</li>
            <li>package</li>
        </ul>
        <li>第二章</li>
        <ul>
            <li>private</li>
            <li>public</li>
        </ul>
    </ol>
</ul>

完整的源码在这里以及效果。列表的嵌套实际上就是用一套<ol>或<ul>列表放在本该安置<li>的位置，是一种递归。

练习二

练习二是一个表格，表格中有几项是跨行／列的。HTML中的表格用block级标签<table>标记，默认无边框。然后每一行都用<tr>标记，最后该行中的每个单元格用<td>标记。除此之外，<th>作为与<td>同等级的标签标记表头单元格，<caption>作为与<tr>同级的标签标记表格的标题。无论一个单元格是跨行还是夸列，都应该在它所占有的最左上方的单元格的位置使用<td>或<th>标签标记（换句话说，是在其html代码中第一次出现的那条标记中），并配置rowspan/colspan属性：

<table border=1>
    <caption>购物车</caption>
    <tr>
        <th rowspan=2>名称</th>
        <th colspan=2>2016-11-22</th>
        <th rowspan=2>小计</th>
    </tr>
    <tr>
        <th>重量</th>
        <th>单价</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>2公斤</td>
        <td>6元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <th colspan=3>总价</th>
        <td>27元</td>
    </tr>
</table>

完整的源码在这里以及效果。