HTML超链接与锚点详解-CSDN博客

本文链接：https://blog.csdn.net/qq_46770287/article/details/108970473

注：有相关参考

html的链接

1.HTML 使用超级链接：点击链接可以从一张页面跳转到另一张页面。HTML使用标签 <a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分.

2.常用超链接代码：

<!DOCTYPE html>
<html>
	<head>
		<title>超链接</title>
	</head>
	<body>
		<!--在本窗口打开链接-->
		<a href="http://www.bilibili.com">网页</a><br>
		<!--新窗口打开连接-->
		<a href="http://www.bilibili.com" target="_blank">网页</a><br>
		<!--为图片增加超链接-->
        <a href="http://www.bilibili.com"><img src="例图.jpg" alt="例图"></a><br>
        <a href="#" >网页</a><br>
        <!--只具有超链接属性-->
	</body>
</html>

3.锚点跳转：本身网页过长可以通过锚点链接跳转
举个长栗子

<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<a href="#" name="top"></a>
	<p><a href="#shuiguo">水果</a></p>
	<p><a href="#shucai">蔬菜</a></p>
	<p><a href="#yundong">运动</a></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
	<h1><a href="#" name="shuiguo">水果</a></h1>
<ul>
	<li>香蕉</li>
	<li>苹果</li>
	<li>葡萄</li>
	<li>梨</li>
	<li>西瓜</li>
	<li>樱桃</li>
	<li>菠萝</li>
	<li>橙子</li>
	<li>柚子</li>
	<li>芒果</li>
</ul>
<a href="#top">返回顶部</a>
<h2><a href="#" name="shucai">蔬菜</a></h2>
<ul>
	<li>西红柿</li>
	<li>黄瓜</li>
	<li>土豆</li>
	<li>芹菜</li>
	<li>蒜薹</li>
	<li>西葫芦</li>
	<li>香菇</li>
	<li>菠菜</li>
	<li>豆角</li>
	<li>油菜</li>
</ul>
<a href="#top">返回顶部</a>
<h3><a href="#" name="yundong">运动</a></h3>
<ul>
	<li>游泳</li>
	<li>短跑</li>
	<li>长跑</li>
	<li>拔河</li>
	<li>篮球</li>
	<li>足球</li>
	<li>铅球</li>
	<li>滑冰</li>
	<li>滑板</li>
	<li>跳远</li>
</ul>
<a href="#top">返回顶部</a>
</body>
</html>

4.标签的运行机制：
（1）标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解释该网址，首先会在本地机器去找一个hosts文件，如果在hosts文件上该域名没有对应的主机，那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。（2）如果a标签的href属性值没有以任何协议开头，那么浏览就会启动file协议解释器去解释该资源路径。（3）如果a标签的href属性值并不是以http开始，而且其他的一些协议，那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。