html< area>标签

原创 PHP笔记  2017-05-05 23:24  阅读 951 views 次

html中<area>标签定义了图像映射内部的区域,所谓图像映射是指带有可点击区域的图像。<area>标签都是存在于<map>标签中,<map>标签和<img>标签是通过name属性和usemap属性相关联,以创建图像与映射之间的关系。

<area>标签属性

  • alt:区域的替代文本。
  • coords:区域的坐标。
  • href:区域的目标url。
  • hreflang:目标url的语言,html5中的新属性。
  • media:目标url是为何种媒介/设备优化的,html5中的新属性。
  • nohref:没有相关链接的区域,html5不支持。
  • rel:当前文档与目标url之间的关系,html5中的新属性。
  • shape:区域的形状。
  • target:在何处打开目标url。
  • type:目标url的 MIME 类型,html5中的新属性。

<area> 标签支持html全局属性和html事件属性。

格式:

<area shape="形状" coords="坐标" href="目标URL">

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html< area>标签_PHP笔记</title>
</head>
<body>
<img src="https://www.ggbiji.com/wp-content/themes/Nana2.09/images/logo.png" width="300px" height="70px" alt="PHP笔记logo" usemap="#logo">
<map name="logo">
<area shape="rect" coords="0,0,70,70" alt="图标" href="#">
<area shape="rect" coords="85,0,280,50" alt="PHP笔记" href="#">
<area shape="rect" coords="85,50,275,70" alt="www.ggbiji.com" href="#">
</map>
<h3>上面图片被分为3个区域</h3>
</body>
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/html-area.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情