HTML学习03之列表，表格，媒体元素_列表表格媒体元素-CSDN博客

本文链接：https://blog.csdn.net/ZXS1002/article/details/122527630

一、列表是什么？

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

无序列表
有序列表
定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签学习</title>
</head>
<body>
<!--有序列表  快捷建ol+tab-->
<ol>
    <!--子标签都用li-->
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c++</li>
</ol>
<!--无序列表 ul-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>运维</li>
    <li>前端</li>
    <li>c++</li>
</ul>
<!--自定义列表  dl-->
<dl>
    <!--dt列表名称  dd列表内容-->
    <dt>名次</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dt>学科</dt>
    <dd>语文</dd>
    <dd>数学</dd>
    <dd>英语</dd>
    <dt>成绩</dt>
    <dd>100</dd>
    <dd>95</dd>
    <dd>100</dd>
</dl>
</body>
</html>

在这里插入图片描述

二、关于表格

为什么使用表格？
简单通用结构稳定

表格基本结构：

单元格
行
列
跨行
跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<!--表格 table
border表格宽度
行tr
列td
-->
<table border="2px" style="text-align: center">
    <tr>
        <!--colspan 跨列-->
        <td colspan="3" >学生成绩 </td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2">zxs</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>90</td>
    </tr>

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

在这里插入图片描述

三、关于媒体元素

视频元素和音频元素
顾名思义就是看视频，听音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频视频频标签
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/健康教育.MP4" controls autoplay></video>
<audio src="../resources/audio/海阔天空.mp3" controls autoplay></audio>
</body>
</html>