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 属性
定义和用法
语法
<area shape="default|rect|circle|poly"/>属性值
| 值 | 描述 |
|---|---|
| default | 规定全部区域。 |
| rect | 定义矩形区域。 |
| circ | 定义圆形。 |
| poly | 定义多边形区域。 |
href 属性
定义和用法
- href 属性规定区域中连接的目标。
- 如果没有使用href 属性，<area> 标签就不是一个链接。
语法
<area href="URL"/>属性值
| 值 | 描述 |
|---|---|
| URL | 链接的 URL。可能的值：
|
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 | 在指定的框架中打开被链接文档。 |
一直在路上，自律，坚持
类似资料：