HTML代码教程
【HTML教程】HTML的area标签|html入门知识
时间: 2024-12-26 10:28:30 浏览次数:13
常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了: 【定义和用法】 area 标签

常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:


【定义和用法】

area 标签定义图像映射内的区域(图像映射是带有可点击区域的图像,也就是客户端的分区响应图)。

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

注意:img 中的 usemap 属性 与 map 元素 的 name 属性相关联,创建图像与映射之间的关联。


【实例】

例子 1

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

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">

<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>


例子 2

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

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap"><map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html"></map>


【属性】

HTML的area标签|html入门知识


【全局属性】

area 标签还支持 HTML 中的全局属性。


【事件属性】

area 标签还支持 HTML 中的事件属性。


【默认的 CSS 设置】

大多数浏览器将使用以下默认值显示 area 元素:

area {
  display: none;}


友情链接: 知识付费 | EDU指南导航 | 小程序开发 | 上网行为管理 | 小程序开发公司 | 企业财务服务 | 职校招生网 |
Copyright©2011 Guangzhou Longtengfei Network Technology Co., Ltd. 广州龙腾飞网络科技有限公司 粤ICP备18029205号 XML地图 | 系统开发专题地图