Web速查-索引

定义

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 <map> 标签中。

属性

属性 值 描述
alt text 定义此区域的替换文本。
coords coordinates 定义可点击区域（对鼠标敏感的区域）的坐标。
download filename 该属性（如果存在）表明开发者想把超链接用于下载一个资源。
href URL 定义此区域的目标 URL。
hreflang language_code 指示链接资源的语言。仅当存在 **href ** 属性时才使用此属性。
media media query 链接资源的媒体提示，例如 print and screen。如果省略，则默认为 all。仅当存在** href** 属性时才使用此属性。
rel alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag 对于包含 href 属性的锚点，此属性指定目标对象与链接对象的关系。仅当存在 href 属性时才使用此属性。
shape default、rect、circ、poly 定义区域的形状。
target _blank、_parent、_self、_top 规定在何处打开 href 属性指定的目标 URL。
type media_type 该属性指定了用于链接目标的MIME类型的媒体类型。

实例

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<title>鱼C-零基础入门学习Web（Html5+Css3）</title>

<body>

    <p>请点击图像上F和C的最下末端圆点</p>

    <img

        src="../img/logo.png"

        border="0" usemap="#fishc"

        alt="Planets" />



    <map name="fishc" id="fishc">

    <!--中心x，中心y，半径-->

    <area

            shape="circle"

            coords="109,63,10"

            href ="area1.html"

            target ="_blank"

            alt="F" />

    <!--左上角坐标x，左上角坐标y，横轴，纵轴-->

    <area

            shape="rect"

            coords="0,0,66 ,77"

            href ="area2.html"

            target ="_blank"

            alt="Python" />



    </map>

    <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

</html>
Planets F Python

注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。


<!DOCTYPE html>

<html lang="en">

<meta charset="UTF-8">

<title>鱼C-零基础入门学习Web（Html5+Css3）</title>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

   <img

        src="http://fishc.oss-cn-hangzhou.aliyuncs.com/AD/time-management-1966421_960_720.png"

        border="0" usemap="#fishc"

        alt="Python" />

</body>

</html>
Python 


<!DOCTYPE html>

<html lang="en">

<meta charset="UTF-8">

<title>鱼C-零基础入门学习Web（Html5+Css3）</title>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

   <img

        src="http://fishc.oss-cn-hangzhou.aliyuncs.com/AD/web.png"

        border="0" usemap="#fishc"

        alt="F" />



</body>

</html>
F

视频讲解