• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： html5 中文手册 -> html5 标签 -> html5 图片和多媒体

    <area>

    HTML <area>元素在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。

    浏览器支持

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

    例子

    <map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" nohref />
</map>

    标签定义及使用说明

    • <area>标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
    • <area>元素始终嵌套在<map>标签内部。
    内容分类流式内容元素，短语内容
    允许的内容它是一个空的元素不允许嵌套任何子元素或者文本。
    标签省略能允许有开始标签不允许有结束标签。
    允许的父元素<area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。
    DOM接口HTMLAreaElement

    属性

    该元素包括全局属性。

    • alt在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在HTML4中，这个属性时必需的，但是可以是一个空的串("")。在HTML5中，这个属性只有在href属性被使用的时候才是必需的。
    • coords给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形，这个coords值为两个X,Y对：左上、右下。对于圆形，这个值是x,y,r，这里的x,y是一对确定圆的中心的坐标而r则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里，值可能是像素数量或者百分比，区别是不是有%出现; HTML5里，只可能是像素的数量.
    • hrefarea的超链接，值为一个URL. HTML4里，这个值不管是不是有值都要明确指定出来. HTML5里则不需要.
    • target本属性指明了在什么地方显示链接的资源。本属性只能在指明href属性之后使用.HTML4里，这个值是一个frame的链接或者关键字. HTML5里，它是一个浏览器上下文(比如：标签，窗口或者内嵌的frame)的链接或者关键字。值的含义:
      • _self:在当前区域加载链接指向的资源。这个是默认值.
      • _blank:在新的未命名的窗口或者tab里加载超链接资源.
      • _parent:在父级加载超链接资源. HTML4里，是当前frame的父级, HTML5里是当前的浏览器上下文，如果当前环境没有父级，行为和_self一样.
      • _top: HTML4里：将响应加载到完整的原始窗口中，取消所有其他帧。在HTML5中：将响应加载到顶级浏览上下文(也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与_self相同
    • shape相关联的热点的形状。HTML 5和HTML4的规范定义了值rect，它定义了一个矩形区域；圆圈，它定义了一个圆形区域；多边形，它定义了一个多边形；默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是Internet Explorer 4和更高版本，支持弧形、多边形和矩形作为形状的有效值；这些值{{Non-standard_inline}}。
    • type该属性指定了用于链接目标的MIME类型的媒体类型。只有当href属性存在时才使用该属性。一般来说，这是严格的咨询信息；然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav时，浏览器可能会添加一个小的扬声器图标。
    • downloadHTML5新增
      这个属性如果存在的话，表明作者想把超链接用于下载一个资源。请查看<a>获得关于download属性的完整描述。
    • hreflangHTML5新增
      指明链接资源的语言类型，值的范围参考BCP47.这个属性只能在指明href属性之后使用.
    • nameTHML5中废弃
      为可点击区域定义一个名字以使旧浏览器解析。
    • mediaHTML5新增
      指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在href属性存在情况下使用。
    • relHTML5新增
      对于包含href属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当href属性是presen时才使用该属性
    • accesskeyTHML5中废弃
      为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按ALT或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自HTML5以来是全局性的。
    • nohrefTHML5中废弃
      指明此区域没有超链接。在<area>中必须存在nohref或者href。
    • tabindexTHML5中废弃
      用于指定浏览器tab键获取焦点的顺序。在html5中是全局属性。

    属性

    属性值描述
    alttext规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
    coordscoordinates规定区域的坐标。
    hrefURL规定区域的目标 URL。
    hreflang HTML5新增language_code规定目标 URL 的语言。
    media HTML5新增media query规定目标 URL 是为何种媒介/设备优化的。默认：all。
    nohrefvalueHTML5 不支持。规定没有相关链接的区域。
    rel HTML5新增alternate
    author
    bookmark
    help
    license
    next
    nofollow
    noreferrer
    prefetch
    prev
    search
    tag    		规定当前文档与目标 URL 之间的关系。
    shapedefault
    rect
    circle
    poly    		规定区域的形状。
    target_blank
    _parent
    _self
    _top
    framename    		规定在何处打开目标 URL。
    type HTML5新增MIME_type规定目标 URL 的 MIME 类型。
    注：MIME = Multipurpose Internet Mail Extensions。

    HTML 4.01 与 HTML5之间的差异

    HTML5 提供了一些新属性，同时不再支持 HTML 4.01 中的某些属性。

    HTML 与 XHTML 之间的差异

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

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

    全局属性

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

    事件属性

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

    实例

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

    <img src="planets.gif" width="145" height="126" alt="planets" usemap="#planetmap" />
<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="sun" />
	<area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury" />
	<area shape="circle" coords="124,58,8" href="venus.htm" alt="venus" />
</map>

    <img src ="planets.gif" alt="planets" usemap ="#planetmap" /> 
<map id ="planetmap">
	<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="sun" />
	<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="mercury" />
	<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="venus" />
</map>

    下篇：<audio>