HTML5-列表、表格和媒体元素

0 前言

       HTML不仅可以用来定义网页的结构和内容，还可以用来展示不同类型的数据和媒体。在本文中，我们将介绍HTML中常用的三种元素：列表，表格和媒体元素。列表可以用来显示有序或无序的项目，如商品清单，待办事项，目录等。表格可以用来显示结构化的数据，如统计数据，报表，日程安排等。媒体元素可以用来嵌入图片，音频，视频等多媒体内容，为网页增加视觉和听觉效果。我们将学习如何使用不同的标签来创建这些元素，并了解它们的属性和样式。

1 HTML列表

1.1 列表定义

1）列表定义：列表是一种特别的对象的集合。
2）集合定义：集中在一起，再合二为一（聚集）。
3）聚集定义：多个列（信息资源）排在一起。
4）信息资源定义：一堆数据，可能是字符，可能是图片等等。
5）HTML实现列表的方式：无序列表、有序列表和定义列表。

1.2 无序列表

定义：没有顺序的列表。
实现：

<ul>
    <li>九</li>
    <li>万</li>
</ul>

结果：
略
特性：
①没有顺序每个<li>标签独占一行（块元素）。
②默认<li>标签项前面有个实心小圆点。
③应用场景：常应用在导航功能中。

1.3 有序列表

定义：有顺序的列表
实现

<ol>
	<li>九</li>
	<li>万</li>
</ol>

结果：
略
特性：
①有顺序，每个<li>标签独占一行（块元素）。
②默认<li>标签项前面有顺序标记。
③应用场景：一般用于排序类型的列表，例如试卷，调查问卷等等。

1.4 定义列表

定义：存在某种关系（包含与被包含关系）的列表。
实现

<dl>
    <dt>名字</dt>
    <dd>九万</dd>
</dl>

结果：
略
特性：
①没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）。
②默认没有标记。
③应用场景：一般用于存在包含与被包含的关系中。

1.5 三种类型的列表区别

类型	区别
无序列表	以<ul>标签来实现，<li>标签实现列表项
有序列表	以<ol>标签来实现，<li>标签实现列表项
定义列表	以<dl>标签来实现，<dt>标签定义列表项，<dd>标签定义内容

2 HTML表格

2.1 表格

定义：有行有列，多个单元格组成。
缘由：可以清晰的将多个信息资源组成在一起。

2.2 表格语法结构

<table border="1px">
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>九万</td>
        <td>男</td>
    </tr>
</table>

2.3 表格跨列

在单元格设置colspan的值以达成跨列。

2.4 表格跨行

在单元格设置rowspan的值以达成跨行。

2.5 表格跨行与跨列

<table boeder="1px">
    <tr>
        <th colspan="3">考试成绩</th>
    </tr>
    <tr>
        <td rowspan="2">九万</td>
        <td>html</td>
        <td>100</td>
    </tr>
    <tr>
        <td>java</td>
        <td>100</td>
    </tr>
</table>

3 HTML媒体元素

3.1 HTML媒体元素应用场景

一般是应用于网站中的音乐文件或是视频文件。

3.2 HTML5媒体元素标签

视频元素（标签）：video
音频元素（标签）：audio

3.3 video

3.4 audio

4 HTML结构元素

常见页面布局分析：页面头部，页面主体和页面底部。
HTML5结构元素的代码实现
页面头部：<header></header>
页面主体：<section></section>
页面底部：<footer></footer>