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

Posted 橘猫吃不胖~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于HTML超链接音频和视频以及内嵌框架的主要内容,如果未能解决你的问题,请参考以下文章

HTML代码片段

前端三件套 HTML+CSS+JS基础知识内容笔记

前端三件套 HTML+CSS+JS基础知识内容笔记

前端三件套 HTML+CSS+JS基础知识内容笔记

前端三件套 HTML+CSS+JS基础知识内容笔记

iOS超全开源框架项目和学习资料汇总数据库缓存处理图像浏览摄像照相视频音频篇