area标签

文献种类：专题技术文献；
开发工具与关键技术： 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