大白话html 第四章学习图像和多媒体标签

ops/2025/3/4 22:08:44/

html__0">大白话html 第四章学习图像和多媒体标签

图像标签 <img>

想象一下你要在网页上展示一张漂亮的照片,这时候就需要用到 <img> 标签。它就像是一个相框,能把你指定的图片“装”到网页里。

关键属性

  • src:这个属性就像是给图片指了条路,告诉浏览器这张图片在哪里。比如图片在你的电脑里,或者在某个网站上。
  • alt:当图片因为各种原因(比如网络不好、图片地址错误)显示不出来的时候,alt 属性里的文字就会出现,告诉用户这张图片大概是什么内容。

代码示例

html"><!DOCTYPE html>
<html>
<body><!-- 插入一张图片,src 指定图片路径,alt 是图片的替代文本 --><img src="https://example.com/cute-cat.jpg" alt="一只可爱的猫咪"></body>
</html>

在这个例子里,src 属性指向了一张猫咪图片的地址,alt 属性告诉用户如果图片加载失败,这张图是一只可爱的猫咪。

音频标签 <audio>

如果你想在网页上播放一段好听的音乐或者有声故事,就可以用 <audio> 标签。它就像是一个小音响,能播放你指定的音频文件。

关键属性

  • src:和图片标签的 src 类似,它指明了音频文件的位置。
  • controls:加上这个属性后,网页上会出现一个播放控件,用户可以用它来播放、暂停、调节音量等。

代码示例

html"><!DOCTYPE html>
<html>
<body><!-- 插入一个音频播放器,src 指定音频文件路径,controls 显示播放控件 --><audio src="https://example.com/music.mp3" controls>你的浏览器不支持音频播放。</audio></body>
</html>

这里,浏览器会尝试播放 src 属性指定的音频文件。如果浏览器不支持音频播放,就会显示 <audio> 标签里的文字。

视频标签 <video>

要是你想在网页上放个有趣的视频,<video> 标签就能派上用场。它就像一个小电视,能播放你提供的视频。

关键属性

  • src:指定视频文件的位置。
  • controls:添加播放控件,方便用户操作。
  • widthheight:可以设置视频播放窗口的宽度和高度。

代码示例

html"><!DOCTYPE html>
<html>
<body><!-- 插入一个视频播放器,src 指定视频文件路径,controls 显示播放控件,width 和 height 设置视频窗口大小 --><video src="https://example.com/video.mp4" controls width="640" height="360">你的浏览器不支持视频播放。</video></body>
</html>

在这个例子中,浏览器会尝试播放指定的视频文件,并且按照设置的宽度和高度显示视频窗口。如果浏览器不支持视频播放,就会显示提示文字。


http://www.ppmy.cn/ops/163139.html

相关文章

【洛谷贪心算法】P1106删数问题

这道题可以使用贪心算法来解决&#xff0c;核心思路是尽量让高位的数字尽可能小。当我们逐步删除数字时&#xff0c;会优先删除高位中相对较大的数字。具体做法是从左到右遍历数字序列&#xff0c;当发现当前数字比它后面的数字大时&#xff0c;就删除当前数字&#xff0c;直到…

如何防止Python网络爬虫爬取网站内容

要防止Python网络爬虫爬取网站内容&#xff0c;可以从以下几个方面入手&#xff1a; 遵守Robots.txt文件&#xff1a;首先&#xff0c;网站管理员可以通过robots.txt文件明确告知爬虫哪些页面可以抓取&#xff0c;哪些不可以。爬虫在抓取之前应先检查该文件&#xff0c;尊重网站…

图论-腐烂的橘子

994.腐烂的橘子 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a;值 0 代表空单元格&#xff1b; 值 1 代表新鲜橘子&#xff1b; 值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。返回 直到…

RA-Eco-RA2L1-48PIN-V1.0开发板RTC时钟

前言 本文将详细介绍如何在e2studio开发环境中为RA2L1&#xff08;48引脚版本&#xff09;配置RTC&#xff08;Real-Time Clock&#xff0c;实时时钟&#xff09;模块&#xff0c;设置时钟日历&#xff0c;并通过1秒周期中断触发串口打印当前时间。这对于需要实时时间显示的应…

游戏引擎学习第128天

开始 然而&#xff0c;我们仍然有一些工作要做&#xff0c;渲染部分并没有完全完成。虽然现在已经能够运行游戏&#xff0c;而且帧率已经可以接受&#xff0c;但仍然有一些东西需要进一步完善。正在使用调试构建编译版本&#xff0c;虽然调试版本的性能不如优化版本&#xff0…

爬虫基础:一文掌握网页基础和爬虫原理

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、网页基础1.1 网页的基本概念1.2 请求与响应1.3 HTTP 协议1.4 HTTP 状态码1.5 动态网页与静态网页二、 网页的基本结构2.1 HTML(超文本标记语言)2.2 CSS(层叠样式表)2.3 JavaScript三. 爬虫的基本原理四、网页数…

k8s面试题总结(八)

1.K8s部署服务的时候&#xff0c;pod一直处于pending状态&#xff0c;无法部署&#xff0c;说明可能的原因 Node节点的资源不足&#xff0c;yaml文件资源限制中分配的内存&#xff0c;cpu资源太大&#xff0c;node宿主机资源没那么大&#xff0c;导致无法部署。部署pod的yaml文…

力扣 最长回文子串

双指针&#xff0c;多维动态规划。 题目 回文即顺着读跟倒着读都是一样的&#xff0c;然后又是一个找子串的问题&#xff0c;不难发现又是一道dp了。但是&#xff0c;这里维护的状态用到了双指针&#xff0c;找的分别是子串的首字母跟尾字母&#xff0c;因此也是个多维动态规划…