HTML基础-列表标签和表格标签
二、列表标签
2. 列表的应用场景
Ø 场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等
Ø 特点:按照行的方式,整齐显示内容
Ø 种类:无序列表、有序列表、自定义列表
小结:
Ø 无序列表由几个标签组成?分别表示什么?
• ul标签:表示无序列表的整体
• li标签:表示无序列表的每一项
Ø 无序列表标签的嵌套规范是什么?
• ul标签中只允许嵌套li标签
• li标签中可以嵌套任意内容
2.1 无序列表
3.1 有序列表
小结
Ø 有序列表由几个标签组成?分别表示什么?
• ol标签:表示无序列表的整体
• li标签:表示无序列表的每一项
Ø 有序列表标签的嵌套规范是什么?
• ol标签中只允许嵌套li标签
• li标签中可以嵌套任意内容
4.1 自定义列表
小结:
Ø 自定义列表由几个标签组成?分别表示什么?
• dl标签:表示自定义列表的整体
• dt标签:表示自定义列表的主题
• dd标签:表示对于主题的每一项内容
Ø 自定义列表标签的嵌套规范是什么?
• dl标签中只允许嵌套dt/dd标签
• dt/dd标签中可以嵌套任意内容
上述的三种列表中使用场景
测试如下:
二:表格标签
1.1 表格的基本标签
小结:
Ø 完成一个简单的表格,需要由几个标签组成?分别表示什么?
• table标签:表格整体
• tr标签:表格每行
• td标签:对于主题的每一项内容
Ø 表格基本标签的嵌套规范是什么?
• table > tr > td
2.1 表格相关属性
小结:
Ø 完成一个简单的表格,需要由几个标签组成?分别表示什么?
• table标签:表格整体
• tr标签:表格每行
• td标签:对于主题的每一项内容
Ø 表格基本标签的嵌套规范是什么?
• table > tr > td
小结:
Ø 给表格添加边框,可以使用什么属性完成?
• border属性
Ø 设置表格整体的宽高,可以使用什么属性完成?
• width属性:表格整体的宽度
• height属性:表格整体的高度
3.1 表格标题和表头单元格标签
小结:
Ø 表示表格整体大标题,使用什么标签完成?书写在什么位置?
• 表格整体大标题:caption标签
• 书写在table标签内部
Ø 在表格第一行设置一列的小标题,使用什么标签完成?书写在什么位置?
• 表头单元格:th标签
• 书写在tr标签内部(用于替换td标签)
4.1 表格的结构标签(了解)
小结:
Ø 表格的结构标签分别有哪些?表示什么含义?
• thead:表格头部
• tbody:表格主体
• tfoot:表格底部
Ø 表格结构标签书写在什么位置?
• 表格结构标签写在table标签内部
• 表格标签内部用于包裹tr标签
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>测试表格的基本标签</h2>
<table>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真帅气</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>可以可以</td>
</tr>
</table>
<h2>测试表格的相关属性:</h2>
<table border="1" width="600" height="400">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真帅气</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>可以可以</td>
</tr>
</table>
<h2>测试表格标题和表头单元格:</h2>
<table border="1" width="600" height="400">
<caption>学生成绩单</caption>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真帅气</td>
</tr>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>可以可以</td>
</tr>
</table>
<h2>测试表格的结构标签</h2>
<table border="1" width="600" height="400">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐真帅气</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>可以可以</td>
</tr>
</tfoot>
</table>
</body>
</html>
测试结果如下:
5.1 合并单元格-思路
5.2 合并单元格-代码实现
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>跨行合并:</h2>
<table border="1" width="600" height="400">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐真帅气</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>可以可以</td>
</tr>
</tfoot>
</table>
<h2>跨行合并:</h2>
<table border="1" width="600" height="400">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小哥哥</td>
<td >100分</td>
<td>小哥哥真帅气</td>
</tr>
<tr>
<td>小姐姐</td>
<td >100分</td>
<td>小姐姐真帅气</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
</body>
</html>
测试结果:
关于表格的大结:
Ø 合并单元格的步骤分哪几步?
1. 明确合并哪几个单元格
2. 通过左上原则,确定保留谁删除谁
• 上下合并→只保留最上的,删除其他
• 左右合并→只保留最左的,删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
• rowspan:跨行合并→垂直方向合并
• colspan:跨列合并→水平方向合并
Ø 可以跨结构标签合并单元格吗?
• 不能