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

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

news 2026/3/31 12:30:09

多媒体标签运用

在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

从安防摄像头到直播：手把手教你用ZLMediaKit搭建GB28181视频监控平台

从安防摄像头到直播&#xff1a;手把手教你用ZLMediaKit搭建GB28181视频监控平台 在智能安防和物联网快速发展的今天&#xff0c;视频监控系统的网络化和智能化已成为行业标配。GB28181作为国内视频监控领域的国家标准协议&#xff0c;实现了不同厂商设备间的互联互通。而ZLMed…...

编程新知 2026/3/31 11:23:11

告别兼容性问题：手把手教你用canvas和base64转换TIFF图片

前端工程师必备&#xff1a;TIFF图片处理全攻略与实战解决方案 在当今数字内容爆炸式增长的时代&#xff0c;图片处理已成为前端开发中不可或缺的一环。作为专业开发者&#xff0c;我们经常需要面对各种图片格式的兼容性问题&#xff0c;其中TIFF&#xff08;Tagged Image Fil…...

编程新知 2026/3/31 11:17:09

终极无损视频剪辑神器：LosslessCut完整指南与5大实用技巧

终极无损视频剪辑神器&#xff1a;LosslessCut完整指南与5大实用技巧 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 你是否曾因视频剪辑导致画质下降而烦恼&#xff…...

编程新知 2026/3/31 10:00:21

Bilibili-Evolved性能优化实战：突破60fps流畅播放全解析

Bilibili-Evolved性能优化实战&#xff1a;突破60fps流畅播放全解析 【免费下载链接】Bilibili-Evolved 强大的哔哩哔哩增强脚本 项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved Bilibili-Evolved作为强大的哔哩哔哩增强脚本&#xff0c;通过深度优化浏…...

编程新知 2026/3/31 9:07:54

霜儿-汉服-造相Z-Turbo模型推理优化：理解与避免神经网络中的耦合过度

霜儿-汉服-造相Z-Turbo模型推理优化&#xff1a;理解与避免神经网络中的耦合过度 不知道你有没有遇到过这种情况&#xff1a;想让AI画一个穿汉服的女孩&#xff0c;结果出来的图&#xff0c;发型和衣服总是一起“跑偏”。比如&#xff0c;你想生成一个“唐代齐胸襦裙”的造型&…...

编程新知 2026/3/31 7:47:24

从Stable Diffusion到多模态大模型：图文交错数据如何让AI学会‘边想边画’？

图文交错数据&#xff1a;多模态大模型实现"边想边画"的关键突破 当Stable Diffusion以惊艳的画质震惊世界时&#xff0c;人们很快发现它存在一个根本局限——这个能画出精美图像的模型&#xff0c;却无法理解自己笔下的内容。与此同时&#xff0c;擅长理解图像的多模…...

编程新知 2026/3/31 5:36:20

BGE-M3优化指南：CPU环境下提升语义分析推理速度的3个技巧

BGE-M3优化指南&#xff1a;CPU环境下提升语义分析推理速度的3个技巧 1. 引言 在当今企业级AI应用中&#xff0c;语义相似度分析已成为知识检索、智能客服和内容推荐等场景的核心技术。BAAI/bge-m3作为当前最强大的开源语义嵌入模型之一&#xff0c;以其卓越的多语言支持和长…...

编程新知 2026/3/31 5:22:11

Phi-4-mini-reasoning应用场景：密码学协议安全性逻辑推演与攻击路径模拟

Phi-4-mini-reasoning应用场景&#xff1a;密码学协议安全性逻辑推演与攻击路径模拟 1. 模型概述 Phi-4-mini-reasoning是由微软开发的3.8B参数轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。该模型主打"小参数、强推理、长上下文、低延…...

编程新知 2026/3/31 4:48:01

从零实践：个人电脑上运行26M小参数GPT的预训练、微调与推理全流程指南

1. 为什么选择26M小参数GPT 在个人电脑上训练大语言模型听起来像天方夜谭&#xff0c;但26M参数的GPT模型让这成为可能。这个参数规模比主流的数十亿参数模型小了上千倍&#xff0c;但保留了GPT的核心架构和训练流程。我实测下来&#xff0c;在消费级显卡&#xff08;如RTX 306…...

编程新知 2026/3/31 4:27:13

ngx_http_init_static_location_trees

1 定义 ngx_http_init_static_location_trees 函数 定义在 ./nginx-1.24.0/src/http/ngx_http.cstatic ngx_int_t ngx_http_init_static_location_trees(ngx_conf_t *cf,ngx_http_core_loc_conf_t *pclcf) {ngx_queue_t *q, *locations;ngx_http_core_loc_conf_…...

编程新知 2026/3/31 3:20:18