一:列表标签
学习路径:
- 列表的应用场景
- 无序列表
- 有序列表
- 自定义列表
1.列表的应用场景
- 场景:在网页中按照行展示关联性的内容
- 特点:按照行的方式,整齐显示内容
- 分类:无序排列、有序排列、自定义排列
2.1 无序列表:
- 场景:在网页中表示一组无顺序之分的列表,例如:新闻列表
- 标签组成:(1)ul 表示无序列表的整体,用于包裹li标签; (2)li 表示无序列表的每 一项,用于包含每一行的内容。
- 特点:列表的每一项前默认显示圆点标识。
- 注意:ul标签中只允许包含li标签;li标签可以包含任意内容
<body> <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果</li> <li>火龙果</li> </ul> </body>
3.1有序列表:
- 场景:在网页中表示一组有顺序之分的列表,例如:排行榜。
- 标签组成:ol 表示有序列表的整体,用于包裹li标签;li 表示有序列表的每 一项,用于包含每一行的内容。
- 特点:列表的每一项前默认显示序号标识。
- 注意:ol标签中只允许包含li标签;li标签可以包含任意内容
<body> <ol> <li>张三:100</li> <li>李四:80</li> </ol> </body>
4.1自定义列表:
- 场景:在网页的底部导航中通常会用的列表实现
- 标签组成:dl 表示自定义列表的整体,用于包裹dt/dd标签;dt 表示自定义列表的主题; dd 表示自定义列表针对主题的每一项内容。
- 特点:dd前默认显示缩进。
- 注意:dl标签中只允许包含dt/dd标签;dt/dd标签可以包含任意内容
<body>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物中心</dd>
</body>
二:表格标签:
学习路径:
- 表格的基本标签
- 表格的相关属性
- 表格标题和表头单元格标签
- 表格结构标签(了解就行)
- 合并单元格
1.1表格的基本标签:
- 基本标签:(1) table 表格整体,用于包裹多个tr;(2)tr 表格每行,用于包裹多个td; (3)td 表格单元格,可用于包裹内容。
- 注意:标签的嵌套关系:table>tr>td
2.1表格的相关属性:
- border 数字 边框宽度;
- width 数字 表格宽度;
- height 数字 表格高度
- 注意:推荐使用CSS
<body> <!--table 包含 tr tr包含td--> <table border="1" width="500" height="300"> <tr> <td>姓名</td> <td>成绩</td> <td>评语</td> </tr> <tr> <td>小哥哥</td> <td>100分</td> <td>孩子,真棒啊</td> </tr> <tr> <td>小姐姐</td> <td>120分</td> <td>真真棒</td> </tr> </table> </body>
3.1表格标题和表头单元格标签:
- 场景:在表格中表示整体大标题和一列小标题
- 其他标签:caption 表格大标题 默认表格整体顶部显示;th 表头单元格 用于表格第一列, 内部文字加粗并居中显示
- 注意:caption标签书写在table内部;th标签书写在tr内部(用于替换td标签)
<body> <table border="1"> <caption><strong>学生成绩单</strong></caption> <tr> <!--<td></td>--> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> <tr> <td>张三</td> <td>100</td> <td>第一名</td> </tr> <tr> <td>李四</td> <td>99</td> <td>第二名</td> </tr> <tr> <td>总结</td> <td>郎才女貌</td> <td>成功</td>
4.1表格结构标签(了解就行)
<!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>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!--<td></td>-->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>第一名</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>郎才女貌</td>
<td>成功</td>
</tr>
</tfoot>
</table>
</body>
</html>
5.1合并单元格:
- 场景:将水平或垂直多个单元格合并成一个单元格
- 步骤:(1)明确合并哪几个单元格; (2)通过左上原则,确定保留谁删谁;上下合并→只保留最上的,删除其他; 左右合并→只保留最左的,删除其他。(3)给保留的单元格设置:跨行合并(rowspan)或跨列合并(colspan)
- 注意:只有一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、 tbody、tfoot)
<!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> <table border="1"> <caption><strong>学生成绩单</strong></caption> <thead> <tr> <!--<td></td>--> <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 colspan="2">郎才女貌</td> </tr> </tfoot> </table> </body> </html>