HTML链接（锚）

最新推荐文章于 2024-03-14 09:39:32 发布

asiaqi

最新推荐文章于 2024-03-14 09:39:32 发布

阅读量1.5k

点赞数 6

分类专栏： asiaqi每日打卡 HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62200674/article/details/125579635

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

锚

使用<a>标记

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

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

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

实现网页之间跳转

代码示例

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

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

实现同一页面内跳转

解释说明

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

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

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

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

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

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

代码示例

<!--文字内容来自告五人歌曲《我以为你不会出现》-->

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

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

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

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

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

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

请带走我 飞过无人的沙漠

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

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

不要让我独自 安稳地生活

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

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

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

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

请带走我 飞过无人的沙漠

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

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

不要让我独自 安稳地生活

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

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

你的执着 是我跳动的脉搏

在我不断催促 脚步的时候

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

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

用浏览器打开：
“出发地”

点击后到文档：
"目的地"

实际应用

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

实现不同页面之间跳转

解释说明

道理和同页面内跳转一样

代码示例

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

<!--这是页面2的代码-->
<html>
<title>演示2</title>
<body>
<p>这里是演示2</p>
<a name="tips">已跳转到演示2</a>
</body>
</html>

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

点击后：
点击演示1后

在新页面中打开

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

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

使用一个图像做链接

解释说明

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

代码示例

<html>

<body>

<p>

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

</a>
</p>

</body>
</html>

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

展示结果请点击网址查看

写在最后

href不要打成herf，太痛了
现在大学生们往往都被绩点浪潮卷着走，分分必争
同时又听着“要根据自己方向学，别只跟着学校”的劝诫，争夺分数的时候又哪有那么多时间呢？
经过大一一年的迷茫，我一拍大腿一咬牙，试一下吧！
学自己好奇的知识，并且学前端这样一个学校不考察的方面。
初中高中甚至大一都是乖巧的好学生，人生不长，想做做自己没体验过的！
所以每天都会打卡发帖子，主要是记录性的，同时也能作为一个查找资料帮助大家。
欢迎关注我，一起打卡，一起走一条自定义的内卷破局之路！
（这已经是day2啦！）