练习:
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>