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

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

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

相关文章
|
3月前
|
编解码 搜索推荐 数据安全/隐私保护
创作高质量网页内容时,怎样使用图片和视频等多媒体元素?
在创作高质量网页内容时,合理使用图片、视频等多媒体元素能够显著增强内容的吸引力、可读性和分享性
|
8月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
7月前
|
算法
「AIGC」readLink实现url识别pdf、网页标题和内容
AIGC算法实现服务,通过Express接收URL,识别内容类型:HTML使用Cheerio解析,PDF用`pdf-parse`。自定义函数提取标题和内容。示例代码展示了如何处理HTTP响应,提取HTML的`&lt;title&gt;`及PDF文本,并提供错误处理。服务器运行在端口3000。
82 0
|
8月前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
187 3
|
9月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
124 0
|
Python
Gne Online:通用新闻网页正文在线提取
Gne Online:通用新闻网页正文在线提取
215 0
HTML基础教程3——文本格式化标签与媒体标签
文本格式化标签和正常标签一样是可以嵌套的!可以嵌套的!可以嵌套的!重要的事情要强调三遍。
HTML基础教程3——文本格式化标签与媒体标签
|
移动开发 前端开发 JavaScript
HTML的笔记及展示(3)(绘图和多媒体支持相关)
HTML的笔记及展示(3)(绘图和多媒体支持相关)
100 0
12.多媒体和超链接标签及其应用实例
12.多媒体和超链接标签及其应用实例
192 0
12.多媒体和超链接标签及其应用实例
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
163 0
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)