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：跨列合并→水平方向合并
Ø 可以跨结构标签合并单元格吗？
	• 不能