HTML七种超链接用法
文本链接：<a href="http://www.baidu.com">百度</a>图像链接：<a href="http://www.baidu.com"><img src="图片路径" alt="Baidu Logo"<br /><!--图片路径：相对路径../绝对路径http://--></a>描点链接：<!D
·
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 />
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)