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>

当我们网页内容很多的时候,我们一直往下看页面,通过点击返回顶部,从而直接到页面的头部

继续学习
||
<!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>
提交重置代码