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

比眉伴天荒 2023-01-10 11:58 214阅读 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 条评论，214人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关友情链接在html中怎么写,用描文本、友情链接交易方式教你如何制作网页链接...

如何建立网页链接，如何建立良好的外部链接已成为搜索引擎优化推广的一个课题。如何正确利用外部链接进行搜索引擎优化？ 1、锚文本链接应该是相关的首先，搜索引擎优化锚文本应该转

旧城等待，/ 2022年10月06日 00:41/ 0 赞/ 199 阅读

相关长链接制作为短链接

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

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

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

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

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

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

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

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

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

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

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

相关网页制作：制作一个官网

从范例建立基本步骤使用 DreamWeaver 8.0 软件 1.新建文档 ![20201130213234159.png][] 2.选择一个模板。 ![wat

落日映苍穹つ/ 2021年09月21日 13:18/ 0 赞/ 470 阅读

相关 Vue锚点链接

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

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