HTML网页制作：制作锚点链接

比眉伴天荒 2023-01-10 11:58 165阅读 0赞

### 1、锚点链接定义： ###

指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。

### 2、锚点链接的步骤： ###

(1)、设置锚点：<a name="锚点的名字"></a>

意思是在网页中的某一个位置，插入一个锚点。

(2)、设置锚点链接：<a href="\#锚点的名字">点我就会跳到锚点处</a>

意思是在网页中的某一个位置链接之前设定的锚点，只要点击该链接，就会自动跳转到锚点处。

(3)、此时，点击锚点链接就会跳到锚点的位置。

### 3、举例： ###

多个网站中的 回到顶部 按钮 就是用锚点做的。

<p name="top" id="top">这里是顶部</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <a href="#top">回到顶部</a>

通常锚点定义只需要写name这个属性，不过在xhtml中更正式是需要写上id。

参考链接：

[https://jingyan.baidu.com/article/a3f121e4e51d38fc9052bb86.html][https_jingyan.baidu.com_article_a3f121e4e51d38fc9052bb86.html]

[https://zhidao.baidu.com/question/679356986603917492.html][https_zhidao.baidu.com_question_679356986603917492.html]

[https_jingyan.baidu.com_article_a3f121e4e51d38fc9052bb86.html]: https://jingyan.baidu.com/article/a3f121e4e51d38fc9052bb86.html
[https_zhidao.baidu.com_question_679356986603917492.html]: https://zhidao.baidu.com/question/679356986603917492.html

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css制作简单网页界面

一.运行效果如下 ![860e2d7eed2447d59f8984859bcd1191.png][] 二.HTML 2.1关于语义化标签 <section>

╰半夏微凉°/ 2024年02月20日 08:18/ 0 赞/ 5 阅读

相关学生个人网页制作html

用html如何制作一个简单的网页代码,学生个人网页制作html。 HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，

川长思鸟来/ 2023年09月23日 20:18/ 0 赞/ 59 阅读

相关 HTML网页制作：制作锚点链接

1、锚点链接定义：指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。 2、锚点链接的步骤： (1)、设置锚点：<a name="锚点的

比眉伴天荒/ 2023年01月10日 11:58/ 0 赞/ 166 阅读

相关静态网页制作html语言入门

编辑一个文本文件，代码如下； <!DOCTYPE html> <html> <head> <meta charset="utf-8">

阳光穿透心脏的1/2处/ 2022年11月19日 11:25/ 0 赞/ 153 阅读

相关 html入门资源,HTML入门----简单网页制作

HTML入门----简单网页制作概念：HTML(Hypertext Markup Language)即超文本标记语言，用于网页文件的制作。HTML由一系列的标记组成，可以说

冷不防/ 2022年10月06日 03:59/ 0 赞/ 162 阅读

相关长链接制作为短链接

前言需要说明的是，这里使用的是微博提供的接口，也就是说，这个短链接是微博给我们提供的在网络上到一个我们工具站 [http://dwz.wailian

一时失言乱红尘/ 2022年04月21日 16:00/ 0 赞/ 232 阅读

相关网页制作之HTML+CSS布局

CSS网页布局：可以分为三种：1.固定布局 2.流动布局（是百分百布局） 3.弹性布局（可用于移动APP开发）元素基本样式： 1.行内样式：直接写

忘是亡心i/ 2022年04月15日 01:05/ 0 赞/ 231 阅读

相关前端学习笔记(HTML)——超链接与锚点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

冷不防/ 2022年03月10日 07:22/ 0 赞/ 198 阅读

相关什么是HTML超链接？锚链接？

什么是HTML超链接？锚链接？ HTML超链接 1.超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部

àì夳堔傛蜴生んèń/ 2022年02月15日 17:55/ 0 赞/ 259 阅读

相关 Vue锚点链接

锚点链接是我们在开发中经常会用到的一个技术点，常见的常见有，页面内容过多，而我们不希望拿鼠标一直来回滚动，就需要用到锚点链接，以 " 目录 " 的方式来进行对应的跳转。而在

心已赠人/ 2021年09月18日 20:18/ 0 赞/ 393 阅读