首先我们看下这个标签到底是干什么的！

W3C的定义：

然后兼容性：

然后与之配套使用的另一个标签：

<area/>规定其区域；

我们来看看<map>标签支不支持全局属性；=====》

发现它是支持全局属性的；

使用方法：其实<map>只是给浏览器做了一个说明，我要对一个图片创建一个区域映射；所以我们还得有一张图片指向<map>标签。作为指向那么是唯一的；所以我们可以设置id与图片对应；还可以设置name与其进行对应；

如下code；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Map标签的用法</title>

        <style type="text/css">

            div{

                width: 800px;

                height: 800px;

                position: relative;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="CsOuterdiv">

            <h2>Map标签的用法</h2>

            <img src="../../img/Sky.jpg" style="width: 600px;height: auto;" />

            <map></map>

        </div>

    </body>

</html>

//首先注意：<area/>是个单标签；

它的属性有；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Map标签的用法</title>

        <style type="text/css">

            div {

                width: 800px;

                height: 800px;

                position: relative;

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="CsOuterdiv">

            <h2>Map标签的用法</h2>

            <img src="../../img/Sky.jpg" style="width: 600px;height: auto;" usemap="#MyfirstMap" border="0" alt="testimg" />

            <map id="MyfirestMap" name="MyfirstMap">

                <area shape="circle" coords="180,139,14" href ="http://www.baidu.com" alt="百度" />

                 <area shape="circle" coords="129,161,10" href ="http://jingdong.com" alt="京东" />

                  <area shape="rect" coords="0,0,110,260" href ="http://taobao.com" alt="淘宝" />

            </map>

        </div>

    </body>

</html>

今天我们谈一下HTML标签中的<map>标签的用法和使用场景的更多相关文章

  1. HTML之body标签中的相关标签补充

    一 列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,“无序列表”的意思. b.li ...

  2. HTML之body标签中的相关标签

    一 字体标签   字体标签包含:h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub& ...

  3. 前端 ------ 03 body标签中的相关标签

    列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 列表标签分为三种. 1.无序列表&l ...

  4. Spring源码分析（九）解析默认标签中的自定义标签元素

    摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 到这里我们已经完成了分析默认标签的解析与提取过程,或许涉及的内容太多,我 ...

  5. 03-----body标签中的相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...

  6. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  7. 02 body标签中的相关标签

    今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  8. 10-2 body标签中相关的标签（字体标签，排版标签（div,span），超链接，图片标签）

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  9. JS从后台获取数据，前台动态添加tr标签中的td标签

    功能描述: 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息: 文章目录 #一.前台jsp及js源码 jsp:在固定的tr标签中添加一个id,通过j ...

随机推荐

  1. java-TreeMap

    2019-12-17 10:34:55 //返回小于key的第一个键: K lowerKey(K key); //返回大于key的第一个键: K higherKey(K key); //返回小于等于k ...

  2. 【转】.strip().split('t')和.strip().split()

    https://blog.csdn.net/qq_35290785/article/details/94780620 .strip().split('t')line =' nihao, zhenhao ...

  3. 两行代码统计模型参数量与FLOPs，这个PyTorch小工具值得一试

    你的模型到底有多少参数,每秒的浮点运算到底有多少,这些你都知道吗?近日,GitHub 开源了一个小工具,它可以统计 PyTorch 模型的参数量与每秒浮点运算数(FLOPs).有了这两种信息,模型大小 ...

  4. 使用Python+OpenCV进行图像处理（三）| 视觉入门

    检测是计算机视觉任务中的主要任务之一,而且应用很广泛.检测技术可以帮助人类检测那些容易被肉眼忽略的错误:也可以"帮助"自动驾驶汽车感知空间信息.无疑自动化的检测技术的广泛应用将为我 ...

  5. Spring Boot熟稔于心的20个常识

    1.什么是 Spring Boot? Spring Boot 是 Spring 开源组织下的子项目,是 Spring 组件一站式解决方案,主要是简化了使用 Spring 的难度,简省了繁重的配置,提供 ...

  6. spring中BeanPostProcessor之一：InstantiationAwareBeanPostProcessor（01）

    在spring中beanPostProcessor绝对是开天辟地的产物,给了程序员很多自主权,beanPostProcessor即常说的bean后置处理器. 一.概览 先来说下Instantiatio ...

  7. Kubernetes实战总结 - Prometheus部署

    什么是普罗米修斯? Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包 . 自2012年成立以来,许多公司和组织都采用了Prometheus,该项目拥有非常活跃的开发人员 ...

  8. C 神奇项链

    时间限制 : - MS   空间限制 : - KB  评测说明 : 1s,64m 问题描述 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字母组成的字符串,每个小写字母表 ...

  9. B - Bound Found POJ - 2566(尺取 + 对区间和的绝对值

    B - Bound Found POJ - 2566 Signals of most probably extra-terrestrial origin have been received and ...

  10. 定位 iframe

    定位iframe # 1.有id,并且唯一,直接写id driver.switch_to_frame("x-URS-iframe") driver.switch_to.frame( ...