HTML音频，视频，超链接

最新推荐文章于 2023-09-22 09:33:11 发布

SCK-DN

最新推荐文章于 2023-09-22 09:33:11 发布

阅读量2.5k

点赞数

分类专栏：前端入门文章标签： html 音视频前端

本文链接：https://blog.csdn.net/Harrysau/article/details/122707246

版权

前端入门专栏收录该内容

6 篇文章 7 订阅

订阅专栏

音频、视频、超链接

一、音频
- 1.标签介绍
- 2.常见属性
二、视频
- 1.标签介绍
- 2.常用属性
三、超链接
- 1.标签介绍
- 2.target属性

一、音频

1.标签介绍

符号：audio
特点：双标签
支持格式：MP3、wav、ogg（多为MP3）
用法：

<audio src="相对路径"></audio>

2.常见属性

属性名	属性功能
src	音频路径
controls	显示播放的插件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

用法：

<audio src="相对路径" controls autoplay loop></audio>

其中src属性必须要有，其余属性根据要求自行添加，不分顺序。与图片标签相同，视频窗口的大小也可通过height和width设置，用法均相同。

二、视频

1.标签介绍

符号：video
特点：双标签
支持格式：MP4、WebM、ogg（多用MP4）

2.常用属性

属性名	属性功能
src	视频路径
controls	显示播放的插件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

与音频的属性特征类似，但autoplay属性在谷歌浏览器中需配合muted实现静音播放。
用法：

<video src="相对路径" controls autoplay loop></video>

与图片标签相同，视频窗口的大小也可通过height和width设置，用法均相同。

三、超链接

1.标签介绍

符号：a
特点：双标签
用法：

<a href="完整网址.html">要显示的内容</a>

2.target属性

属性值	功能
_self	在当前窗口跳转
_blank	在新窗口跳转

完整代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接应用示例</title>
	</head>
		<body>
			<a href="https://editor.csdn.net/md/?articleId=122691120.html" target="_self">在当前窗口跳转作者的另一篇文章</a>
			<br>
			<br>
			<a href="https://blog.csdn.net/Harrysau?spm=1011.2124.3001.5343.html" target="_blank">在新建窗口访问作者的个人主页</a>
		</body>
</html>