HTML5的 <area> 标签

最新推荐文章于 2024-07-09 22:15:00 发布
最新推荐文章于 2024-07-09 22:15:00 发布
阅读量719 收藏 1
点赞数 1
文章标签： html5 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35515563/article/details/58595369
版权

HTML <area> 的标签之前工作中比较少用到，以下是个人通过理解完成的demo。


一、w3c对<area> 标签的解释：

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


二、shape 的三个参数及使用说明：

1.圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
2.多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
3.矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如，下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在图像的正中间定义了一个圆形区域。


PS：<area> 标签外部需要嵌套一个map标签如：<map name="planetmap" id="planetmap"> planetmap 则关联我们需要显示的图片区域。

完成后鼠标hover后的效果如下：


未经过本人允许，请勿私自转载，谢谢！

w3c官方：

http://www.w3school.com.cn/tags/att_area_coords.asp



以下是个人的demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>erea标签使用</title>
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>
	<p>鼠标指在（嘴巴、眼睛、小小黑）具体位置上，进行title提示或者href链接操作</p>
	<img src="images/timg.jpg" usemap="#planetmap" alt="Planets" />
	
	<map name="planetmap" id="planetmap">
		<!-- 多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." -->
		<area shape="polygon" coords="78,112,99,112,88,130" href="###" alt="Sun1" title="我是嘴巴" />
		<area shape="polygon" coords="159,153,185,153,197,174,195,188,190,192,154,192,145,184,145,173" href="###" alt="Sun3" title="我是小小黑" />

		<!-- 矩形：shape="rectangle"，coords="x1,y1,x2,y2" -->
		<area shape="rectangle" coords="70,150,113,190" href="###" alt="Sun3" title="一双小手" />
		<!-- 圆形：shape="circle"，coords="x,y,z" -->
		<area shape="circle" coords="58,76,22" href="###" alt="Sun2" title="左眼睛" />
		<area shape="circle" coords="127,78,22" href="###" alt="Sun3" title="右眼睛" />
	</map>
</body>
</html>


  
  

   
   









  
  







                

        

        

    




    

      

        

            

              
                
                  QQ_286115751
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
HTML ＜area＞ 标签

				
			

			

				

					玄链教育
				

				

					05-09
					
					798
					
				

			

		

		

			
				
area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。area 元素总是嵌套在  标签中。

			
		

	



                

              
                



	

		

			

				
					
HTML5 第003篇 area标签

				
			

			

				

					ml_YSY的博客
				

				

					11-03
					
					1241
					
				

			

		

		

			
				
>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"/>

 

			
		

	



                


  
              

                


	

		

			

				
					
Html中的area元素的属性应用范例

				
			

			

				

					weixin_33738982的博客
				

				

					05-21
					
					163
					
				

			

		

		

			
				
属性:shape=""rectangle/rect矩形：支持4个坐标polygon/poly多边形：支持10个坐标circle/circ圆形：支持3个坐标属性:coords=""<!--坐标1,坐标2,坐标3-->属性:href=""<!--跳转页面-->范例:<?xml version="1.0" ?>
<...

			
		

	





	

		

			

				
					
HTML中设置连接的区域为圆形,三种方式实现圆形可点击区域

				
			

			

				

					weixin_39719729的博客
				

				

					06-11
					
					743
					
				

			

		

		

			
				
1. map和area将img和map标签连起来的是usemap，它的值是map的idarea属性：shape：表示热点区域的形状，支持rect(矩形)，circle(圆形)，poly(多边形)coords：表示热点区域的坐标，(0,0)表示图片左上角。rect四个值分别表示左上角坐标和右下角坐标。circle三个值分别表示圆心坐标和半径。poly有若干个值，每两个表示一个坐标点。href：表示链...

			
		

	



		

			
		



	

		

			

				
					
HTML map标签与area标签 图片热区 使用说明

				
			

			

				

					coderwwh的博客
				

				

					08-10
					
					2918
					
				

			

		

		

			
				
有时提供了一张图,需要在图片具体位置做点击操作,这时候用热区图是最好的选择,是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。

			
		

	





	

		

			

				
					
html area怎么找坐标,详解 html area标签

				
			

			

				

					weixin_28955629的博客
				

				

					05-31
					
					1119
					
				

			

		

		

			
				
标签定义图像映射中的区域(注：图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在  标签中。注： 标签中的 usemap 属性与  元素 name 属性相关联，创建图像与映射之间的联系。 中的 usemap 属性可引用  中的 id 或 name 属性(由浏览器决定)，所以我们需要同时向  添加 id 和 name 两个属性。属性值：href : 点击区域跳转的链接。alt : 图...

			
		

	





	

		

			

				
					
HTML5标签

				
			

			

				

					......的博客
				

				

					08-23
					
					386
					
				

			

		

		

			
				
HTML5中废弃的标签

article

aside

audio


html lang="en">
head>
    meta charset="UTF-8">
    title>title>
head>

body>
    audio src="萧忆情 - 童话镇 [mqms2].mp3" controls="controls">audio>

body>
html>



bdi

			
		

	





	

		

			

				
					
html5标签

				
			

			

				

					weixin_53841204的博客
				

				

					02-09
					
					123
					
				

			

		

		

			
				
html标签
<!DOCTYPE> 	定义文档类型。
<html>	定义一个 HTML 文档
<title>	为文档定义一个标题
<body>	定义文档的主体
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义一个注释

格式	 
<acronym>	HTML5不再支持。 定义只取

			
		

	





	

		

			

				
					
详解 html area标签

				
			

			

				

					09-22
				

			

		

		

			
				
 - 为了兼容性，`<map>` 和 `<area>` 标签应遵循HTML5标准，确保在各种浏览器中都能正确显示。  总结来说，HTML `<area>` 标签是构建图像映射的关键，它通过`shape` 和 `coords` 属性定义不同形状的可点击区域，并...

			
		

	





	

		

			

				
					
HTML5标签小集

				
			

			

				

					09-28
				

			

		

		

			
				
以上只是部分HTML5标签的介绍，实际上还有更多如`<details>`（定义可折叠的详情/摘要）、`<figure>`（用于图像、图表等媒体的容器）、`<form>`（创建表单）、`<header>`（页面或节的头部）、`<footer>`（底部信息）...

			
		

	





	

		

			

				
					
HTML标签总结，包含HTML4和HTML5

				
			

			

				

					12-31
				

			

		

		

			
				
HTML5中新增了一些标签，如`<article>`、`<aside>`、`<audio>`、`<canvas>`、`<video>`等，同时也废弃了一些标签，如`<applet>`、`<basefont>`等。  HTML标签是网页开发的基础，熟悉这些标签的用途和功能是开发网页...

			
		

	





	

		

			

				
					
(完整)HTML5常用标签大全.doc

				
			

			

				

					11-15
				

			

		

		

			
				
* `<area>`：定义图像地图内部的区域 * `<canvas>`：定义图形 * `<figcaption>`：定义figure元素的标题 * `<figure>`：定义媒介内容的分组，以及它们的标题  音频/视频标签  * `<audio>`：定义声音内容 * `<source>`...

			
		

	





	

		

			

				
					
视频监控流程图

				
			

			

				

					D20187的博客
				

				

					02-17
					
					560
					
				

			

		

		

			
				
视频监控流程图

			
		

	





	

		

			

				
					
HTML之area标签

				
			

			

				

					WebFocus
				

				

					03-24
					
					247
					
				

			

		

		

			
				

1）  标签定义图像映射中的区域。

2） area 元素总是嵌套在  标签中。

3） 所有主流浏览器都支持  标签。

4） 属性
[table]
|属性	|值	|描述	
|coords	|坐标值	|定义可点击区域（对鼠标敏感的区域）的坐标。	
|href	|URL	|定义此区域的目标 URL。
|nohref	|nohref	|从图像映射排除某个区域。
|shap...

			
		

	





	

		

			

				
					
HTML5 ＜area＞ 标签

				
			

			

				

					thgj0006的博客
				

				

					04-01
					
					1135
					
				

			

		

		

			
				
area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。 元素始终嵌套在  标签内部。标签中的 usemap 属性与元素中的 name 相关联，以创建图像与映射之间的关系。

			
		

	





	

		

			

				
					
No.18     map标签 与 area标签

				
			

			

				

					lzh131464的博客
				

				

					01-10
					
					388
					
				

			

		

		

			
				
在HTML中，<map>的作用是定义一个客户端"图像映射"。 "图像映射"指带有可点击区域的一幅图像。

<area>用于定义可点击区域的形状、大小以及路径。

<map>一般需要与<img  src="值"  usemap="#值">配合使用，src属性负责为<map>提供作用对象; <map>依靠usemap属性来寻找和引用<img>。

格式语法:
    <img   src="值" usemap="#值"&g

			
		

	





	

		

			

				
					
HTML5-HTML基础

				
			

			

				

					m0_48081612的博客
				

				

					05-09
					
					52
					
				

			

		

		

			
				
HTML是超文本标记语言（HyperText Markup Language）的缩写，它是一种用于创建网页的标准标记语言。HTML使用一系列的标签（tag）来定义网页的结构、内容和样式。浏览器会根据HTML代码来解析和显示网页。在本文中，我们将介绍HTML的基本概念，如元素、属性、标题、段落、链接、图像等，以及如何使用HTML编辑器来编写和运行HTML代码。我们还将介绍HTML的文档结构，如head部分和body部分，以及一些常用的元数据。通过学习本文，你将掌握HTML的基础知识，并能够创建简单的网页。

			
		

	





	

		

			

				
					
HTML 图片热点区域＜area＞

				
			

			

				

					weixin_46670730的博客
				

				

					05-17
					
					1430
					
				

			

		

		

			
				
html的标签使用详解，对图片标签生成热点区域

			
		

	





	

		

			

				
					
探索HTML5的设计原则：引领Web开发的未来方向

					
最新发布

				
			

			

				

					s8305057的博客
				

				

					07-09
					
					525
					
				

			

		

		

			
				
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。

			
		

	





	

		

			

				
					
请帮我写一个关于王勃和他的出名的诗的网页，要求只使用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
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="refresh" content="60">
	<meta name="keywords" content="王勃,唐代,诗人">
	<meta name="robots" content="index,follow">
	<title>王勃及其名诗</title>
</head>
<body>
	<header>
		<h1>王勃及其名诗</h1>
		<nav>
			<ul>
				<li><a href="#introduction">简介</a></li>
				<li><a href="#poems">代表作</a></li>
				<li><a href="#conclusion">结论</a></li>
			</ul>
		</nav>
	</header>

	<section id="introduction">
		<h2>简介</h2>
		<p>王勃（650年－676年），字子安，唐代初期著名的文学家和政治家。其诗歌以豪放派为主，代表作有《滕王阁序》、《秋风词》等。</p>
		<blockquote>
			<p>凌波不过横塘路，但目送，芳尘去。锦瑟华年谁与度？月桥花院，琐窗朱户，只有春知处。</p>
			<footer>
				<cite>《秋风词》</cite>
			</footer>
		</blockquote>
	</section>

	<section id="poems">
		<h2>代表作</h2>
		<article>
			<h3>《滕王阁序》</h3>
			<p>始建于唐太宗贞观元年（627年），是一座历史悠久的楼阁，位于江苏扬州市广陵区瘦西湖畔。</p>
			<img src="tengwangge.jpg" alt="滕王阁" usemap="#tengwangge-map">
			<map name="tengwangge-map">
				<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>《秋风词》</h3>
			<audio src="qiu_feng_ci.mp3" controls>您的浏览器不支持 HTML5 音频元素。</audio>
			<video src="qiu_feng_ci.mp4" controls>您的浏览器不支持 HTML5 视频元素。</video>
			<ol>
				<li>凌波不过横塘路</li>
				<li>但目送，芳尘去</li>
				<li>锦瑟华年谁与度</li>
				<li>月桥花院，琐窗朱户</li>
				<li>只有春知处</li>
			</ol>
		</article>
	</section>

	<section id="conclusion">
		<h2>结论</h2>
		<table>
			<thead>
				<tr>
					<th>作品</th>
					<th>类型</th>
					<th>评价</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>《滕王阁序》</td>
					<td>散文</td>
					<td>被誉为“千古文章”，是中国文学史上的经典之作。</td>
				</tr>
				<tr>
					<td>《秋风词》</td>
					<td>词</td>
					<td>王勃的词作中，这首《秋风词》被人们传颂最为广泛。</td>
				</tr>
			</tbody>
		</table>
		<form action="#" method="post" target="_blank" enctype="multipart/form-data">
			<fieldset>
				<legend>留言板</legend>
				<label for="name">姓名：</label>
				<input type="text" id="name" name="name" required placeholder="请输入您的姓名"><br>
				<label for="email">邮箱：</label>
				<input type="email" id="email" name="email" required placeholder="请输入您的邮箱"><br>
				<label for="message">留言：</label>
				<textarea id="message" name="message" rows="4" cols="40" required placeholder="请输入您的留言"></textarea><br>
				<input type="submit" value="提交">
			</fieldset>
		</form>
		<button onclick="alert('感谢您的阅读！')">点个赞吧</button>
		<canvas id="myCanvas" width="300" height="150">
			您的浏览器不支持 HTML5 画布元素。
		</canvas>
		<style>
			#myCanvas {
				border: 1px solid black;
			}
		</style>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.font = "30px Arial";
			ctx.fillText("Hello World", 10, 50);
		</script>
		<address>
			联系我们：北京市海淀区中关村大街1号<br>
			电话：010-12345678<br>
			<a href="mailto:wangbo@example.com">wangbo@example.com</a>
		</address>
		<footer>
			<p>版权所有 © 2021 王勃</p>
		</footer>
	</section>
</body>
</html>

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值