HTML ＜area＞ 标签

最新推荐文章于 2024-03-17 16:43:58 发布
最新推荐文章于 2024-03-17 16:43:58 发布
阅读量820 收藏 1
点赞数
分类专栏： # python语言基础 文章标签： html firefox 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mask5726/article/details/130589248
版权
本文介绍了HTML中的＜area＞标签，用于定义图像映射的可点击区域。所有主流浏览器都支持此标签。在HTML中，＜area＞没有结束标签，但在XHTML中需要正确关闭。实例展示了一个带有可点击区域的图像映射，并提到<map>标签与<img>的usemap属性的配合使用。
摘要由CSDN通过智能技术生成

实例

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

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

浏览器支持

<
元素 Chrome IE Firefox Safari Opera
<abbr>
了解本专栏 订阅专栏 解锁全文 超级会员免费看
玄链教育
关注
专栏目录
订阅专栏
HTML ＜map＞ 标签
玄链教育
07-09 975
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
HTML之area标签
WebFocus
03-24 285
1） 标签定义图像映射中的区域。 2） area 元素总是嵌套在 标签中。 3） 所有主流浏览器都支持 标签。 4） 属性 [table] |属性 |值 |描述 |coords |坐标值 |定义可点击区域（对鼠标敏感的区域）的坐标。 |href |URL |定义此区域的目标 URL。 |nohref |nohref |从图像映射排除某个区域。 |shap...
html area 标签,HTML <area> 标签 | Paoo教程
weixin_36251341的博客
06-20 124
HTML 标签实例带有可点击区域的图像映射：width="145" height="126"alt="Planets"usemap="#planetmap">name="planetmap">尝试一下 »浏览器支持列表IEFirefoxChromeSafariOpera所有主流浏览器都支持 标签。标签定义及使用说明 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。...
HTML5的 <area> 标签
qq_35515563的博客
02-28 759
HTML 的标签之前工作中比较少用到，以下是个人通过理解完成的demo。 一、w3c中对 标签的解释： 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。 二、shape 的三个参数及使用说明： 1.圆形：shape="ci
htmlarea
04-16
NULL 博文链接：https://alfusen-xiong.iteye.com/blog/1775943
01-HTML5新的语义标签比如 <header>, <footer>, <article>, <section>,<aside>等
weixin_44077629的博客
03-09 414
HTML5新的语义标签： header footer nav main section aside article mark 定义有记号的文本 time details 定义元素的细节。（详细信息） summary 为 元素定义可见的标题。 figure 定义媒介内容的分组，以及它们的标题。 figcaption 定义 figure...
帮我写一个关于篮球的网页，要求只用html的标签和属性，使用如下的标签和属性(1)、基础标签 <meta> 属性charset，取值为utf-8； 属性http-equiv，取值为 expires/refresh； 属性name，取值为keywords、roborts。 属性content，注意content与不同属性搭配时的对应取值含义。 <title> <h1….h6> <p> <div> <section> <article> <aside> <footer> <address> <head> (2)、表单 <form> 属性action、method、target、enctype <input> 属性type，取值为radio、checkbox、file、password、text、submit、date、email、tel、range， 另外还有属性required、placeholder、pattern (3)、下拉选择列表和选项列表 <select> <optgroup> <datalist> <option> (4)、列表 <ul> <ol> <li> (5)、表格 <table> <tr> <th> <td> (6)、图像与映射 <img> 属性src、usemap <map> <area> 属性coords、href、shape、target (7)、链接 <a> <link> (8)、其他 <button> <canvas> <style> <script> <audio> <video>不使用css和Javascrip，
06-01
<html> <head> <meta charset="UTF-8"> <meta name="keywords" content="篮球"> <meta name="robots" content="index,follow"> <title>篮球</title> </head> <body> <header> <h1>篮球</h1> </header> <nav>...
请帮我写一个关于王勃和他的出名的诗的网页，要求只使用html5的标签和属性，至少使用35个标签和15个属性，网页中需要用到至少以下常用标签和属性，不要在本次实验中出现CSS样式和js代码。 (1)、基础标签 <meta> 属性charset，取值为utf-8； 属性http-equiv，取值为 expires/refresh； 属性name，取值为keywords、roborts。 属性content，注意content与不同属性搭配时的对应取值含义。 <title> <h1….h6> <p> <div> <section> <article> <aside> <footer> <address> <head> (2)、表单 <form> 属性action、method、target、enctype <input> 属性type，取值为radio、checkbox、file、password、text、submit、date、email、tel、range， 另外还有属性required、placeholder、pattern (3)、下拉选择列表和选项列表 <select> <optgroup> <datalist> <option> (4)、列表 <ul> <ol> <li> (5)、表格 <table> <tr> <th> <td> (6)、图像与映射 <img> 属性src、usemap <map> <area> 属性coords、href、shape、target (7)、链接 <a> <link> (8)、其他 <button> <canvas> <style> <script> <audio> <video>
06-01
<area shape="rect" coords="0,0,100,100" href="https://baike.baidu.com/item/%E6%BB%95%E7%8E%8B%E9%98%81" target="_blank" alt="滕王阁百度百科"> </map> </article> <article> <h3>《秋风词》</...
HTML5 第003篇 area标签
ml_YSY的博客
11-03 1281
>1 <area/>区域标签 <area>标签能够在所需图像中设置作用区域，用户可以通过点击该作用区域来替换到相应的页面。 <img src="路径/图片名称" usemap="#mapone"/> <map name="mapone"> <area shape="rect" coords="0,0,82,126" target="_blank" alt="" href="/images/course/sun.png"/>
什么是HTMLArea
何辉
12-08 1571
 转贴自 http://jedi.org/p4/l10n/HTMLArea/reference.html甚麼是 HTMLArea?HTMLArea 是一套自由的 WYSIWYG 編輯器, 能取代 欄位. 祇要在妳的網頁中加入幾列簡單的 JavaScript 源碼, 就可以把標準的 textarea 換成豐富的文字編輯器, 藉此妳可以: 將文字加上粗體, 斜體, 底線等不
HTML <area><map>标签及在实际开发中的应用
大头菜的博客
06-05 2434
HTML 标签及在实际开发中的应用 by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6115 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。 之前，我一直以为HTML 是一个鸡肋HTML，估计到了HTML5时代会被废弃的命。但是，最近一查资料，乖乖了个咚，不仅没被废弃，反而发展了，
HTML 《area》 标签
A29jhltds的博客
02-19 544
所有主流浏览器都支持 标签。 标签可以在图像上划分区域，这些区域是可以点击的，并且对应不同的操作。 标签定义及使用说明： 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。 元素始终嵌套在 标签内部。 注释： 标签中的 usemap 属性与 元素中的 name 相关联，以创建图像与映射之间的关系。 HTML 4.01 与 HTML5之间的差异：http://www.i...
HTML 图片热点区域＜area＞
weixin_46670730的博客
05-17 1534
html的标签使用详解，对图片标签生成热点区域
html area标签详解
weixin_30785593的博客
10-15 284
<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。 area 元素总是嵌套在 <map> 标签中。 注：<img> 标签中的 usemap 属性与 <map>元素 name 属性相关联，创建图像与映射之间的联系。<img> 中的 usemap 属性可引用 <map> 中的 id...
html area图片热点的使用介绍附相关属性一览表
younger_z的专栏
07-13 1725
标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下： class和id：是分别指定热点的类型和id号。 alt：用于设定热点的替代性文字。 href：用于设定该热点所链接的url地址。 shape和coords：是两个主要的参数，用于设定热
html中area标签高亮和添加背景颜色
最新发布
qq_62143596的博客
03-17 731
公司要求写一个demo案例，需要用到图片热区，此时便想到了html中的map+area功能，该功能可以实现图片热区的添加。具体的Map area百科。原文链接：https://blog.csdn.net/a57321563/article/details/106406104。由于用户需求，需要使热区产生背景颜色，本人尝试了许多方法，发现css并不能对area区域产生效果。疯狂搜索解决方案，最终找了的jquery.maphilight.js这个神奇的库。使用的area功能画了矩形边框，可以绑定事件.
html中处于中心的标签,html area标签详解
weixin_42559413的博客
06-03 212
标签定义图像映射中的区域(注：图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在 标签中。注： 标签中的 usemap 属性与 元素 name 属性相关联，创建图像与映射之间的联系。 中的 usemap 属性可引用 中的 id 或 name 属性(由浏览器决定)，所以我们需要同时向 添加 id 和 name 两个属性。案例链接：http://www.w3school.com...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值