HTML5 第003篇 area标签

>1 <area/>区域标签

<area>标签能够在所需图像中设置作用区域，用户可以通过点击该作用区域来替换到相应的页面。

<img src="路径/图片名称" usemap="#mapone"/>

<map name="mapone">

  <area shape="rect" coords="0,0,82,126" target="_blank" alt="" href="/images/course/sun.png"/>

  <area shape="circle" coords="90,58,3" target="_blank" alt="" href="/images/course/mer.gif"/>

  <area shape="circle" coords="124,58,8" target="_blank" alt="" href="/images/course/ven.jpg"/>

</map>

• <area>标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
• <area>元素始终嵌入在<map>标签内部。
• <img/>标签中的usemap属性与<map>元素中的名称相关联，以创建图像与映射之间的关系。
• <area/>是单标记标签，但随时记得他也是闭合标签别漏了斜杠。

  ---

>2 <area/>标签属性

属性	值	描述
alt	文本	规定区域的替代文本。如果使用href属性，则该属性是必需的。
coords	座标	规定区域的坐标。
href	网址	规定区域的目标URL。
hreflang	language_code	规定目标URL的语言。
media	媒体查询	规定的目标URL是为预期媒介/设备优化的。
rel	备用 作者 书签 帮助 许可证 下一个 nofollow  noreferrer 预取 prev 搜索 标签	规定当前文档与目标URL之间的关系。
shape	默认 矩形 圈 多边形	规定区域的形状。
目标	_blank  _parent  _self  _top 框架名称	规定在何处打开目标URL。
键入	MIME_type	规定目标URL的MIME类型。 注：MIME =多用途Internet邮件扩展。

---

alt属性

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

定义和用法

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

• 网速太慢
• src 属性中的错误
• 浏览器禁用图像
• 用户使用的是屏幕阅读器
• 如果使用 href 属性 alt 属性是需要的。

语法

<area alt="text"/>

属性值

值	描述
text	在图片无法显示的情况下指定区域的替代文本。

---

coords属性

定义和用法

• coords属性规定区域的x和y坐标。
• coords属性与 shape属性配合使用，来规定区域的尺寸，形状和位置。
• 提示：图像左上角的坐标是“ 0,0”。

语法

<area coords="value"/>

属性值

值	描述
x1，y1，x2，y2	如果shape属性设置为“ rect”，则该值规定矩形左上角和右下角的坐标。
x，y，半径	如果shape属性设置为“ circ”，则该值规定圆心的坐标和条纹。
x1，y1，x2，y2，..，xn，yn	如果shape属性设置为“ poly”，则该值规定多个各边的坐标。如果第一个坐标和最后一个坐标相互替换，则为了关闭替代，浏览器必须添加最后一对坐标。

---

shape 属性

定义和用法

• shape 属性指定了区域的形状。
• shape 属性与 coords属性配合，可以规定区域的尺寸、形状和位置。

语法

<area shape="default|rect|circle|poly"/>

属性值

值	描述
default	规定全部区域。
rect	定义矩形区域。
circ	定义圆形。
poly	定义多边形区域。

---

href 属性

定义和用法

• href 属性规定区域中连接的目标。
• 如果没有使用href 属性，<area> 标签就不是一个链接。

语法

<area href="URL"/>

属性值

值	描述
URL	链接的 URL。可能的值： 绝对 URL - 指向另一个站点（比如 href="http://www.baidu.com/data.html"） 相对 URL - 指向站点内的某个文件（href="data.html"） 锚 URL - 指向页面中的锚（href="#data"）

---

hreflang 属性

定义和用法

• hreflang 属性用于指定被链接文档的语言。
• 仅在使用 href 属性时才可以指定 hreflang 属性。

语法

<area hreflang="language_code"/>

属性值

值	描述
language_code	双字符的语言代码，指定被链接文档的语言。

---

media属性

定义和用法

 

• media属性指定目标URL将显示在什么设备上。
• 该属性使用与指定的URL显示在指定的设备上（例如iPhone），音频或打印媒介。
• 该属性可以接受多个值。
• 仅在使用了href属性才需要media属性。

语法

<area media="value"/>

---

rel属性

定义和用法

• rel属性规定当前文档与被链接文档之间的关系。

语法

<area rel="value"/>

属性值

值	描述
备用	文档的替代版本（某些打印页，翻译或合并）。
作者	链接到文档的作者。
书签	用于书签的永久网址
救命	链接到帮助文档
执照	链接到文档的版权信息。
下一个	选项中的下一个文档
Nofollow	nofollow是一个HTML标签的属性值。这个标签的意义是告诉搜索引擎“不要追踪此网页上的链接”或“不要追踪此特定链接。”
无推荐人	如果用户点击链接指定浏览不要发送HTTP Referer头部信息。
预取	指定的目标文件应该被缓存
上一个	选项中的前一个文档
搜索	文档链接到搜索工具
标签	当前文档的标签（关键字）

---

target属性

定义和用法

• target属性规定区域中连接的目标。
• 仅在使用了href属性才使用target属性。

语法

<area target="_blank|_self|_parent|_top|framename"/>

属性值

值	描述
_blank	在新窗口中打开被链接文档。
_self|	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

---

 一直在路上，自律，坚持