锚
使用<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:

点击后:

在新页面中打开
如果想要在新页面中打开,要使用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啦!)















