当前位置: 首页 > 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 …...

深入解析Cache机制:从原理到性能优化实战

1. 从理论到实战&#xff1a;Cache概念的职场觉醒第一次真正理解Cache的重要性&#xff0c;是在我接手硬件性能监控项目的那一刻。当时领导让我用perf工具监控处理器性能&#xff0c;输入perf list后满屏的cache-misses、cache-loads指标让我彻底懵了——这些在大学《计算机组成…...

政府科技管理部门如何优化区域科技创新治理?

观点作者&#xff1a;科易网-国家科技成果转化&#xff08;厦门&#xff09;示范基地 摘要 在数智时代背景下&#xff0c;区域科技创新治理的复杂性显著提升&#xff0c;传统治理模式面临资源分散、服务碎片化、匹配效率低等核心痛点。政府科技管理部门亟需借助“数智产品共享…...

三千年的欲望、痕迹与自感:资本批判与伦理中间件

三千年的欲望、痕迹与自感&#xff1a;资本批判与伦理中间件岐金兰 丙午神农---引言&#xff1a;被命名的与未命名的在人类文明的长河中&#xff0c;有一个东西从未缺席&#xff0c;却长期被剥夺了命名的权利。它比语言更古老&#xff0c;比理性更顽强&#xff0c;比任何社会制…...

OpenClaw安装部署Mac操作系统版 - 打造你的专属AI助理

【第二篇】OpenClaw安装部署Mac操作系统版 - 打造你的专属AI助理摘要&#xff1a;Mac系统是OpenClaw的最佳部署平台之一。本文详细介绍在macOS上安装部署OpenClaw的完整流程&#xff0c;包括环境准备、多种安装方式、权限配置等内容&#xff0c;让Mac用户轻松搭建AI智能体平台。…...

新手入门指南:在快马平台上通过openclaw切换模型理解ai编程差异

作为一个刚开始接触AI编程的新手&#xff0c;我最近在InsCode(快马)平台上尝试了openclaw切换模型的功能&#xff0c;发现这个功能特别适合用来理解不同AI模型的代码生成特点。整个过程就像有个耐心的老师在旁边手把手教学&#xff0c;完全不需要任何编程基础就能上手。下面我就…...

Agno 多 Agent 实战(二):搭建完整内容创作流水线

前情回顾 上一篇我们用路由模式做了一个智能问答系统,路由模式适合单步任务,一次分配。今天分享的是更复杂的场景:多步骤协作。 很多任务不是一步能做完的,比如写一篇文章:得先找资料,再写初稿,再审核修改,最后排版。这就需要多个 Agent 一步步协作,我们可以用协调模…...

GNSS导航信号模拟器 卫星导航定位模拟器 GNSS卫星导航定位信号模拟器行业应用解决方案 GNSS模拟器

随着全球卫星导航系统的全面建设与深度应用&#xff0c;各类卫星导航定位授时终端已广泛渗透到交通、物联网、通信、测绘、消费电子等众多领域。但在终端产品的研发、测试、量产全流程中&#xff0c;行业长期面临诸多核心痛点&#xff1a;传统外场实地测试模式需投入大量人力物…...

Ltspice-线性电流控制电流源F/电压源H

上一篇我们聊了功能强大的任意行为源&#xff08;BV/BI&#xff09;&#xff0c;它们像是一个可以编写任意公式的“万能计算器”。而在实际电路中&#xff0c;还有一类更基础、更经典的元件&#xff0c;它们遵循严格的线性比例关系&#xff0c;这就是我们今天要介绍的线性受控源…...

4步攻克Unity资源难题:UABEA全能提取工具完全指南

4步攻克Unity资源难题&#xff1a;UABEA全能提取工具完全指南 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 你是否曾因无法打开Unity资源包&#xff08;Unity游戏的资源容器文件&#xff09;而束手无…...

Qwen2.5-14B-Instruct开源模型落地:像素剧本圣殿短视频脚本批量生成

Qwen2.5-14B-Instruct开源模型落地&#xff1a;像素剧本圣殿短视频脚本批量生成 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct深度微调的专业剧本创作工具。它将顶尖的AI推理能力与8-Bit复古美学完美融合&#xff0c…...