今天我们谈一下HTML标签中的map标签的用法和使用场景

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

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>

View Code

//首先注意：<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>

View Code

转载于:https://www.cnblogs.com/alideai/p/7868112.html

今天我们谈一下HTML标签中的map标签的用法和使用场景相关推荐

[html] 当html中使用map标签时,area中coords值如何精确定位呢？
[html] 当html中使用map标签时,area中coords值如何精确定位呢? 在 area 标签上支持的属性有 shape.coords.href.alt.target.type.downlo ...
让DIV标签中的p标签内容水平垂直居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
html p内容居中,html中如何让DIV标签中的P标签水平和垂直都居中？
html中如何让DIV标签中的P标签水平和垂直都居中? 让DIV标签中的P标签水平和垂直都居中 div { width:400px; height:300px; border:1px solid #6 ...
Html中的map标签
图像的影像地图超链接,<map>标签浅谈在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超 ...
HTML中的map标签的使用
map 的意思是热点图片,可以在一张图片中定义一些热点,这些热点可以实现超链接等. 在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下: <img src=img. ...
java中content啥意思_JSTL标签中的body-content标签体内容输出格式的介绍
我们在JSTL标签中看到"JSP"这种类型的定义,但是不知道它是什么意思,其实它的意思就是定义了一个JSTL标签内部是否允许使用JSP表达式,先来了解什么是JSTL标签体,请看代码 ...
【转】HTML中的map标签
html中的Map,area标签详解工具 Imagination Image Map Editor 一.定义和用法定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图 ...
html文本框后面紧挨着按钮,HTMLbody标签中的相关标签2
列表标签 ul ol dl 列表标签分为三种:无序列表 ul 有序列表 ol 定义列表 dl 无序列表< ul >, 无序列表中的每一项是 < li > 张三李四王五效果 ...
HTML之body标签中的相关标签补充
一列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: a.ul:unordered list,"无序列表" ...

今天我们谈一下HTML标签中的map标签的用法和使用场景

今天我们谈一下HTML标签中的map标签的用法和使用场景相关推荐

最新文章

热门文章