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

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

作者:互联网

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

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