【HTML】二、列表、表格
文章目录
- 1、列表
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
- 2、表格
- 2.1 定义
- 2.2 表格结构标签
- 2.3 合并单元格
1、列表
列表分为：
- 无序列表
- 有序列表
- 定义列表：一个标题下有多个小分类
1.1 无序列表
ul嵌套li，ul是无序列表，li是列表条目
<body>
<ul>
<li>开发</li>
<li>测试</li>
<li>发布</li>
</ul>
</body>
效果：
注意，ul标签里，只能嵌套li标签，不能嵌套h、img等其他标签，但li标签里，可以包裹任何内容
1.2 有序列表
ol嵌套li，ol是有序列表，li是列表条目
<body>
<ol>
<li>开发</li>
<li>测试</li>
<li>发布</li>
</ol>
</body>
效果：
同样的，ol标签里，只能嵌套li标签，但li标签里，可以包裹任何内容
1.3 定义列表
一个标题下有多个内容，如很多官网底部的：
dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情
<body>
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
<dd>维修服务价格</dd>
<dd>订单查询</dd>
<dd>以旧换新</dd>
</dl>
</body>
效果：
注意：dl里面只能包含dt和dd，而dt和dd则可以包含任何内容
2、表格
2.1 定义
类似excel，用来展示数据，语法上：table嵌套tr，tr嵌套td/th，th是表头，有加粗和居中效果
比如写上面这个表格，一行一行写：
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
</body>
2.2 表格结构标签
此外，还有三个表格结构标签：
加上他们的好处是：
- 让表格结构更加清晰
- 方便为这三大块分别设置不同的CSS样式
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
以上代码，在前端展示效果上，和不加结构标签一模一样
2.3 合并单元格
合并时，保留最左最上的单元格（如上图的跨行合并，保留最上的单元格，跨列合并，则保留最左的单元格）
- 跨行合并，保留最
上的单元格，添加属性rowspan，其值为需要合并的单元格数量，删掉被合并的其他单元格 - 跨列合并，保留最
左的单元格，添加属性colspan，其值为需要合并的单元格数量，删掉被合并的其他单元格
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> 删掉被合并的其他单元格-->
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
</body>
效果：
注意，合并不能跨越表格结构标签，比如上面把李四和总结两个格子合并，就横跨了tbody和tfoot