多媒体标签让你的网页,内容很丰富!

简介: 多媒体标签让你的网页,内容很丰富!

<img> 标签


<img>标签是用来在网页中显示图像的最基本方式。下面是一个简单的示例,展示了如何在网页中显示一张图片:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Example</title>
</head>
<body>
    <h1>我的照片</h1>
    <img src="https://fc1tn.baidu.com/it/u=1731280564,3409770116&fm=202&mola=new&crop=v1" alt="我的照片">
</body>
</html>



在这个示例中,我们使用标签将一张线上图片嵌入到网页中。其中,src属性指定了图片的线上路径,而alt属性则提供了图片的替代文本,用于在图片无法加载时显示。



<audio> 标签


<audio>标签可以让您在网页中播放音频文件。下面是一个简单的示例,展示了如何在网页中添加一段音频:

<audio>标签可以让您在网页中播放音频文件。下面是一个简单的示例,展示了如何在网页中添加一段音频:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Example</title>
</head>
<body>
    <h1>我的音频</h1>
    <audio controls>
        <source src="example.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

4bb2b692dc1055fbbc86ff3f6eff2f66.png



在上面的示例中,我们使用了<audio>标签来插入一个名为"example.mp3"的音频文件。在<audio>标签内,我们使用<source>标签来指定音频文件的路径和类型。controls属性添加了音频播放控制器,允许用户控制音频的播放、暂停和音量。

标签来插入一个名为"example.mp3"的音频文件。在标签内,我们使用标签来指定音频文件的路径和类型。controls属性添加了音频播放控制器,允许用户控制音频的播放、暂停和音量。


<video> 标签


<video>标签可以让您在网页中播放视频文件。下面是一个简单的示例,展示了如何在网页中添加一段视频:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Example</title>
</head>
<body>
    <h1>我的视频</h1 
    <!-- 记得改视频地址怕-->
    <video controls width="400" height="300">
        <source src="example.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</body>
</html>

09079aef31dfd39c7ee4e8402b9a78d4.png



在上面的示例中,我们使用了<video>标签来插入一个名为"example.mp4"的视频文件。与音频标签类似,我们使用<source>标签来指定视频文件的路径和类型,并添加了controls属性来启用视频播放控制器。此外,我们还指定了视频的宽度和高度。

相关文章
|
9天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
28 13
|
22天前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
32 4
|
3月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
2月前
|
算法
「AIGC」readLink实现url识别pdf、网页标题和内容
AIGC算法实现服务,通过Express接收URL,识别内容类型:HTML使用Cheerio解析,PDF用`pdf-parse`。自定义函数提取标题和内容。示例代码展示了如何处理HTTP响应,提取HTML的`&lt;title&gt;`及PDF文本,并提供错误处理。服务器运行在端口3000。
27 0
|
4月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
104 0
HTML基础教程3——文本格式化标签与媒体标签
文本格式化标签和正常标签一样是可以嵌套的!可以嵌套的!可以嵌套的!重要的事情要强调三遍。
HTML基础教程3——文本格式化标签与媒体标签
|
前端开发 程序员
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
386 0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
12.多媒体和超链接标签及其应用实例
12.多媒体和超链接标签及其应用实例
163 0
12.多媒体和超链接标签及其应用实例
|
前端开发
【前端三件套-HTML】图片,音频,视频,表格案例
【前端三件套-HTML】图片,音频,视频,表格案例
100 0