文章目录
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>