首页 > 其他分享> > HTML超链接、音频和视频以及内嵌框架

HTML超链接、音频和视频以及内嵌框架

2021-10-08 21:33:23 作者：互联网

HTML超链接、音频和视频以及内嵌框架

1.1 超链接
1.2 音频标签
- 1.2.1 音频标签< audio >
- 1.2.2 属性
1.3 视频标签
- 1.3.1 视频标签< video >
- 1.3.2 属性
1.4 内嵌框架标签

1.1 超链接

1.1.1 什么是超链接

当用户点击文字、图像、视频等页面元素时，页面会发生跳转，则这些页面元素就是超链接

1.1.2 超链接标签< a >

格式：

 <a href="url地址" target="页面打开的方式">页面元素(文字、图像、音频、视频)</a>

属性	含义
href	值是要跳转的页面的地址，通常用“#”表示空链接
target	新页面打开的方式，取值有“_self”和“_blank”，“_self”表示在原窗口打开页面，是target属性的默认值，“_blank”表示在新窗口中打开页面

例如，target取值为“_self”时，点击链接，网页会在原窗口打开页面：

<a href="#" target="_self">target取值为_self时</a>

在这里插入图片描述
target取值为“_blank”时，点击链接，网页会在新窗口打开页面：

<a href="#" target="_blank">target取值为_blank时</a>

在这里插入图片描述

1.1.3 通过超链接实现“锚点”

通过超链接实现“锚点”，可以提高页面的检索速度。
设置方法：
第一步：在“锚点”位置给标签添加id属性
第二步：在超链接位置中< a >标签的href属性值为“#id名”

例如，下面的代码中，a标签与p标签之间隔着很多距离，p标签的id名为jmcbp，a标签的href属性值为#jmcbp，那么点击a标签，就可以快速跳转到p标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>
    <a href="#jmcbp"></a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p id="jmcbp">橘猫吃不胖</p>
</body>
</html>

在这里插入图片描述

1.2 音频标签

1.2.1 音频标签< audio >

格式为：

<audio src="音频文件的地址" controls="controls" autoplay="autoplay"></audio>

1.2.2 属性

属性	含义
src	表示音频文件的地址
controls	表示标签带有控制按钮
autoplay	表示是否可以进行自动播放
loop	表示循环播放
preload	页面加载时音频也加载，并预备播放，若使用了“autoplay”属性则该属性被忽略

在这里插入图片描述

1.3 视频标签

1.3.1 视频标签< video >

格式为：

 <video src="视频文件的地址" controls="controls" autoplay="autoplay" poster="视频文件下载时显示的图片"></video>

1.3.2 属性

属性	含义
src	表示视频文件的url
controls	表示标签带有播放控制的按钮
autoplay	表示是否可以进行自动播放
poster	表示在视频文件下载时显示的图片
loop	表示循环播放
height	表示视频播放器的高度
width	表示播放器的宽度

在这里插入图片描述

1.4 内嵌框架标签

内嵌框架标签作用是将页面显示在指定的位置。

格式为：

<iframe src="要嵌入的文件/网页地址" frameborder="边框宽度" name="框架名称" height="框架高度" width="框架宽度"></iframe>

例如，iframe标签中src属性插入CSDN的主页链接，那么框架中就会显示CSDN的主页，并且可以嵌套使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌框架</title>
</head>
<body>
    <br><br><br><br><br>
    <iframe src="https://www.csdn.net/?spm=1001.2014.3001.4476" frameborder="1" name="kj" height="500" width="1200"></iframe>
</body>
</html>

在这里插入图片描述

标签：内嵌,1.1,标签,音频,HTML,超链接,页面,属性
来源： https://blog.csdn.net/m0_46612221/article/details/120657070