HTML链接（锚）

锚

使用<a>标记

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

这样说有点抽象，还是在几种实际应用中理解创建链接和创建书签的含义吧！

实现网页之间跳转

代码示例

1
<a href="https://www.bilibili.com">b站主页面</a>

戳一戳下面试试~（如果不行就按ctrl然后鼠标点）
b站主页面

实现同一页面内跳转

解释说明

可以理解为我们在用wps阅读pdf时加的标签，然后我们可以直接通过标签就跳转回原来那个地方了，不用疯狂滚动页面寻找。以下这个代码就是实现这样的功能。

  • 我们需要先在要在”目的地“处命名一个name（对锚进行命名，创建了一个书签）

<a name=“here”>111111111111111111111111111</a>

  • 然后再在”出发地“使用href发送请求，记得要在“目的地”名字前面加#号（创建指向该锚的链接)

<a href="#here">我以为你不会出现</a>

使用属性name用于创建一个命名的锚，锚的名称可以是用你喜欢的名字

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!--文字内容来自告五人歌曲《我以为你不会出现》-->

<html>
<title>演示</title>
<body>
<pre>
我以为你不会出现 在这虚伪的世界

我以为你不会出现 在时间静止的昨天

<a name="here">111111111111111111111111111</a> 

清晨午夜有了区别 不再是黑夜到白天

「太过美丽，以为一切是幻觉」

海市蜃楼颠倒知觉 一并颠覆我的意念

请带走我 飞过无人的沙漠

别在我的心中 反复驻足又走

请带着我 离开没有你的绿洲

不要让我独自 安稳地生活

我想要你在明天 睁开眼就在身边

清晨午夜有了区别 不再是黑夜到白天

「太过美丽，以为一切是幻觉」

海市蜃楼颠倒知觉 一并颠覆我的意念

请带走我 飞过无人的沙漠

别在我的心中 反复驻足又走

请带着我 离开没有你的绿洲

不要让我独自 安稳地生活

请告诉我 在你眼神里的线索

我想我也能够 把未知当承诺

你的执着 是我跳动的脉搏

在我不断催促 脚步的时候

<a href="#here">我以为你不会出现</a>

</pre>
</body>
</html>

用浏览器打开：

href处

点击后到文档：

name处

实际应用

百度词条文件最开头的章节导航。
事实上，命名锚经常用于大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。

实现不同页面之间跳转

解释说明

道理和同页面内跳转一样

代码示例

1
2
3
4
5
6
7
8
<!--这是页面1的代码-->
<html>
<title>演示</title>
<body>
<a href="./new.html#tips">想从演示1跳到演示2</a>
<!--我这里使用了相对地址跳转到演示2这个html-->
</body>
</html>
1
2
3
4
5
6
7
8
<!--这是页面2的代码-->
<html>
<title>演示2</title>
<body>
<p>这里是演示2</p>
<a name="tips">已跳转到演示2</a>
</body>
</html>

用浏览器打开演示1：
演示1

点击后：
点击演示1中链接后效果

在新页面中打开

如果想要在新页面中打开，要使用target属性，将target属性设置为"_blank"

1
<a href="http://www.bilibili.com/" target="_blank">打开b站</a>

使用一个图像做链接

解释说明

比如说想用一个图像作为按钮，按了之后跳转到一个新链接

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>

<body>

<p>

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
<!--href后面跟着的是要跳转到的页面，第二个尖括号里面是图像链接按钮-->

</a>
</p>

</body>
</html>

此代码借鉴：
图片做链接示例

展示结果请点击网址查看

最后一点念念叨叨

  1. href不要打成herf，太痛了！

  2. 假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

  3. 事实上，href属性后的名称是url地址栏，如果接http就是我们常说的网页，但事实上它还可以跟别的内容来打开app等。例如：
    使用邮件客户端发邮件

1
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

打开微信 （ios）:

1
<a href="weixin:">点击打开微信</a>

这其实是URL Scheme的使用，这是一种页面内跳转协议，通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。

客户端应用可以向操作系统注册一个 URL scheme，该 scheme 用于从浏览器或其他应用中启动本应用。通过指定的 URL 字段，可以让应用在被调起后直接打开某些特定页面，比如商品详情页、活动详情页等等。也可以执行某些指定动作，如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。综上URL Scheme使用场景大致分以下几种：

  • 服务器下发跳转路径，客户端根据服务器下发跳转路径跳转相应的页面
  • H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面
  • APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面
  • APP根据URL跳转到另外一个APP指定页面

具体请参考：安卓URL Scheme IOS URL Scheme

#HTML
HTML链接（锚）
http://sample.com/2022/07/02/HTML链接 （锚）/
作者
LuoYutong
发布于
2022年7月2日
许可协议