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

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. win10 Redis闪退问题

    问题:双击redis-server.exe,闪退 解决办法:win+R,输入cmd进入命令行模式,接着cd进入Redis安装根目录,再输入:redis-server.exe redis.windows ...

  2. dirname,basename的用法与用途

    #dirname介绍 当对文件使用dirname时,返回文件的上级目录,输出是否是绝对路径取决于输入的文件名是绝对路径 如果对目录使用,则返回上级目录 basename命令与dirname相反,读取文 ...

  3. 终极解决方案——sbt配置阿里镜像源，解决sbt下载慢，dump project structure from sbt耗时问题

    #sbt下载慢的问题 默认情况下,sbt使用mvn2仓库下载依赖,如下载scalatest时,idea的sbtshell 显示如下url https://repo1.maven.org/maven2/ ...

  4. Homebrew中国镜像安装与配置

    1.删除旧Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/u ...

  5. 使用SpringCloud将单体迁移至微服务

    使用SpringBoot构建单体项目有一段时间了,准备对一个老项目重构时引入SpringCloud微服务,以此奠定后台服务能够应对未知的业务需求. 现在SOA架构下的服务管理面临很多挑战,比如面临一个 ...

  6. Django-CBV&FBV

    django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. urls.py from django.conf.u ...

  7. Java技巧之——判断相等

    变量值的判断是java中重要的一部分 通常我们判断两个值是否相等,使用的是两个等号 == 为了防止少写一个等号,造成无法挽回的失误,判断写为下面的格式 int a; 12==a; 原理是不能将任何东西 ...

  8. Xshell连接Centos7

    13:53:10 2019-08-05 一个月暑假开始 学习搭建一个自己的博客 我是用阿里云的服务器搭建自己的博客 先利用XShell连接我的服务器 XShell下载地址:https://www.ne ...

  9. MyBatis 学习笔记（1）

    MyBatis 的基本构成 SqlSessionFactoryBuilder(构造器):它会根据配置信息或者代码来生成 SqlSessionFactory(工厂接口) SqlSessionFactor ...

  10. ViewResolver视图解析器简单介绍

    导言:同学们有没有想过这样一个问题,就是客户端每次请求之后,Spring MVC是怎么把请求响应成一个视图的?相信很多同学清楚如何使用,却不清楚Spring MVC里面是如何返回视图,那么,今天我们就 ...