前端基础HTML-基础标签2

2.1 无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。 Ø 标签组成：

    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>

显示特点： • 列表的每一项前默认显示圆点标识
注意点：
• ul标签中只允许包含li标签
• li标签可以包含任意内容

3.1 有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。

    <ol>
        <li>张三:100</li>
        <li>李四: 80</li>
    </ol>

显示特点：
• 列表的每一项前默认显示序号标识
注意点：
• ol标签中只允许包含li标签
• li标签可以包含任意内容

4.1 自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

显示特点：
• dd前会默认显示缩进效果
注意点：
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容

表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

 <!-- table 包含 tr, tr包含td -->
    <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>150分</td>
            <td>没有郭德纲相声早黄了, 有了郭德纲, 相声更黄了</td>
        </tr>
    </table>

注意点：
• 标签的嵌套关系：table > tr > td

表格相关属性

注意点： • 实际开发时针对于样式效果推荐用CSS设置

表格标题和表头单元格标签

 <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>
        </tr>
    </table>

注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）

表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

注意点：
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略

    <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>

合并单元格-思路

合并单元格步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
   • 上下合并→只保留最上的，删除其他
   • 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置：
   跨行合并（rowspan）或者跨列合并（colspan）
   
   注意点：
   • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

 <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>