一、超链接是什么？

超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
简单来讲当用户点击文字、图像、视频等页面元素时，页面会发生跳转，这些页面元素就是超链接。

二、超链接标签

1.基本格式

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

'href'属性：当为标签应用href属性时，就具有了超链接的功能，它的值就是要跳转的页面的地址,通常用'#'表示空链接

'target'属性：指定链接页面打开的方式,取值有'_self'和'_blank'，'_self'为默认值，意思是在本页面中打开，'_blank'意思是在新窗口打开。
如：

<!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="http://www.baidu.com">点击</a>
</body>
</html>

2.锚点链接

为了提高信息的检索速度，可以创建锚点标签，使用户快速定位到目标内容。

（1）创建步骤

第一步：在’锚点’位置给标签添加id属性
第二步：在超链接位置中使href属性值为’#id名’

（2）举例

举例如下：

<!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="#one">第一个</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/><p id="one">第一个文字</p>
</body>
</html>

当点击超链接“第一个”时，页面便会跳转到我们的目标位置“第一个文字”。

3.音频

（1）音频标签的基本格式

<audio src="" controls='controls' autoplay=''></audio>

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

（2）举例

<!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><audio src="./音频/王嘉尔 - 100 Ways.mp3" controls='controls' autoplay='autoplay'>
</body>
</html>

4.视频

（1）视频标签的基本格式

 <video src="" controls='' autoplay='' poster=""></video>

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

（2）举例

<!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><video src="./视频/001.mp4" controls='controls' autoplay='autoplay' poster="./images/花纹.gif" height="200" width="300"></video>
</body>
</html>

三、强调

给页面设置背景颜色、背景图像

   (1)背景色：给body标签添加bgcolor属性(2)背景图像：给body标签添加background属性

HTML入门三（超链接，音频，视频）相关推荐

ffmpeg实战教程（三）音频PCM采样为AAC，视频YUV编码为H264/HEVC
ffmpeg实战教程(三)音频PCM采样为AAC,视频YUV编码为H264/HEVC https://blog.csdn.net/King1425/article/details/71180330 音 ...
视音频数据处理入门：H.264视频码流解析（java）
参考文献 : 视音频数据处理入门:H.264视频码流解析测试文件:H264文件链接:https://pan.baidu.com/s/1eRTJwTsXTgHf2Ez8Inab1A 提取码:1c7 ...
视音频数据处理入门：H.264视频码流解析
===================================================== 视音频数据处理入门系列文章:视音频数据处理入门:RGB.YUV像素数据处理视音频数据处理入门 ...
从入门到入土：Python实现爬取某站视频|根据视频编号|支持通过视频名称和创作者名称寻找编号|以及python moviepy合并音频视频
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) Python实现爬取某站视频|根据视频编号|支持通过视频名称 ...
webrtc 入门第二章音视频录制
webrtc 入门第二章音视频录制一.介绍 1.媒体录制原理在很多场景中回放音视频资源的需求是非常重要的例如会议,直播授课等.任何媒体形式的表情都可进行录制,如 ,,等.其中内容更加自由用户 ...
FFmpeg入门详解--音视频原理及应用：梅会东：清华大学出版社
大家好,我的第一本书正式出版了,可以在京东各大店铺抢购哦. <FFmpeg入门详解--音视频原理及应用:梅会东:清华大学出版社> 京东自营链接:https://item.jd.com/13 ...
一篇文章带你简单了解音频视频
一.概述 1)流媒体协议是服务器与客户端之间通信遵循的规定.当前网络上主要的流媒体协议如表所示. 2)封装格式的主要作用是把视频码流和音频码流按照一定的格式存储在一个文件中. 3)视频编码的主要作用是 ...
视音频数据处理入门：AAC音频码流解析
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理视音频数据处理 ...
视音频数据处理入门：PCM音频采样数据处理
===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理视音频数据处理 ...
音频视频解决方案：GStreamer/ffmpeg/ffdshow/directshow/vfw
音频视频编程相关:GStreamer/ffmpeg/directshow/vfw linux和window下几种流行的音频视频编程框架作一个总结,防止自己迷惘,免于晕头转向. 一.GStreamer ...

HTML入门三（超链接，音频，视频）

文章目录

一、超链接是什么？

二、超链接标签

1.基本格式

2.锚点链接

（1）创建步骤

（2）举例

3.音频

（1）音频标签的基本格式

（2）举例

4.视频

（1）视频标签的基本格式

（2）举例

三、强调

HTML入门三（超链接，音频，视频）相关推荐

最新文章

热门文章