HTML七种超链接用法

最新推荐文章于 2025-04-06 21:06:53 发布

abandon_i

最新推荐文章于 2025-04-06 21:06:53 发布

阅读量2.5w

点赞数 12

分类专栏： web前端文章标签： html elementui vue.js

本文链接：https://blog.csdn.net/abandon_i/article/details/122436448

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

1、文本链接：

<a href="http://www.baidu.com">百度</a>

2、图像链接：

<a href="http://www.baidu.com">
	<img src="图片路径" alt="Baidu Logo"<br />
	<!--图片路径：相对路径../		绝对路径http://-->
</a>

3、描点链接：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2 id="main">首页</h2>
		<a href="#html_base">跳转到HTML基础</a><br />
		<a href="#css_base">跳转到CSS基础</a><br />
		<a href="#javascript_base">跳转到JavaScript基础</a><br />
		<pre><!--<pre>预定格式文本，与<p>标签不同，<pre>会保留空格和换行符</p>-->
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</pre>
		<h5 id="html_base">HTML基础</h5>
		<a href="#main">回到顶部</a>
		<pre>
			
		
			
			
			
			
			
			
			
			
			
			
			
			
				
			
			
			
		</pre>
		<h5 id="css_base">CSS基础</h5>
		<a href="#main">回到顶部</a>
		<pre>
			
		
			
			
			
			
			
			
			
			
			
			
			
			
				
			
			
			
		</pre>
		<h5 id="javascript_base">JavaScript基础</h5>
		<a href="#main">回到顶部</a>
	</body>
</html>

4、图像热区链接：

shape属性	解释	cords属性	解释
circle	圆形	x,y,z	(x,y)圆心坐标,r半径
rect	矩形	x1,y1;x2,y2	(x1,y1)左上角坐标 (x2,y2)右下角坐标
poly	多边形	x1,y1;x2,y2;x3,y3;x4,y4;...	(x1,y1)(x2,y2)(x3,y3)(x4,y4)... 多边形各个点坐标

可以通过电脑自带的画图工具确定位置

在画图工具中，鼠标放到图像上，会显示当前位置，这个就是坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="https://www.baidu.com/"><!--点击图像的某小块就会跳转到百度-->
			<map name="image_link">
				<area shape="circle" coords="100,100,30" href="" alt=""/>
				<area shape="rect" coords="90,20,150,80" href="" alt=""/>
				<area shape="poly" coords="200,30,300,10,280,70,260,100,220,50" href="" alt=""/>
			</map>		
			<img usemap="#image_link" src="图片路径" alt="Baidu Logo"/><!--还可以width，height设置图像的宽高-->
		</a>
	</body>
</html>

5、E-mail链接：

<a href="mailto:someone@example.com">联系我们</a>

6、JavaScript链接：

<a href="javascript:alert('Hello World!');">点击弹窗</a>

7、空链接：

<a href="">这是一个空链接</a><br />
<a href="#">这是一个空链接</a><br />
<a href="javascript:void(0)">这是一个空链接</a><br />