HTML area 标签

🌙
手机阅读
本文目录结构

HTML <area> 标签功能

<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。

<area> 元素始终嵌套在 <map> 标签内部。

HTML <area> 标签使用

带有可点击区域的图像映射:

<img src="https://a.axihe.com/assets/axihe-qrcode.png"
  width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="tag-canvas.html">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="tag-figcaption.html">
  <area shape="circle" coords="124,58,8" alt="Venus" href="tag-figure.html">
</map>

HTML <area> 标签演示

Planets

Sun Mercury Venus

浏览器支持

所有主流浏览器都支持 <area> 标签。


注意事项

注释: <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联,以创建图像与映射之间的关系。


HTML4 与 HTML5 之间的差异

HTML5 提供了一些新属性,同时不再支持 HTML4 中的某些属性。


HTML 与 XHTML 之间的差异

在 HTML 中,<area> 标签没有结束标签。

在 XHTML 中,<area> 标签必须正确地关闭。


属性

New :HTML5 中的新属性。

属性 描述
alt text 规定区域的替代文本。如果使用 href 属性,则该属性是必需的。
coords coordinates 规定区域的坐标。
href URL 规定区域的目标 URL。
hreflangNew language_code 规定目标 URL 的语言。
mediaNew media query 规定目标 URL 是为何种媒介/设备优化的。默认:all。
nohref value HTML5 不支持。 规定没有相关链接的区域。
relNew alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系。
shape default
rect
circle
poly
规定区域的形状。
target _blank
_parent
_self
_top
framename
规定在何处打开目标 URL。
typeNew MIME_type 规定目标 URL 的 MIME 类型。

注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<area> 标签支持 HTML 全局属性


事件属性

<area> 标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>