html初学第三课列表、表格、视频和音频、内联框架

最新推荐文章于 2021-06-30 02:17:17 发布

珹先生

最新推荐文章于 2021-06-30 02:17:17 发布

阅读量291

点赞数 1

分类专栏：初学文章标签： html

本文链接：https://blog.csdn.net/giantleech/article/details/111635638

版权

初学专栏收录该内容

136 篇文章 4 订阅

订阅专栏

html初学第三课

一、列表

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

1、无序列表

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
具体使用如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul>
			<li>数据展示</li>
			<li>没有意义</li>
			<li>仅供参考</li>
		</ul>
	</body>
</html>

运行后得到如下效果：

无序列表

数据展示
没有意义
仅供参考

2、有序列表

有顺序，每个

标签独占一行（块元素）
默认
标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
具体代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<ol>
			<li>数据展示</li>
			<li>没有意义</li>
			<li>仅供参考</li>
		</ol>
	</body>
</html>

运行后得到如下：

无序列表

数据展示
没有意义
仅供参考

3、定义列表

没有顺序，每个

标签、

标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<dl>
			<dt>数据展示</dt>
			<dd>没有意义</dd>
			<dd>仅供参考</dd>
		</dl>
	</body>
</html>

运行后得到如下所示：

无序列表

数据展示

没有意义

仅供参考

以上三种列表形式统一称之为列表。

二、表格

使用表格的好处：简单明了、结构稳定
基本语法用table开始，每一行用tr表示，每一个单元格内容用td表示，用colspan表示跨列，用rowspan表示跨行。
具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--定义表格-->
		<table border="1">
			<!--定义行-->
			<tr>
				<th colspan="6">跨列大标题</th><!--colspan跨列标签-->
			</tr>
			<tr>
				<!--th定义表头-->
				<th>展示跨行内容</th>
				<th>1行1列的标题</th>
				<th>1行2列的标题</th>
				<th>1行3列的标题</th>
				<th colspan="2" rowspan="4">同时跨行和跨列</th><!--同时跨行和跨列-->
			</tr>
			<tr>
				<td rowspan="3">跨行内容</td><!-- rowspan跨行标签-->
				<td>1行1列的单元格</td>
				<td>1行2列的单元格</td>
				<td>1行3列的单元格</td>
			</tr>
			<tr>
				<td>2行1列的单元格</td>
				<td>2行2列的单元格</td>
				<td>2行3列的单元格</td>
			</tr>
			<tr>
				<td>3行1列的单元格</td>
				<td>3行2列的单元格</td>
				<td>3行3列的单元格</td>
			</tr>
		</table>
	</body>
</html>

运行后得到如下结果：

跨列大标题
展示跨行内容	1行1列的标题	1行2列的标题	1行3列的标题	同时跨行和跨列
跨行内容	1行1列的单元格	1行2列的单元格	1行3列的单元格
	2行1列的单元格	2行2列的单元格	2行3列的单元格
	3行1列的单元格	3行2列的单元格	3行3列的单元格

三、视频和音频元素

用video表示视频元素，用Audio表示音频元素

具体使用情况如下所示：

<html>
	<head>
		<meta charset="utf-8">
		<title>视频播放</title>
	</head>
	<body>
		<video src="./video.webm" controls></video><!--video视频播放标签-->
		<audio src="music.mp3" controls></audio><!--audio音频播放标签-->
	</body>
</html>

运行后得到如下结果：

在这里插入图片描述
可以在页面中展示视频和音频的文件。
值得注意的是，在添加视频和音频元素时，可以用autoplay命令来实现打开页面后自动播放。

四、HTML5的结构元素

在这里插入图片描述

五、iframe内联框架

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<iframe src="http://www.baidu.com" frameborder="1" width="700px"></iframe>
	</body>
</html>

实现的效果如下：
在这里插入图片描述
可以将我们自己定义的百度网页内联到我们自己的页面内使用。