html学习之路---常用表格的基本语法，视频和音频的标签使用，iframe标签的基本使用

牛总来学习了

已于 2022-06-17 11:51:26 修改

阅读量190

点赞数

分类专栏： html 文章标签： html html5 css

于 2022-06-16 15:11:06 首次发布

本文链接：https://blog.csdn.net/qq_57480977/article/details/125310331

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格

例子：

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

<table></table>表示表格的标签用来声明表格
<table></table>中border属性可以：设置边框线粗细
<tr></tr> 行标签
<td></td> 列标签
<td></td>标签中存在几个常用属性

colspan：

		<table border="solid 1px" width="100px" height="100px">
			<!--colspan表示单元格所跨n个列数-->
			<tr>
				<td colspan="2">学习成绩</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>88</td>
			</tr>
		</table>

在这里插入图片描述

rowspan：

		<table border="solid 1px" width="100px" height="100px">
			<!--rowspan表示单元格所跨n个行数-->
			<tr>
				<td rowspan="2">张三</td>
					<td>数学</td>
					<td>95</td>
				<tr>
					<td>语文</td>
					<td>88</td>
				</tr>			
			</tr>
			<tr>
				<td rowspan="2">李四</td>
					<td>数学</td>
					<td>95</td>
				<tr>
					<td>语文</td>
					<td>88</td>
				</tr>			
			</tr>
		</table>

在这里插入图片描述

其中
colspan表示单元格所跨n个列数
rowspan表示单元格所跨n个行数
<tr></tr>标签中存在几个常用属性：

align：内容水平移动：

right：右
center：居中
left：左

valign：内容垂直移动

top:上
center：居中
bottom：下
综合示例代码：

<div style="margin-left: 150px;">学生基本信息表</div>
<!--align 设置左右居中浮动  valign设置上下居中浮动-->
<table border="1" width="400" height="400">
	<tr align="center">
		<td rowspan="2">学号</td>
		<td colspan="3">个人信息</td>
		<td colspan="3">入学时间</td>
	</tr>
	<tr align="center">
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
		<td>班级</td>
		<td>入学年月</td>
	</tr>
	<tr align="center">
		<td>001</td>
		<td>小王</td>
		<td>男</td>
		<td>23</td>
		<td>20020900</td>
		<td>2000年9月</td>
	</tr>  
	<tr align="center">
		<td>001</td>
		<td>小张</td>
		<td>男</td>
		<td>23</td>
		<td>20020900</td>
		<td>2000年9月</td>
	</tr>
</table>

视频和音频

在网页上导入一个视频或音频可以使用以下标签可以实现：
视频：

<video src="视频路径"  controls></video>

音频：

<audio src="音频路径" controls></audio >

基本属性：

src：

后加的是路径信息

controls ：

该属性为所播放的视频或音频信息提供播放、暂停和音量的控件

autoplay：

可以使视频或音频信息自动播放（部分浏览器不支持），某些浏览器在使用视频自动播放时要配合muted标签来使用，使所选视频自动静音播放

loop：

使视频或音频循环播放

解决兼容性问题：使用source标签包裹后，将不同的格式都写到一个<video></video>中，可以将不支持的浏览器播放的视频修改成其他视频格式

<video autoplay="autoplay" controls="controls" >
	<source src="img/video.webm"></source>
	<source src="img/vedio.mp4"></source>
</video>

iframe

可以使用<iframe src="path" name="mainFrame" ></iframe>来在一个页面中的某个模块显示其他页面的信息
其中
src：后可以是内部路径也可以是外部路径
使用name属性时可以给此iframe标签设置名称，通常与a标签配合使用如：

 <body>
		<a href="index01.html" target="one">index01</a>
		<a href="http://www.baidu.com" target="one">百度</a>
		<a href="index02.html#img1" target="one">index02</a>
		<hr />
		<iframe name="one"  width="1000px" height="1000px"></iframe>
	</body>

点击index01时：
在这里插入图片描述
点击index02时：