当前位置： 首页 > news >正文

web前端多媒体标签设置（图片，视频，音频）以及图片热区（usemap）的设置

news 2025/6/9 0:52:06

多媒体标签运用

在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），不是以窗口页面的坐标为基准。

相关文章：

web前端多媒体标签设置（图片，视频，音频）以及图片热区（usemap）的设置

多媒体标签运用 在HTML中有以下常见多媒体标签&#xff1a; <img> &#xff08;图像标签&#xff09; - 作用&#xff1a;用于在网页中嵌入图像。 - 示例&#xff1a; <img src"image.jpg" alt"这是一张图片"> 。其中 src 属性指定图像的…...

编程日记 2024/11/2 18:09:50

尚硅谷react教程_扩展_stateHook

1.类式组件写 import React, {Component} from react;export default class Demo extends Component {state {count:0}add () > {this.setState(state>({count:state.count1}))}render() {return (<div><h2>当前求和为{this.state.count}</h2><b…...

编程日记 2024/11/2 18:07:46

专线物流公共服务平台：数据驱动，标准引领，共创金融双赢新时代

专线物流公共服务平台&#xff1a;数据驱动&#xff0c;标准引领&#xff0c;共创金融双赢新时代 在当今这个数据驱动、标准引领、金融赋能的经济发展新时代&#xff0c;专线物流作为商贸流通领域的重要一环&#xff0c;正面临着前所未有的机遇与挑战。为应对复杂多变的市场环…...

编程日记 2024/11/2 18:03:42

界面控件DevExpress JS ASP.NET Core v24.1亮点 - 支持Angular 18

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…...

编程日记 2024/11/2 17:59:38

Spring之依赖注入（DI）和控制反转(IoC)——配置文件、纯注解

依赖注入 依赖注入(Dependency Injection&#xff0c;简称 DI)与控制反转(loC)的含义相同&#xff0c;只不过这两 个称呼是从两个角度描述的同一个概念。对于一个 Spring 初学者来说&#xff0c;这两种称呼很难理解, 下面我们将通过简单的语言来描述这两个概念。 当Java对象&…...

编程日记 2024/11/2 17:58:37

基于SpringBoot的宠物健康咨询系统的设计与实现

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;宠物健康知识信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不…...

编程日记 2024/11/2 17:57:35

Lucene的使用方法与Luke工具（2）

文章目录 第2章 Lucene快速入门2.1 项目搭建2.1.1 SQL语句2.1.2 maven依赖2.1.3 实体类&#xff1a;2.1.4 编写DAO&#xff1a; 2.2 建立索引2.2.1 步骤&#xff1a;2.2.2 实现代码&#xff1a; 2.3 Luke工具2.3.1 运行界面介绍&#xff1a;1&#xff09;主界面2&#xff09;文…...

编程日记 2024/11/2 17:56:34

【客户端开发】electron 中无法使用 js-cookie 的问题

产生问题的原因 谷歌浏览器升级之后&#xff0c;出于安全考虑&#xff0c;cookie的SameSite属性默认值由None变为Lax&#xff0c;对于跨域的请求&#xff0c;禁止携带cookie。electron内核是chromium内核,所以也会有这个限制。 Cookie的SameSite属性用来限制第三方 Cookie&…...

编程日记 2024/11/2 17:55:33

kafka客户端消费者吞吐量优化

问题背景 业务场景 mq消息消费实时性要求不高&#xff0c;期望可以牺牲一部分实时性&#xff0c;换取吞吐量&#xff0c;例如&#xff1a;数据库单条insert优化为batchInsert。优化后结果不符合预期&#xff1a;消费者消费消息的batchSize远小于实际配置的max.poll.records&a…...

编程日记 2024/11/2 17:52:29

电子工程师-高质量工具包

目录 来源 高质量工具包介绍 总体框架如下 ZL01-各类元器件相关资料 ZL02-电源设计资料 ZL03-大厂参考资料 ZL04-开发工具 ZL05-仿真工具 ZL06-各类电路接口设计指南 ZL07-付费专栏全集 ZL08-优质电子书 ZL09-硬件工程师 ZL10FPGA工程师教程 ZL10-PCB设计教程 Z…...

编程日记 2024/11/2 17:50:27

简单认识redis - 12 redis锁

在斜体样式**redis中&#xff0c;不同的问题有不一样的解决办法&#xff0c;那么锁也有不同的锁来解决不一样的问题&#xff0c;下面将举出几个常用的redis锁。 1. SETNX锁&#xff08;简单独占锁&#xff09; 原理&#xff1a; SETNX&#xff08;SET if Not eXists&#xff…...

编程日记 2024/11/2 17:49:26

基于springboot+vue车辆充电桩管理系统

基于springbootvue车辆充电桩管理系统 摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;车辆充电桩管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;…...

编程日记 2024/11/2 17:48:25

shodan用法（完）

声明 学习视频来自B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 shodan 今天&#xff0c;我们把shoda…...

编程日记 2024/11/2 17:47:24

【若依框架】代码生成详细教程，15分钟搭建Springboot+Vue3前后端分离项目，基于Mysql8数据库和Redis5，管理后台前端基于Vue3和Element Plus，开发小程序数据后台

今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台&#xff0c;后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码&#xff0c;这就是若依的强大之处&#xff0c;即便你不会Java和vue开发&#xff0c;只要跟着石头哥也可…...

编程日记 2024/11/2 17:46:23

转子侧串级调速系统和双馈调速系统

转子侧串级调速系统和双馈调速系统是两种不同的电机调速技术&#xff0c;它们在基本原理、效率以及应用场景等方面存在区别。以下是详细的对比分析&#xff1a; 基本原理 转子侧串级调速系统&#xff1a;通过在绕线式异步电动机的转子回路中串入一个可调节的附加电势&#xff0…...

编程日记 2024/11/2 17:44:20

AI学习指南自然语言处理篇-Transformer模型的实践

AI学习指南自然语言处理篇 - Transformer模型的实践 目录 引言Transformer模型概述 自注意力机制编码器-解码器结构 环境准备Transformer模型的实现 编码器实现解码器实现Transformer模型整体实现 Transformer在NLP任务中的应用 文本分类机器翻译 总结与展望 引言 在过去的数…...

编程日记 2024/11/2 17:41:17

【LVGL速成】LVGL修改标签文本(GUI Guider生成的字库问题)

目录 前置篇章&#xff1a; 一.问题背景 二.失败方案 三.成功方案 1.Gui guider的源码结构 2.手动生成字体 3.Keil中配置相关文件 ​编辑 4.修改文字 四.字体样式函数说明 前置篇章&#xff1a; 【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)_lvgl…...

编程日记 2024/11/2 17:39:16

C语言项目实践-贪吃蛇

⽬录&#xff1a; 1. 游戏背景 2. 游戏效果演⽰ 3. 实现的⽬标 4. 实现的定位 5. 技术要点 6. 贪吃蛇游戏设计与分析 7. 贪吃蛇游戏数据结构设计 8. 相关Win32API介绍 9. 参考代码 正文开始 1. 游戏背景 贪吃蛇是久负盛名的游戏&#xff0c;它也和俄罗斯⽅块&#xf…...

编程日记 2024/11/2 17:38:14

在kanzi 3.9.8里使用API创建自定义材质

1. kanzi studio设置 1.1 创建一个纹理贴图&#xff0c;起名Render Target Texture 1.2 创建一个Image节点&#xff0c;使用该贴图 2. 代码设置 2.1 创建一个自定义节点类 class mynode2d : public Node2D { public: virtual void renderOverride(Renderer3D& renderer…...

编程日记 2024/11/2 17:37:12

IDEA中通义灵码的使用技巧

大家好&#xff0c;我是 V 哥。在日常写代码的过程中&#xff0c;通过 AI 工具辅助开发已是当下程序员惯用的方式&#xff0c;V 哥在使用了众多的 AI 工具后&#xff0c;多数情况下&#xff0c;选择通义灵码来辅助开发&#xff0c;尤其是解释代码和生成单元测试功能甚是好用&am…...

编程日记 2024/11/2 17:36:09

Three.js怎么工作的？

Three.js 是怎么工作的&#xff1f; Three.js 的核心工作是&#xff1a; 构建一个虚拟的 3D 世界&#xff08;Scene&#xff09; 模拟摄像机视角&#xff08;Camera&#xff09; 用 WebGL 把这个场景“渲染成一张图片” 把这张图片画在 canvas 上 &#x1f449; 所以 Three…...

编程新知 2025/6/9 0:45:44

iOS 门店营收表格功能的实现

iOS 门店营收表格功能实现方案 核心功能需求 数据展示&#xff1a;表格形式展示门店/日期维度的营收数据排序功能&#xff1a;支持按营收金额、增长率等排序筛选功能&#xff1a;按日期范围/门店/区域筛选交互操作&#xff1a;点击查看详情、数据刷新数据可视化&#xff1a;关…...

编程新知 2025/6/8 23:45:32

高保真组件库：数字输入框

拖入一个文本框。 拖入一个矩形，作为整个数字输入框的边框，边框颜色为灰色DCDEE2，圆角半径为4。 拖入一个向上的箭头图标作为增加按钮，再拖入一个矩形，将向上箭头图标放入矩形内。矩形：18x15，边框颜色DCDEE2,边框左下可见，箭头图标：8x5，矩形置底，组合在一起命名”增…...

编程新知 2025/6/8 22:55:15

WINUI——Magewell视频捕捉开发手记

背景 因需要融合视频&#xff0c;并加载患者CT中提取出的气管镜与病变&#xff0c;以便能实时查看气管镜是否在正确位置。 开发环境 硬件&#xff1a;Magewell的USB Capture HDMI Gen 2 IDE&#xff1a;VS2022 FrameWork: .Net6 WINUI Package: MVVMToolKit NLog Ma…...

编程新知 2025/6/8 19:15:37

ASR技术（自动语音识别）深度解析

ASR技术（自动语音识别）深度解析 自动语音识别（Automatic Speech Recognition，ASR）是将人类语音转换为文本的核心技术，以下是其全面解析： 一、技术原理架构 #mermaid-svg-QlJOWpMtlGi9LNeF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:1…...

编程新知 2025/6/8 19:00:49

【第六篇】 SpringBoot的日志基础操作

简介 日志系统在软件开发中至关重要&#xff0c;用于调试代码、记录运行信息及错误堆栈。本篇文章不仅详细介绍了日志对象的创建及快速使用&#xff0c;还说明了日志持久化的两种配置方式和滚动日志的设置。实际开发需根据场景选择合适的日志级别和存储策略。文章内容若存在错误…...

编程新知 2025/6/8 18:52:29

如何从零开始建设一个网站？

当你没有建站的基础和建站的知识&#xff0c;那么应该如何开展网站建设和网站管理。而今天的教程是不管你是为自己建站还是为他人建站都适合的。本教程会指导你如何进入建站&#xff0c;将建站的步骤给大家分解&#xff1a; 首先我们了解一下&#xff0c;建站需要那些步骤和流程…...

编程新知 2025/6/8 8:56:03

如何评估大语言模型效果

评估大模型微调后的效果是一个系统化的过程&#xff0c;需要结合客观指标和主观评估&#xff0c;并根据任务类型&#xff08;分类、生成、回归等&#xff09;选择合适的评估方法。 一、评估前的准备工作 数据集划分&#xff1a; 将数据分为 训练集、验证集 和 测试集&#xff…...

编程新知 2025/6/8 7:01:31

Vue3+Vite中lodash-es安装与使用指南

在 Vue 3 Vite 项目中安装和使用 lodash-es 的详细指南如下&#xff1a; 一、为什么选择 lodash-es&#xff1f; ES 模块支持&#xff1a;lodash-es 以原生 ES 模块格式发布&#xff0c;支持现代构建工具的 Tree Shaking 按需加载&#xff1a;只引入需要的函数&#xff0c;显…...

编程新知 2025/6/8 0:41:12

第3章——SSM整合

一、整合持久层框架MyBatis 1.准备数据库表及数据 创建数据库&#xff1a;springboot 使用IDEA工具自带的mysql插件来完成表的创建和数据的准备&#xff1a; 创建表 表创建成功后&#xff0c;为表准备数据&#xff0c;如下&#xff1a; 2.创建SpringBoot项目 使用脚手架创建…...

编程新知 2025/6/7 21:58:20