HTML 链接锚标签及其在SEO中的作用介绍

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1610
收藏 0 赞 0 分享

<a> 标签主要用于定义链接和书签,又被称作超链接或锚(anchor)链接,最常见的用法是下面几种:

建立超链接href属性,跳转到href=""中间的链接。

<a href="https://www.jb51.net/">www.jb51.net</a>

建立书签,用name 或 id属性 和超链接尾部加“#”及这个书签的name 跳转到网页某个位置

<a name="top"></a>
<a name="1"></a>
<a name="2"></a>
<a href="#top">返回顶部</a>
<a href="#1">打开第一章</a>
<a href="#2">打开第二章</a>

当您打开E维科技W3CSchool 在线教程的时候,会显现标题下面的导航,这些就是通过书签name建立的。

Javascript 事件属性,点击后执行不同命令

<a href="javascript:void(0)" onclick="this.href='https://www.jb51.net/'">www.jb51.net</a>

锚链接CSS样式

在没有自定义锚链接<a href="https://www.jb51.net/">锚链接文字</a>的CSS样式的时候,默认锚链接的样式都是下面:

默认链接样式,请用鼠标触发就可以看到效果

<style type="text/css">

a{color:#00F}

a:visited{color:#800080}

a:hover{color:#F00}

</style>

<a href="https://www.jb51.net/">www.jb51.net</a>

a{color:#00F} 未被访问锚链接都是蓝色、下划线样式

a:visited{color:#800080} 点击后的链接就是紫色、下划线样式

a:hover{color:#F00} 鼠标触发上去就是红色、下划线样式

不过由于这三种颜色太过强烈往往无法匹配所有的网页设计风格,如果需要其他颜色的锚链接样式,只需要在CSS中按照上面三种样式自己修改颜色及背景就可以了。

锚链接为什么要带下划线?

其实HTML刚推出的时候,浏览器还没有现在这么先进,同时当时的电脑屏幕也没有现在液晶等色彩,很多甚至都是黑白的。而在当时区分是不是链接的方法就是通过下划线,而在很多黑白显示器上、或者面向色盲用户的网页尽量还是保留下划线,否则用户无法区分颜色。

当然为了美观,一般现代网页设计都不会在链接上直接放上下划线。不过为了照顾色盲用户和黑白手机显示器用户,建议在用户鼠标触发的时候尽量设置CSS样式为带下划线的。

锚链接Target跳转窗口设置

当您打开本页的链接的时候,会发现打开有的链接会弹出到其他窗口,而打开有的链接会直接替换本页。而这种跳转方式可以使用锚链接的target属性设置跳转窗口。

_self 当前窗口打开,锚链接默认都是跳转到当前的浏览器窗口中,即默认target="_self"

<a href="https://www.jb51.net/" target="_self">这里是当前新窗口显示E维科技首页</a>

_blank 新窗口打开

<a href="https://www.jb51.net/" target="_blank">这里是打开新窗口显示E维科技首页</a>

无名target 同个新窗口打开

<a href="https://www.jb51.net/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id,就网页中所有target="_weigeti" 链接都在同一个新窗口打开,而_blank每个链接都打开不同新窗口 </a>

框架name或id

<a href="https://www.jb51.net/" target="weigeti">点击这里,将在下面name="weigeti" 的框架里面显示E维科技首页,不会跳转新窗口或者替换当前窗口</a>
<iframe name="weigeti"></iframe>

_parent 父窗口打开,将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。

<iframe>
   <a href="https://www.jb51.net/" target="_parent">这里是框架内部</a>
</iframe>

_top 框架最顶层,比如网A中镶嵌iframe了网页B,网页B又镶嵌iframe了网页C

<iframe>
   <iframe><a href="https://www.jb51.net/" target="_top">这里是框架内部的框架</a></iframe>
</iframe>

如果网页C中连接设置target=_parent,则跳将网页B去掉直接A中嵌入网页C中链接页面;

而如果网页C中target=_top ,则直接跳出所有iframe框架,直接转向C中链接页面。

_top 在当前的整个浏览器窗口中打开所链接的文档,因而会删除所所有框架

锚链接对SEO的作用

外链一直被当作搜索引擎优化的核心之一,为此各种形式的外链都出现了,而并不是所有的外链都对SEO有作用。

JS写的外链对SEO无效

搜索引擎比较不愿意去识别Javascript,所有这点很容易理解。

<a href="#" onclick="this.href='https://www.jb51.net/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('https://www.jb51.net/');">这样的链接对SEO无效,甚至在Chrome等浏览器下都无法打开</a>

链接 rel=nofollow 也对SEO无效

如果您跟别人网站换链的时候,通过源代码发现对方网站给您的链接添加了rel=nofollow 属性,那么就是意味着这条链接不让搜索引擎抓取。

<a href="https://www.jb51.net/" rel="nofollow">这样的链接对SEO无效</a>

<meta name="robots" content="nofollow" />
<a href="https://www.jb51.net/">如果网页开头有上面一句话,那么这个网页内部所有链接都不会会搜索引擎抓取,所以对SEO无效</a>

链接和背景颜色一样对SEO无效

谷歌搜索刷先推出新算法打击链接颜色和北京颜色一样的外链,而这种外链一般被认为是黑链。

<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
  <a href="https://www.jb51.net/" id="vgtlinka">这样的链接对SEO无效</a>
</div>

 <a href="https://www.jb51.net/" style="background:#FFF">这样的链接对SEO也无效</a>
更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多