Day二：HTML基础（继续HTML标签的学习）-CFANZ编程社区

一：列表标签

学习路径：

列表的应用场景
无序列表
有序列表
自定义列表

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>