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

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. [WPF]总结一些我在开发WPF时常用的工具

    我从一万二千年前开始写XAML,这么多年用了很多各式各样的工具,现在留在电脑里的.现在还在用的.在写WPF时用的也就那么几个.这篇文章总结了这些工具,希望这些工具可以让WPF开发者事半功倍. 1. V ...

  2. 【狂神说】JAVA Mybatis 笔记+源码

    简介 自学的[狂神JAVA]MyBatis GitHub源码: https://github.com/Donkequan/Mybatis-Study 分享自写源码和笔记 配置用的 jdk13.0.2 ...

  3. python plt 色卡

    https://blog.csdn.net/Strive_For_Future/article/details/100151261 plt 绘图时通常需要各种颜色,还需要去介绍文档找,很麻烦,这里把p ...

  4. Python第七章-面向对象

    面向对象编程基础 一.面向对象概念 1.1 什么是面向过程 ​ 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了. ​ 生活中的的例子举例. 1.2 ...

  5. Redis调用lua生成验证码

    场景: ​ 通过微信公众号拿验证码在APP上绑定,为了防止重复,尝试使用reids-lua的方法实现此功能 以下是 php 调用 redis.eval 方法传入的 lua 方法,当然这只是修改后的,保 ...

  6. iOS UITableView优化

    一.Cell 复用 在可见的页面会重复绘制页面,每次刷新显示都会去创建新的 Cell,非常耗费性能.  解决方案:创建一个静态变量 reuseID,防止重复创建(提高性能),使用系统的缓存池功能. s ...

  7. jdk安装和配置教程

    目录 jdk的下载 jdk的安装 配置环境变量 验证是否配置成功] 一些常见的错误(待更新) 一.首先是jdk的下载 链接:https://pan.baidu.com/s/1ojQDuCwiGSA7A ...

  8. SimpleITK 和 Nibabel 读取医学图像 nii 数据（2D显示）

    SimpleITK 和 Nibabel 区别在于:(nii图像可以看成2维,也可以看成三维) SimpleITK读取数据是(X,Y,Z)显示,Nibabel读取图像是(Z,Y,X)显示,也就是Niba ...

  9. javascript创建函数的方法

    函数对任何语言来说都是一个核心的概念.函数,是一种封装(将一些语句,封装到函数里面). 通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. ECMAScript中的函数使用funct ...

  10. 【tensorflow2.0】处理结构化数据-titanic生存预测

    1.准备数据 import numpy as np import pandas as pd import matplotlib.pyplot as plt import tensorflow as t ...