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

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. 知识图谱与机器学习 | KG入门 -- Part1-b 图深度学习

    介绍 我们正在定义一种新的机器学习方法,专注于一种新的范式 -- Data Fabric. 在上一篇文章中,我们对机器学习给出了新的定义: 机器学习是一种自动发现Data Fabric中隐藏的&quo ...

  2. ConcurrentHashMap（1.7版本和1.8版本）

     为什么要使用ConcurrentHashMap? ConcurrentHashMap是Java5中新增加的一个线程安全的Map集合,可以用来替代hashMap和HashTable.因为在并发编程中使 ...

  3. Python python 五种数据类型--数字

    一:Number 数字 不可变类型 整型(Int) - 通常被称为是整型或整数,是正或负整数,不带小数点. 长整型(long integers) - 无限大小的整数,整数最后是一个大写或小写的L.(P ...

  4. ios shell打包脚本 gym

    #! /bin/bash project_path=$() project_config=Release output_path=~/Desktop build_scheme=YKTicketsApp ...

  5. Java多线程问题40个

    1.多线程有什么用? 一个可能在很多人看来很扯淡的一个问题:我会用多线程就好了,还管它有什么用?在我看来,这个回答更扯淡.所谓”知其然知其所以然”,”会用”只是”知其然”,”为什么用”才是”知其所以然 ...

  6. 解决Pycharm导入当前项目的.py文件错误

    如图所示错误,由左边导航栏可见.py文件存在: 解决办法:右键单击导包错误文件所在目录,选择[Mark Directory as]+[Sources Root] 错误已解决:

  7. html ajax 异步加载 局部刷新

    1. getJSON 优点: 简单高效,直接返回处理好的json数据 缺点: 只能使用get请求和使用json数据 <script src ='jquery.min.js'></sc ...

  8. [斯坦福大学2014机器学习教程笔记]第五章-控制语句：for,while,if语句

    在本节中,我们将学习如何为Octave程序写控制语句. 首先,我们先学习如何使用for循环.我们将v设为一个10行1列的零向量. 接着,我们写一个for循环,让i等于1到10.写出来就是for i = ...

  9. HDU-1421-搬寝室（01背包改编版）

    搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3号楼,因为10号要封楼了.看着寝室里的n件物品,xhd开始发呆,因为n是一个小于2000的整数,实在是太 ...

  10. 谷歌 MapReduce 初探

    谷歌“三驾马车”的出现,才真正把我们带入了大数据时代,毕竟没有谷歌,就没有大数据. 上次的分享,我们对谷歌的其中一驾宝车 GFS 进行了管中窥豹,虽然只见得其中一斑,但是也能清楚的知道 GFS 能够把 ...