当前位置: 首页 > article >正文

web前端多媒体标签设置(图片,视频,音频)以及图片热区(usemap)的设置

多媒体标签运用

在HTML中有以下常见多媒体标签:
 
 <img> (图像标签)
 
- 作用:用于在网页中嵌入图像。
- 示例: <img src="image.jpg" alt="这是一张图片"> 。其中 src 属性指定图像的路径,可以是相对路径或绝对路径; alt 属性用于在图像无法显示时提供替代文本,这对搜索引擎优化和无障碍访问很重要。
 
 <audio> (音频标签)
 
- 作用:在网页中嵌入音频内容。
- 示例: <audio controls src="music.mp3"></audio> 。 controls 属性会在浏览器中显示音频播放控件,如播放/暂停按钮、音量调节等。 src 属性指定音频文件的路径。它还可以包含多个 <source> 标签来提供不同格式的音频文件,以兼容不同浏览器。
 
 <video> (视频标签)
 
- 作用:用于在网页中嵌入视频。
- 示例: <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持视频播放。</video> 。 width 和 height 属性用于设置视频播放器的尺寸; controls 属性显示视频播放控件。和 <audio> 标签一样,可以通过 <source> 标签来指定多种格式的视频文件。最后在标签内的文本是当浏览器不支持视频播放时显示的内容。

效果图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
        zoom: 0.3;
        /* 该标签将图片按比例缩小,当然也可以按比例放大 */
        /* 控制图片大小还可以用宽度和高度 */
    }
</style>
<body>
    <audio src=".\audio\汪苏泷 - 小星星.mp3" controls autoplay loop></audio>
    <br>
    <!-- loop 循环播放 -->
    <!-- controls 控制播放 -->
    <!-- autoplay 自动播放 大部分浏览器自动屏蔽了     -->
   <video src="../视频/share_945f1f4c4a246f6caaa5bb845edcef1b.mp4"controls loop width="500px" height="300px"></video>
   <br>
   <video width="500px" height="300px" controls loop><source src="../视频/share_9c55a587df40b711a9180099cee946d4.mp4"></video>
   <br>
   <img src="../相片/006lmXQBgy1hr8ld3qw2dj30j60j6dv0.jpg" alt="">
    
</body>
</html>

图片热区的设置

在HTML中, usemap 属性主要用于将图像( <img> 标签)或者对象( <object> 标签)与客户端图像映射( <map> 标签)相关联。
 
1. 创建图像映射( <map> 标签)
 
- 首先要定义一个图像映射区域,例如:

第一步
 

<map name="myMap">
    <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1">
    <area shape="circle" coords="150,150,50" href="page2.html" alt="区域2">
</map>


- 在 <map> 标签中, name 属性用于给图像映射命名,这里命名为 myMap 。
-  <area> 标签用于定义图像映射中的可点击区域。 shape 属性定义区域形状(如矩形 rect 、圆形 circle 、多边形 poly ), coords 属性根据形状定义坐标(对于矩形是左上角和右下角坐标,圆形是圆心和半径坐标等), href 属性指定点击该区域后的链接目标, alt 属性提供替代文本。
2. 关联图像与图像映射( usemap 属性)


 第二步
- 然后,使用 usemap 属性将图像和图像映射关联起来,例如:
 

<img src="your_image.jpg" usemap="#myMap" alt="带有映射的图像">


- 这里的 usemap 属性值为 #myMap ,其中 # 符号后面的 myMap 要和前面定义的 <map> 标签的 name 属性值相对应。这样,当用户点击图像中定义的区域时,就会跳转到相应的链接目标。

注意:图像热区中的坐标以该图片为准,比如一张长方形的图片左上角的坐标为(0,0),不是以窗口页面的坐标为基准。


http://www.kler.cn/a/371351.html

相关文章:

  • HTML的CSS
  • 华为手机卸载系统应用的方法
  • [ 问题解决篇 ] 解决远程桌面安全登录框的问题
  • Java审计对比工具JaVers使用
  • SpringCloud笔记
  • DBeaver如何导出insert的sql数据
  • C++:多态(原理篇)
  • 交流调速系统分类
  • 如何从PPT中导出600dpi的高清图
  • 在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
  • macOS开发环境配置与应用开发教程
  • java 泛型返回接口
  • vue使用rem适配各种分辨率设备
  • 【PTA】4-2 树的同构【数据结构】
  • 鸿蒙的底部菜单导航实现
  • appium自动化对已打开的app操作
  • pdf转为txt文本格式并使用base64加密输出数据
  • 事务的原理、MVCC的原理
  • Pytest的测试用例相关问题总结
  • Linux下安装软件
  • 江协科技STM32学习- P22 实验-ADC单通道/ADC多通道
  • 交叉编译 lmbench(riscv64)
  • synchronized进阶原理
  • Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)
  • 中国分省统计面板数据(2004-2023)-最新出炉_附下载链接
  • JavaEE初阶------网络编程续+传输层UDP协议介绍