文献种类：专题技术文献；
开发工具与关键技术： VS/HTML
<area/>标签
开发工具与关键技术：VS/HTML
作者：吴泽锋
撰写时间：2019年5月16日
1、<area/>标签
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。
area 元素总是嵌套在 <map> 标签中：
在 HTML 中，<area> 没有结束标签；
在 XHTML 中，<area> 必须正确地关闭；
注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），
所以我们需要同时向 <map> 添加 id 和 name 两个属性。
元素 "area" 缺少必需的特性 "alt"，area元素表示图像地图上一个带有某些文本的超链接和相应区域，
或图像地图上的死区域：如：<area alt=""/>
当存在 "href" 时才允许使用特性，且特性 "alt" 必须具有值： <area alt="0" href="" />
必需属性：
属性 值 描述
alt text 定义此区域的替换文本。
语法：<area alt=" value "/>
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器；
<area> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，
代替图像显示在浏览器中的内容。强烈推荐在文档的每个图像中都使用这个属性。
这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。
而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式。
所有主流浏览器支持 alt 属性的方式有所不同。
href URL 定义此区域的目标 URL。
语法：<area href=" value "/>
href 属性规定区域中连接的目标。
URL链接的 URL。可能的值：
绝对 URL - 指向另一个站点（比如 href="http://www.baidu.com/"）；
相对 URL - 指向站点内的某个文件（href="Planets-Venus.html"）；
锚 URL - 指向页面中的锚（href="# Planets"）,前提是定义了<a name=" Planets ">锚（显示在页面上的文本）</a>
可选属性
属性 值 描述
coords 坐标值(x,y,r) 定义此区域的目标 URL。
语法：<area coords=" value "/>
coords属性规定区域的 x 和 y 坐标。
coords属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。
详细解释：
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。
坐标的数字及其含义取决于 shape 属性中决定的区域形状。
可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
圆形circular：shape="circle"，coords="x,y,r "；
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形polygon：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."；
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。
定义三角形至少需要三组坐标； 高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。
矩形rectangle：shape=" rect "，coords="x1,y1,x2,y2"；
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。
请注意：义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。
否则浏览器会忽略超过图像边界范围之外的坐标。
nohref nohref 从图像映射排除某个区域。
nohref 属性规定该区域没有相关的链接。语法：<area nohref=" value "/>
target _blank 、_parent 、_self 、_top规定在何处打开 href 属性指定的目标 URL。
target 属性规定区域中连接的目标。
语法：<area target="value">
属性值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
shape default 、rect 、circle 、poly 定义区域的形状。
语法：<area shape=" value "/>
shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
shape属性详细解释：
shape 属性用于定义图像映射中对鼠标敏感的区域的形状：
名称 属性值 描述
default 规定全部区域
圆形（circle或circular） circle 定义圆形
多边形（poly 或 polygon） poly 定义多边形区域
矩形（rect 或 rectangle） rect 定义矩形区域
shape 属性的值会影响浏览器对 coords 属性的解释。
如果未使用 shape 属性，那么会假设使用值 default。
依照标准，default 意味着该区域覆盖整个图像。
在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。
如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。
可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，
以用于在超过其他热点定义的范围之外单击的情况。
由于区域在 <map> 标签中是采用“先来先得”的顺序，
所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。
例： 带有可点击区域的图像映射：
<img src="~/Content/light/Planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="412,309,30"
href="~/Content/light/Planets-Venus.html"
target="_blank" alt="Venus" />
<area shape="circle" coords="297,357,18"
href="~/Content/light/Planets-Mercury.html"
target="_blank" alt="Mercury" />
<area shape="circle" coords="-350,270,600"
href="~/Content/light/Planets-Sun.html"
target="_blank"alt="Sun" />
</map>
<p>
<b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），
所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>
借鉴与W3School与老师上课文档
例： 带有可点击区域的图像映射：图片
Planets.jpg
从 Planets 图片开始从左依次为
Planets-Sun
Planets-Mercury
Planets-Venus
