HTML+CSS 轻松入门之锚点链接
什么是锚点链接
HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。
如何创建锚点链接
第一步：创建命名锚记
若要创建命名锚记，请在Dreamweaver编辑视图中，将光标置于需要命名锚记的地方。选择“插入记录”工具栏，选择“命名锚记”选项。出现命名锚记对话框。
创建命名锚记对话框 在“锚记名称”文本框中输入锚记的名称。一般锚记若在网页顶部，可输入top；锚记名不能含有空格，而且不应置于层内。
第二步：链接到命名锚记
定义了锚记 后，就可以链接到命名的锚记了。选择要从其创建链接的文本或图像，例如文本“返回顶部”。在属性面板“链接”文本框中输入“#锚记名称”, 如：“#top”。如图2所示。
链接到锚记保存网页后按F12键预览该网页。当在浏览器中单击链接文本（返回顶部）时，网页转向命名锚记为“top”所在的行。
PS：若要链接到其他 文档中的名为“top”的锚记，格式为：文件绝对路径+文件名#top。锚记名称区分大小写。
锚点链接对SEO的作用
锚链接是一个非常重要的概念，在网页中增加恰当的锚链接，会让所在网页和所指向网页的重要程度有所提升，从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面：
对锚链接所在的页面的作用
正常来讲，页面中增加的链接锚链接都和页面本身有一定的关系，因此，锚文本可以做为锚链接所在的页面的内容的评估。例如：本篇文章中含有“SEO”的链接，那么，说明本篇文章和SEO有一定关系。
对锚链接所指向页面的作用
锚链接能精确的描述所指向页面的内容，因此，锚链接能做为对所指向页面的评估。
锚链接对关键词排名的影响
锚链接对于关键字排名的意义在于它可以让内容页随机链接在一起，让蜘蛛可以很好的抓取更多页面，权重也能均匀的传递，同时增强页面的相关性，最终提升网站的关键词排名。
锚链接与超链接区别
一、对关键词排名的区别。
如果说到对关键词的排名区别。我们可以通过数字举例子来说对百度排名的区别。假设我们做了一个锚文本的链接:例如我们做的是“站长网”这个关键词。如果这个外链叫百度收录了。假设百度给这个链接的权重我们用阿拉伯数字表示。例如是5,那么这个外链对站长网这个关键词的排名可能分配的是4,对我们网站的其他的关键词排名可能分配到。
二、对反链的区别
我们做SEO经常关注自己网站的反向链接,一般大家都是通过雅虎反链和百度domain来查询自己的网站。如果我们做了锚文本的链接。叫雅虎收录了,这个锚文本链接就可以通过雅虎反链查询到。如果这个链接叫百度收录了,我们通过百度domain查询不到。如果我们做了一个网址链接,叫雅虎收录了,我们可以通过雅虎反链查询到,如果叫百度收录了,我们通过百度domain也可以查询。所以:锚文本的链接可以增加我们网站的雅虎反链的数量。不能增加百度domain的数量。网址链接可以增加我们网站的雅虎反链的数量,也可以增加百度domain的数量。
锚点链接实例：做一个返回顶部的实例，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>锚点链接</title> </head> <body> <a name="top">我们都一样</a> 推开窗看见星星 一直守在夜空中<br> 心中不免多了些暖暖的感动<br> 一闪一闪的光 努力把黑夜点亮气氛如此安详<br> 你在我的生命中是那最闪亮的星<br> 一直在我深夜中守护着我们的梦<br><br> 这世界那么大我的爱只想要你懂<br> 陪伴我孤寂旅程<br> 你知道我的梦你知道我的痛<br> 你知道我们感受都相同<br> 就算有再大的风也挡不住勇敢的冲动 <br><br> 最美的太阳 我的世界 因为有你才会美<br> 我的天空 因为有你不会黑<br> 给我快乐 为我伤心流眼泪<br> 给我宽容 让我能展翅高飞<br> 你的话你的泪 你的笑你的美<br> 在我眼中胜过最美的玫瑰<br> 抱着梦 往前飞 不逃避 不后退<br> 你是我成功路上的堡垒<br> 给我翅膀 让我可以翱翔<br> 给我力量 是你让我变坚强<br> 不怕受伤 因为有你在身旁<br> 你的笑 你的泪 是我筑梦路上最美的太阳<br><br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手，一直走到最后 <br> 这一刻怎么回头 <br> 明天过后<br> 没有星星的夜空<br> 没有话题能补充 <br> 太多承诺从指缝中溜走 <br> 不敢奢求什么 <br> 回忆将我们扣留 <br> 一瞬间亲吻的时候 <br> 一切就好像轮回般朦胧 <br> 心动渐渐的失控 <br> 是否两个人足够捕捉爱的镜头 <br> 闭上了眼睛记得你的笑容 <br> 幸福的从容将灵魂都掏空 <br> 享受一分钟的感动 <br> 是否爱上一个人不问明天过后 <br> 山明和水秀不比你有看头 <br> 牵着你的手，一直走到最后 <br> 这一刻怎么回头 <br> <a href="#top">顶部</a> </body> </html>
当我们网页内容很多的时候，我们一直往下看页面，通过点击返回顶部，从而直接到页面的头部
![Front-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Nullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB-Frontend-Tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Praktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
