【Web前端开发】Html标签之排版标签、文本格式化标签、媒体标签、链接标签篇（下）

最新推荐文章于 2024-10-20 13:13:02 发布

P1NKN1N1

最新推荐文章于 2024-10-20 13:13:02 发布

阅读量328

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端开发文章标签：前端 html 媒体

本文链接：https://blog.youkuaiyun.com/qq_45825645/article/details/123048165

Web前端开发专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML中的媒体标签，包括音频和视频标签的使用，以及常见的属性如src、controls、autoplay和loop。同时，文章还讲解了链接标签<a>的用法，包括其在页面跳转和目标窗口设置上的应用。示例代码展示了如何实现音频和视频的插入以及超链接的创建。

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

本文接上文继续介绍媒体标签和链接标签

三、媒体标签

3.音频标签

用于在页面中插入音频

<audio src="./music.mp3" controls></audio>

阴影部分为音频文件的文件名，音频标签为双标签

目前支持的三种音频文件格式分别为：MP3、wav、ogg

常见属性名有：src、controls、autoplay、loop

src指音频文件的路径，书写方式详见上文；

controls代表在网页内显示音频控件，即：

autoplay是音频伴随网页打开的自动播放，

loop是音频的循环播放；

4.视频标签

用于在页面中插入视频

<video src="../video.mp4"></video>

阴影部分为视频文件的文件名，视频标签为双标签

常见属性名有：src、controls、autoplay、loop

autoplay属性在谷歌浏览器中配合muted实现静音播放，其余属性同音频标签；

目前支持的三种音频文件格式分别为：MP4、webm、ogg

四、链接标签

实现点击之后，从当前页面跳转到另一个页面，也叫a标签、超链接、锚链接

<a href="./Untitled-1.html">案例演示</a>

阴影部分为跳转网页地址，视频标签为双标签

开发网页初期，还不知道跳转网页地址时，href写空链接

target属性：目标网页的打开方式

target属性值为_self时，是target属性的默认值，在当前页面跳转网页，将覆盖原网页

target属性值为_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>Document</title>
</head>
<body>
    <audio src="../BTS (防弹少年团) - Dynamite.mp3" controls></audio>
    <video src="../League of Legends 2022.02.08 - 21.35.51.01_Trim (2).mp4" controls width="400px"></video>
    <a href="./Untitled-1.html" target="_blank">相亲交友</a>
    
</body>
</html>

实现效果如下：

点击相亲交友后，将保留本页面，跳转到新的页面

该页面使用了表单标签，我将在后文进行介绍

————

另外，写html代码用Emmet语法快捷真的很方便，也就是输入标签名然后enter回车就能使用相应的一对标签了