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

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. 探索学习率设置技巧以提高Keras中模型性能 | 炼丹技巧

      学习率是一个控制每次更新模型权重时响应估计误差而调整模型程度的超参数.学习率选取是一项具有挑战性的工作,学习率设置的非常小可能导致训练过程过长甚至训练进程被卡住,而设置的非常大可能会导致过快学习到 ...

  2. 开发一个健壮的npm包

    项目地址:loan-calculate-utils npm包的发布.更新查看上一篇文章 开发一个基础的npm包 目前我们的目录是这个样子: . ├── source 源代码目录 │   └── ind ...

  3. Jmeter4.0接口测试之断言实战（六）

    在接口测试用例中得有断言,没有断言的接口用例是无效的,一个接口的断言有三个层面,一个是HTTP状态码的断言,另外一个是业务状态码的断言,最后是某一接口请求后服务端响应数据的断言.在Jmeter中增加断 ...

  4. 分布式爬虫scrapy-redis

    第一步 下载scrapy模块: pip install scrapy-redis 第二步 创建项目 在终端/cmd进入创建项目的目录: cd 路径: scrapy startproject douba ...

  5. 对webpack和gulp的理解和区别

    webpack是前端构建工具,称为模块打包机,webpack支持模块化:构建前端开发过程中常用的文件,如:js,css,html,img等:使用简单方便,自动化构建.webpack是通过loader( ...

  6. 【Java技术系列】爱情36技之追美妹的技术

    1. 在古老的非洲大陆上,有个原始人无意中抬头仰望星空,凝视的时间稍微长了一些,超过了外星人设置的阈值,立刻拉响了人类即将产生文明的警报.因为外星人认为,人类已经产生了对宇宙的好奇心,文明的产生,科技 ...

  7. Java 连接数据库总是报错

    mysql账号密码是正确的,但是一直报账号密码错误. 报错信息: java.sql.SQLException: Access denied for user 'root'@'localhost' (u ...

  8. iOS开发|从小公司到进大厂，我的进阶学习之旅！

    iOS高级进发 OC源码下载地址 苹果开发文档 如何阅读苹果开发文档 GNUstep是GNU计划的项目之一,它将Cocoa的OC库重新开源实现了一遍 源码地址:http://www.gnustep.o ...

  9. 1078 Hashing (25分)

    The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...

  10. Android | 教你如何开发扫二维码功能

    前言   最近要做一个停车场扫码收费的app,在网上搜了一圈,首先接触到了ZXing,上手试了下,集成过程不复杂,但是感觉效果欠佳,比如距离稍微远点儿就扫不出来了,另外角度对的不好,反光或者光线比较暗 ...