html5map标签的用法(html5 map标签)

技术html5中map标签怎么用小编给大家分享一下html5中map标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

边肖将与你分享如何在html5中使用地图标签。相信大部分人还不太了解,所以分享这篇文章给大家参考。希望你看完这篇文章会有很多收获。我们一起来看看吧!

html5中的map标签用于定义客户端图像映射,即具有可点击区域的图像。语法是“映射名称=‘值’./地图”。图像元素可以参照标签的“名称”属性实现图像映射,因此“名称”属性必不可少。

本教程操作环境:windows10系统,HTML5版本5,戴尔G3电脑。

地图标签用于客户端图像映射。图像映射是指具有可点击区域的图像。

img中的usemap属性可以引用地图中的id或name属性(取决于浏览器),因此我们应该将id和name属性都添加到地图中。

区域元素始终嵌套在地图元素中。区域元素定义了图像地图中的区域。

语法如下:

映射名称=“值”./地图示例如下:

超文本标记语言

metachartset=' utf-8 '

标题123/标题

/head

身体

p点击太阳或其他行星,注意变化:/p

imgsrc='大行星. gif ' width=' 145 ' height=' 126 ' alt='大行星' usemap='#planetmap '

mapname='planetmap '

areashape='rect'coords='0,0,82,126'alt='Sun'href='sun.htm '

areashape='circle'coords='90,58,3 ' alt=' Mercury ' href=' mercur . htm '

areashape='circle'coords='124,58,8'alt='Venus'href='venus.htm '

/地图

/body

/html html输出结果:

html5中map标签怎么用

当你点击图片时,你会跳转到页面:

html5中map标签怎么用

以上就是文章“如何在html5中使用地图标签”的全部内容。感谢您的阅读!相信大家都有一定的了解,希望分享的内容对大家有所帮助。想了解更多知识,请关注行业资讯频道!

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/150508.html

(0)

相关推荐

  • 非常值得一看的电视剧,有什么你反复在看的剧推荐

    技术非常值得一看的电视剧,有什么你反复在看的剧推荐每人喜欢的类型不同,我前段时间迷上了商战剧,推荐看《乔家大院》。理由有三非常值得一看的电视剧:一,情怀,剧情设计,积极向上。以山西商人为背景,讲述了当地人做生意的规则,互

    生活 2021年10月25日
  • javascript内存泄漏有哪些原因

    技术javascript内存泄漏有哪些原因本篇内容介绍了“javascript内存泄漏有哪些原因”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔

    攻略 2021年11月20日
  • 古典密码学——移位密码 Shift Cipher

    技术古典密码学——移位密码 Shift Cipher 古典密码学——移位密码 Shift Cipher移位密码的理论基础是数论中的模运算。模运算的基本定义:假设a和b均为整数,m是一正整数。若m整除a-

    礼包 2021年12月3日
  • 涨粉丝1元1000个粉丝平台,有什么好的抖音刷粉平台?

    技术涨粉丝1元1000个粉丝平台,有什么好的抖音刷粉平台?涨粉丝1元1000个粉丝平台,有什么好的抖音刷粉平台?抖音的推出让许多网友在闲暇之余又有了一种消遣的方式,也出现了众多的抖音大咖网红。很多人在抖音上有众多的粉丝,

    测评 2021年11月11日
  • 如何用3个步骤实现响应式Web设计

    技术如何用3个步骤实现响应式Web设计本篇文章给大家分享的是有关如何用3个步骤实现响应式Web设计,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。写在前面的话

    攻略 2021年11月17日
  • Hibernate日志类别有哪些

    技术Hibernate日志类别有哪些本篇内容主要讲解“Hibernate日志类别有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Hibernate日志类别有哪些”吧!在H

    攻略 2021年12月4日