前言：

本文内容：列表标签、表格标签、媒体元素

推荐免费HTML5基础讲解视频：【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

列表标签

  • 什么时列表

    • 列表就是信息资源的一中展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，一边浏览者能更快捷地获得相应的信息。

  • 列表的分类

    • 无序列表
    • 有序列表
    • 定义列表
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
    </head>
    <body>
    <!--有序列表
        应用范围：试卷，问答等
    -->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <hr>
    <!--无序列表
        应用范围：导航，侧边栏等
    -->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <hr>
    <!--自定义列表
    dl: 标签
    dt: 列表名称
    dd: 列表内容
    应用范围：网站底部
    -->
    <dl>
        <dt>自定义列表</dt>

        <dd>列表1</dd>
        <dd>列表2</dd>
        <dd>列表3</dd>
    </dl>
    </body>
    </html>

表格标签

  • 为什么使用表格

    • 简单通用
    • 结构稳定

  • 基本结构

    • 单元格
    • 行
    • 列
    • 跨行
    • 跨列
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
    <!--表格 table
        行： tr
        列： td
        跨行：rowspan
        跨列：colspan

    -->
    <table border="1">
        <tr>
            <td colspan="3" align="center">成绩</td>
        </tr>

        <tr>
            <td rowspan="2">小王</td>
            <td>语文</td>
            <td>数学</td>
        </tr>

        <tr>
            <td>98</td>
            <td>100</td>
        </tr>

    </table>
    </body>
    </html>

媒体元素

  • 视频元素

    • video

  • 音频元素

    • audio
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>媒体元素</title>
    </head>
    <body>
    <!--视频
        src 资源
        controls 控制
        autoplay 自动播放
    -->
    <video src="../resource/video1.mp4" controls autoplay width="350px" height="200px"></video><br/>
    <!--音频
        src 资源
        controls 控制
        autoplay 自动播放
    -->
    <audio src="../resource/music1.flac" autoplay controls></audio>
    </body>
    </html>