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

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

news 2025/11/6 0:09:01

多媒体标签运用

在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

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/8/6 22:35:04

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/11/3 20:53:55

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/7/7 9:39:54

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

编程新知 2025/10/29 10:26:57

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/10/7 3:02:00