• HTML <!--...--> 注释标签
  • HTML <!DOCTYPE> 声明
  • HTML <a> 标签
  • HTML <abbr> 标签
  • HTML <acronym> 标签 - HTML5 不支持
  • HTML <address> 标签
  • HTML <applet> 标签 - HTML5 不支持
  • HTML <area> 标签
  • HTML <article> 标签
  • HTML <aside> 标签
  • HTML <audio> 标签
  • HTML <b> 标签
  • HTML <base> 标签
  • HTML <basefont> 标签 - HTML5 不支持
  • HTML <bdi> 标签
  • HTML <bdo> 标签
  • HTML <big> 标签 - HTML5 不支持
  • HTML <blockquote> 标签
  • HTML <br> 标签
  • HTML <button> 标签
  • HTML <canvas> 标签
  • HTML <caption> 标签
  • HTML <body> 标签
  • HTML <center> 标签 - HTML5 不支持
  • HTML <cite> 标签
  • HTML <code> 标签
  • HTML <col> 标签
  • HTML <colgroup> 标签
  • HTML <command> 标签
  • HTML <datalist> 标签
  • HTML <dd> 标签
  • HTML <dl> 标签
  • HTML <dt> 标签
  • HTML <del> 标签
  • HTML <details> 标签
  • HTML <dfn> 标签
  • HTML <dialog> 标签
  • HTML <dir> 标签 - HTML5 不支持
  • HTML <div> 标签
  • HTML <embed> 标签
  • HTML <fieldset> 标签
  • HTML <figcaption> 标签
  • HTML <figure> 标签
  • HTML <font> 标签 - HTML5 不支持
  • HTML <footer> 标签
  • HTML <frame> 标签 - HTML5 不支持
  • HTML <frameset> 标签 - HTML5 不支持
  • HTML <head> 标签
  • HTML <header> 标签
  • HTML <hgroup> 标签
  • HTML <h1> - <h6> 标签
  • HTML <hr> 标签
  • HTML <em> 标签
  • HTML <i> 标签
  • HTML <iframe> 标签
  • HTML <img> 标签
  • HTML <input> 标签
  • HTML <ins> 标签
  • HTML <kbd> 标签
  • HTML <keygen> 标签
  • HTML <label> 标签
  • HTML <legend> 标签
  • HTML <li> 标签
  • HTML <link> 标签
  • HTML <map> 标签
  • HTML5 <mark> 标签
  • HTML <menu> 标签
  • HTML <meta> 标签
  • HTML <meter> 标签
  • HTML <nav> 标签
  • HTML <noframes> 标签HTML5不支持该标签
  • HTML <noscript> 标签
  • HTML <object> 标签
  • HTML <ol> 标签
  • HTML <optgroup> 标签
  • HTML <output> 标签
  • HTML <option> 标签
  • HTML <p> 标签
  • HTML <param> 标签
  • HTML <form> 标签
  • HTML <pre> 标签
  • HTML <html> 标签
  • HTML5 <progress> 标签
  • HTML <q> 标签
  • HTML <rp> 标签
  • HTML <rt> 标签
  • HTML <ruby> 标签
  • HTML <s> 标签
  • HTML <samp> 标签
  • HTML <script> 标签
  • HTML <section> 标签
  • HTML <select> 标签
  • HTML <small> 标签
  • HTML <source> 标签
  • HTML <span> 标签
  • HTML <strike> 标签 - HTML5 不支持
  • HTML <strong> 标签
  • HTML <style> 标签
  • HTML <sub> 标签
  • HTML <summary> 标签
  • HTML <sup> 标签
  • HTML <table> 标签
  • HTML <tbody> 标签
  • HTML <td> 标签
  • HTML <textarea> 标签
  • HTML <tfoot> 标签
  • HTML <th> 标签
  • HTML <thead> 标签
  • HTML <time> 标签
  • HTML <title> 标签
  • HTML <tr> 标签
  • HTML <track> 标签
  • HTML <tt> 标签 - HTML5 不支持
  • HTML <u> 标签
  • HTML <ul> 标签
  • HTML <var> 标签
  • HTML <video> 标签
  • HTML <wbr> 标签
  •  
    当前位置:  教程>HTML标签参考手册

    HTML <area> 标签

     
        发布时间:2017-1-14  


        本文导语: HTML<area>标签实例带有可点击区域的图像映射:<img src=/it-htmltag/"http_/www_/planets.gif width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area...

     

    HTML <area> 标签


    实例

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

    <img src="http://www.169it.com/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap">  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>



    浏览器支持

    Internet Explorer Firefox Opera Google Chrome Safari

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


    标签定义及使用说明

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

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

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


    HTML 与 XHTML 之间的差异

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

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


    属性列表

    New :HTML5 中的新属性。

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

    HTML <area> 标签的常用属性coords 属性详细介绍


    HTML <area> 标签的 coords 属性定义和用法

    coords 属性规定区域的 x 和 y 坐标。

    coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。

    图像左上角的坐标是 "0,0"。

    详细解释:

    <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

    下面列出了每种形状的适当值:

    圆形:shape="circle",coords="x,y,z"

    这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素单位的圆形半径。

    多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

    每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

    多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

    矩形:shape="rectangle",coords="x1,y1,x2,y2"

    第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法

    例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。

    <map name="map">
      <area shape="rect" coords="75,75,99,99" nohref="/it-htmltag/nohref/index.html">
      <area shape="circ" coords="50,50,25" nohref="/it-htmltag/nohref/index.html">
    </map>

    HTML <area> 标签的 coords 属性提示和注释

    注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

    语法

    <area coords="value">

    属性值

    描述

    x1,y1,x2,y2 如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。

    x,y,radius 如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。

    x1,y1,x2,y2,..,xn,yn 如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。

    全局属性

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


    事件属性

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



    • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:HTML <area> 标签
    相关文章推荐:


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3