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