HTML----列表、表格和媒体元素
列表
什么是列表
列表是信息资源的一种展现形式。它可以使信息结构化和条理化,并以列表的形式展现出来,以便浏览者能更快的获得相应的信息。
列表的分类
无序列表
定义
无序列表是一个没有特定顺序的列表项的集合,也称为项目列表。在无序列表中,各个列表之间属于并列关系,没有先后顺序之分,它们之间以一个项目符号来标记。每个项之间是以实心小圆点点区分的。
#语法结构
<ul>
<li></li>
<li></li>
</ul>
无序列表的特性
- 没有顺序,每个<li>标签独占一行(块元素)
- 默认<li>标签项前面有个实心小圆点
- 一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块
有序列表
定义
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序来排列定义。
#语法结构
<ol>
<li></li>
<li></li>
</ol>
有序列表的特性
- 有顺序,每个<li>标签独占一行(块元素)
- 默认<li>标签项前面有顺序标记
- 一般用于排序类型的列表,如试卷、问卷选项等
定义列表
定义
是名词和描述的关系,简单来说可以把他比作是总分结构
#语法结构
<dl>
<dt>总</dt>
<dd>分</dd>
</dl>
示例
<dl>
<dt>水果</dt>
<dd>葡萄</dd>
<dd>苹果</dd>
<dd>梨</dd>
</dl>
定义列表的特性
- 没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)
- 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况
列表对比
类型 | 说明 | 项目符号 |
---|---|---|
无序列表 | 以<ul>标签来实现 以<li>标签表示列表项 | 无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容 |
有序列表 | 以<ol>标签来实现 以<li>标签表示列表项 | 有序列表ol-li一般用于显示带有顺序编号的特定场合 |
定义列表 | 以<dl>标签来实现 以<li>标签定义列表项 以<dd>标签定义内容 | 定义列表一般适用于带有标题和标题解释性内容的场合 |
示例
<!DOCTYPE html>
<html>
<head>
<title>无序列表</title>
</head>
<body>
<!-- 无序列表 -->
<!-- 快捷键 ul>li*需要的列表数 -->
<ul>
<li>元宵佳节</li>
<li>花开中国</li>
<li>感受春天</li>
<li>茅台立春酒</li>
</ul>
<!-- 有序列表 -->
<!-- 快捷键ol>li*需要的列表数 -->
<ol>
<li>元宵佳节</li>
<li>花开中国</li>
<li>感受春天</li>
<li>茅台立春酒</li>
</ol>
<!-- 定义列表 -->
<!-- 快捷键dl>dd*需要的列表数 -->
<dl>
<dt>水果</dt>
<dd>菠萝</dd>
<dd>梨</dd>
<dd>草莓</dd>
</dl>
</body>
</html>
表格
为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
基本语法
<table>
<tr>
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
...
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
...
</tr>
</table>
表格的跨列
<table>
<tr>
#n表示跨的列数和行数
<td colspan = "n">(跨列)单元格内容</td>
</tr>
<tr>
<td rowspan = "n">(跨行)单元格内容</td>
</tr>
</table>
媒体元素
分类
视频元素
video
语法
<video src = "视频路径" controls></video>
# controls表示提供播放、暂停和音量的控件
自动播放属性
autoplay
<video autoplay>
<source src = "视频路径" type = "设置视频类型"/>
</video>
音频元素
audio
语法
<audio src = "音频路径" controls></audio>
# 和视频一样,controls负责提供播放、暂停和音量控件
HTML5的结构元素
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚底区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<iframe>内联框架
作用
<iframe>属性(实现页面间的相互跳转)
使用方法
1. 在被打开的框架上加name属性
<iframe name = "mainFrame" src = "框架路径"/>
2. 在来链接上设置target目标窗口属性为希望显示的框架窗口名
<a href = "框架路径" target = "mainFrame">下边显示第二页</a>
示例
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
</head>
<body>
<!-- tr 表示行 td表示单元格 -->
<table border="1">
<tr>
<td colspan="2">学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
</tr>
</table>
<!-- 媒体元素 controls 播放控件(播放按钮等) muted autoplay-->
<video src="" controls muted autoplay></video>
<!-- 控件 controls mute autoplay -->
<audio src="" controls muted autoplay loop></audio>
<!-- 内联框架 把其他的内容引用到自己的也米娜里 -->
<a href="https://www.bilibili.com/" target="myIframe">B站</a>
<iframe src="http://www.taobao.com", height="500", width="1100" name = "myIframe" conntrol muted autoplay>淘宝引入</iframe>
</body>
</html>