HTML超链接、音频标签、视频标签

最新推荐文章于 2024-12-09 17:08:01 发布

命中。

最新推荐文章于 2024-12-09 17:08:01 发布

阅读量1.1k

点赞数 1

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120849224

版权

本文介绍了HTML中的超链接概念，包括超链接标签<a>及其herf和target属性，锚点的使用，以及如何设置页面背景。此外，还探讨了音频和视频标签的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是超链接

1、超链接

（1）、超链接就是通过点击文字、图像、视频等页面元素完成页面的跳转，其中被点击的文字、图像、视频等页面元素就是超链接。

（2）、我们用<a></a>标签作为html的链接语法。

2、超链接标签及其属性

（1）、超链接标签：

（2）、<a></a>标签中的属性

herf属性：指是要跳转的页面的地址,通常用'#'表示空链接。

target属性：新页面打开的方式,即被链接的文档在何处显示，取值有'_self'和'_blank'

（ '_self'表示在原窗口打开页面,是'target'属性的默认值）

（'_blank'表示在新窗口中打开页面）

(3)、举例

  <a href="http://www.baidu.com" target="_blank">百度一下</a>

点击“百度一下”即可跳转到新的页面，示例中会跳转到百度首页。

3、锚点（anchor）

(1)、目的：为了提高页面的检索速度。

(2)、操作：第一步：在锚点位置给标签添加id属性

第二步：在超链接位置中<a>标签的herf属性值为“#id名”

(3)、举例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>页面的首部</h3>
    <br>
    <br>
    <a href="#d1">直接到页面的尾部</a>
   
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p id="d1"> 锚点位置：页面的尾部</p>
    <br>
    <br>
    <br>
</body>
</html>

点击“直接到页面尾部”即可直接到达页尾。

4、设置页面背景颜色和背景图案

这个操作很简单，只需要给body标签添加bgcolor属性和background属性。

二、音频标签

<audio></audio>	音频标签
src	表示音频文件的地址
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
autoplay	表示是否可以进行自动播放
loop	表示循环播放
perload	页面加载时音频也加载,并预备播放,若使用了'autoplay'属性则该属性被忽略
muted	设置或返回音频/视频是否静音

三、视频标签

<video></video>	视频标签
src	表示音频文件的地址
controls	表示标签带有播放控制的按钮
autoplay	表示是否可以进行自动播放
loop	表示循环播放
height	表示视频播放器的高度
width	表示播放器的宽度
poster	表示在视频文件下载时显示的图片
volume	设置或返回音频/视频的音量

四、音频、视频超链接举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频视频超链接</title>
</head>
<body>
  <br><br>
  <a href="http://www.baidu.com" target="_blank"></a>
  <audio src="../刀郎.mp3" controls="controls" autoplay="autoplay"></audio>  
  <br><br><br>
  <video src="#"controls="controls" autoplay="autoplay"  poster="../images/77.jpg"  ></video>
</body>
</html>