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> 标签来指定多种格式的视频文件。最后在标签内的文本是当浏览器不支持视频播放时显示的内容。

效果图

完整代码

html 复制代码

<!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> 标签）相关联。

创建图像映射（ <map> 标签）

首先要定义一个图像映射区域，例如：

第一步

html 复制代码

<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 属性提供替代文本。

关联图像与图像映射（ usemap 属性）

第二步

然后，使用 usemap 属性将图像和图像映射关联起来，例如：

html 复制代码

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

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

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