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

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

<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属性来启用视频播放控制器。此外,我们还指定了视频的宽度和高度。

相关文章
|
1月前
|
编解码 搜索推荐 数据安全/隐私保护
创作高质量网页内容时,怎样使用图片和视频等多媒体元素?
在创作高质量网页内容时,合理使用图片、视频等多媒体元素能够显著增强内容的吸引力、可读性和分享性
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
61 13
|
6月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
5月前
|
算法
「AIGC」readLink实现url识别pdf、网页标题和内容
AIGC算法实现服务,通过Express接收URL,识别内容类型:HTML使用Cheerio解析,PDF用`pdf-parse`。自定义函数提取标题和内容。示例代码展示了如何处理HTTP响应,提取HTML的`&lt;title&gt;`及PDF文本,并提供错误处理。服务器运行在端口3000。
55 0
如何快速修改网页上的文字?
如何快速修改网页上的文字?
489 0
|
7月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
104 0
|
JavaScript 前端开发 API
几行代码搞定网页全屏自定义内容
screenfull 是用于跨浏览器使用 JavaScript Fullscreen api 的简单包装器,可让您将页面或任何元素全屏显示 。
|
Python
Gne Online:通用新闻网页正文在线提取
Gne Online:通用新闻网页正文在线提取
199 0
HTML基础教程3——文本格式化标签与媒体标签
文本格式化标签和正常标签一样是可以嵌套的!可以嵌套的!可以嵌套的!重要的事情要强调三遍。
HTML基础教程3——文本格式化标签与媒体标签
12.多媒体和超链接标签及其应用实例
12.多媒体和超链接标签及其应用实例
179 0
12.多媒体和超链接标签及其应用实例

热门文章

最新文章