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

HTML <map> 标签的使用

map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档。

编写格式:

<img src="图片" border="0" usemap="#planetmap" alt="Planets" style="width: 100px;height: 100px;" /><map name="planetmap" id="planetmap"><areashape="circle"coords="0,0,110,260"href="跳转链接"alt="Mercury"/></map>

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

其中area标签主要的值有alt、cooreds、href、shape、target等

1、alt属性

定义:规定区域的替代文本。

说明:如果写href属性,则alt属性是必写的

2、cooreds属性

定义:定义相关区域的坐标

说明:和shape属性搭配使用

  (1)当shape属性为rect时,代表相关区域为矩形,则cooreds属性值为(x1,y1,x2,y2),其中x1,y1为左上角的坐标,x2,y2为右下角的坐标;

  (2)当shape属性为circle时,代表相关区域为圆形,则cooreds属性值为(x,y,radius),其中x,y为圆形的中心坐标,radius为圆形的半径;

  (3)当shape属性为poly时,代表相关区域为多边形,则cooreds属性值为(x1,y1,x2,y2,x3,y3......xn,yn),规定了多边形各个顶点的坐标,由于浏览器会自动闭合多边形,所以尾部坐标不必与第一个坐标相等。

3、href属性

定义:定义了相关区域所连目标

说明:href属性一般有三种值

  (1)绝对路径:通常用来指向其他的网站如(href="https://www.baidu.com")

  (2)相对路径:通常用来指向自身网站内的某个文件如(href="//favicon.ico")

  (3)锚链接:通常用来指向页面中的锚如(href="#header")

4、shape属性

定义:定义了相关区域的形状

说明:(1)默认值(default):规定全部区域

           (2)rect:规定相关区域为矩形

           (3)circle:规定相关区域为圆形

           (4)poly:规定先关区域为多边形

5、target属性

定义:定义了在何处打开目标链接

说明:(1)_blank:在新窗口打开被链接的文档

           (2)_self:默认,在相同框架中打开被链接的文档

           (3)_parent:在父框架集中打开被链接的文档

           (4)_top:在整个窗口中打开被链接文档

   (5)framename:在指定框架中打开被链接文档

area标签有些时候也可以当做a标签的替代品,因为a标签并不能直接嵌套a标签,在某些情况下,我们又不得不用,那么我们可以把a标签替换为area标签,使布局更加简单。

相关文章:

HTML <map> 标签的使用

map标签的用途&#xff1a;是与img标签绑定使用的&#xff0c;常被用来赋予给客户端图像某处区域特殊的含义&#xff0c;点击该区域可跳转到新的文档。 编写格式&#xff1a; <img src"图片" border"0" usemap"#planetmap" alt"Planets…...

stable diffusion实践操作-大模型介绍

本文专门开一节写大模型相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 模型下载网站 国内的是&#xff1a;https://www.liblibai.com 国外的是&#xff1a;https://civitai.com&#xff08;科学上网&#xff09; 一、发展历…...

W5500-EVB-PICO进行MQTT连接订阅发布教程(十二)

前言 上一章我们用开发板通过SNTP协议获取网络协议&#xff0c;本章我们介绍一下开发板通过配置MQTT连接到服务器上&#xff0c;并且订阅和发布消息。 什么是MQTT&#xff1f; MQTT是一种轻量级的消息传输协议&#xff0c;旨在物联网&#xff08;IoT&#xff09;应用中实现设备…...

90、00后严选出的数据可视化工具:奥威BI工具

90、00后主打一个巧用工具&#xff0c;绝不低效率上班&#xff0c;因此当擅长大数据智能可视化分析的BI数据可视化工具出现后&#xff0c;自然而然地就成了90、00后职场人常用的数据可视化工具。 奥威BI工具三大特点&#xff0c;让职场人眼前一亮&#xff01; 1、零编程&…...

删除maven中出现.lastUpdate结尾的文件

出现 .lastupdate 结尾的文件的原因:由于网络原因没有将maven的依赖下载完整. 解决方案: 1) 删除所有以 .lastupdate 结尾的文件 A) 1.切换到maven本地仓库 B)2.在当前目录打开cmd命令行(shift右键-->在此处打开命令窗口 或 直接在当前文件路径上敲cmd 或 右键-->…...

Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘

webpack打包js文件中不允许混用import和module.exports。 方式①&#xff1a;babel.config.js添加sourceType: {"presets": [...],"sourceType": "unambiguous" }方式②&#xff1a;安装babel-plugin-transform-es2015-modules-commonjs npm …...

Dockerfile中编译、打包、部署spring boot项目

1、Dockerfile 1.1、什么是Dockerfile Dockerfile是自动构建docker镜像的配置文件&#xff0c;将镜像构建过程通过指令的方式定义在Dockerfile中。配合docker build命令行可以实现自动化的Docker镜像的构建。 1.2、Dockerfile语法解析 我们在学习一门语言或文档语法的时候&am…...

微型计算机原理知识点总结(一)

目录 一.微型计算机 二.微型计算机系统 1.微型计算机硬件系统 冯诺依曼体系结构 总线 (1)微处理器(CPU) 运算器 控制器 内部寄存器 (2)存储器 1.基本概念 2.内存的操作 3.内存的分类 (3)I/O接口与输入/输出设备 2.微型计算机软件系统 (1)系统软件 操作系统 …...

【postgresql 基础入门】psql客户端的使用方法

psql 客户端使用 ​专栏内容&#xff1a; postgresql内核源码分析手写数据库toadb并发编程 ​开源贡献&#xff1a; toadb开源库 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xf…...

QTcpSocket发送数据方法

文章目录 一、简介二、write(const char *, qint64)三、isValid() 一、简介 本文主要记录QTcpSocket的write(const char *, qint64)和isValid()。 二、write(const char *, qint64) 概念&#xff1a;在QTcpSocket中&#xff0c;使用write(char* data, int size)函数将指定长…...

select 语句执行顺序

sql 样例 select t_students.name as 姓名, sum(case when b.cname语文 then c.sc_val else 0 end) As 语文 ,sum(case when b.cname数学 then c.sc_val else 0 end) As 数学,sum(case when b.cname英语 then c.sc_val else 0 end) As 英语, From t_students a, t_corses b, t…...

PMD 检查java代码:避免将内部数组直接返回给调用者(MethodReturnsInternalArray)

https://docs.pmd-code.org/pmd-doc-6.55.0/pmd_rules_java_bestpractices.html#methodreturnsinternalarray 直接将内部数组暴露给调用者破坏了封装性&#xff0c;因为调用者可能在拥有内部数组的对象外部更改或者删除数组的元素。返回内部数组的拷贝会更加安全。 例如&…...

ActiveMQ配置初探

文章目录 配置wrapper相关配置wrapper是干什么用的MQ的运行内存修改【需修改】修改内容题外话 wrapper.log配置【需修改】引起的问题优化方式 activemq.xml相关配置官网介绍配置管理后台的认证授权【建议修改】配置broker【根据自己需求更改】配置允许jmx监控关闭消息通知持久化…...

【官方中文文档】Mybatis-Spring #示例代码

示例代码 提示 查看 JPetstore 6 demo 了解如何在完整的 Web 应用服务器上使用 Spring。 您可以在 MyBatis-Spring 的 代码仓库 中查看示例代码&#xff1a; 所有示例都能在 JUnit 5 下运行。 示例代码演示了事务服务从数据访问层获取域对象的典型设计。 FooService.java …...

python二级例题

请编写程序&#xff0c;生成随机密码。具体要求如下&#xff1a;‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬ &#xff08;1&#xff09;使用 rand…...

【java】【项目实战】[外卖九]项目优化(缓存)

目录 一、问题说明 二、环境搭建 2.1 Git管理代码 2.1.1 创建本地仓库 2.1.2 创建远程仓库 2.1.3 创建分支--》推送到远程仓库 2.2 maven坐标 2.3 配置文件application.yml 2.4 配置类RedisConfig 三、缓存短信验证码 3.1 实现思路 3.2 代码改造 3.2.1 UserContro…...

Scala集合常用函数与集合计算简单函数,高级计算函数Map和Reduce等

Scala集合常用函数与集合计算简单函数 1.Scala集合常用函数 基本属性和常用操作 1.常用函数&#xff1a; &#xff08;1&#xff09; 获取集合长度&#xff08;2&#xff09; 获取集合大小&#xff08;3&#xff09; 循环遍历&#xff08;4&#xff09; 迭代器&#xff08;…...

You must install at least one postgresql-client-<version> package

使用主机上的映射端口来连接到 PostgreSQL 数据库。例如&#xff0c;使用以下命令连接到数据库&#xff1a; psql -h localhost -p 5432 -U postgres出现下面的问题&#xff1a; 分析&#xff1a; 如果您在运行 psql 命令时遇到错误消息 You must install at least one pos…...

爬虫源码---爬取自己想要看的小说

前言&#xff1a; 小说作为在自己空闲时间下的消遣工具&#xff0c;对我们打发空闲时间很有帮助&#xff0c;而我们在网站上面浏览小说时会被广告和其他一些东西影响我们的观看体验&#xff0c;而这时我们就可以利用爬虫将我们想要观看的小说下载下来&#xff0c;这样就不会担…...

【AGC】云数据库API9开发问题汇总

【问题描述】 云数据库HarmonyOS API9 SDK已经推出了一段时间了&#xff0c;下面为大家汇总一些在集成使用中遇到的问题和解决方案。 【问题分析】 1. 报错信息&#xff1a;数据库初始化失败&#xff1a;{“message”&#xff1a;“The object type list and permission …...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...