HTML链接锚标签及其在SEO中的作用介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML链接锚标签及其在SEO中的作用介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4394字，纯文字阅读大概需要7分钟。
内容图文
<a> 标签主要用于定义链接和书签，又被称作超链接或锚(anchor)链接，最常见的用法是下面几种：
建立超链接href属性，跳转到href=""中间的链接。
<a href="https://www.gxlcms.com/">www.gxlcms.com</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.gxlcms.com/'">www.gxlcms.com</a>
锚链接CSS样式
在没有自定义锚链接<a href="https://www.gxlcms.com/">锚链接文字</a>的CSS样式的时候，默认锚链接的样式都是下面：
默认链接样式，请用鼠标触发就可以看到效果
<style type="text/css">
a{color:#00F}
a:visited{color:#800080}
a:hover{color:#F00}
</style>
<a href="https://www.gxlcms.com/">www.gxlcms.com</a>
a{color:#00F} 未被访问锚链接都是蓝色、下划线样式
a:visited{color:#800080} 点击后的链接就是紫色、下划线样式
a:hover{color:#F00} 鼠标触发上去就是红色、下划线样式
不过由于这三种颜色太过强烈往往无法匹配所有的网页设计风格，如果需要其他颜色的锚链接样式，只需要在CSS中按照上面三种样式自己修改颜色及背景就可以了。
锚链接为什么要带下划线？
其实HTML刚推出的时候，浏览器还没有现在这么先进，同时当时的电脑屏幕也没有现在液晶等色彩，很多甚至都是黑白的。而在当时区分是不是链接的方法就是通过下划线，而在很多黑白显示器上、或者面向色盲用户的网页尽量还是保留下划线，否则用户无法区分颜色。
当然为了美观，一般现代网页设计都不会在链接上直接放上下划线。不过为了照顾色盲用户和黑白手机显示器用户，建议在用户鼠标触发的时候尽量设置CSS样式为带下划线的。
锚链接Target跳转窗口设置
当您打开本页的链接的时候，会发现打开有的链接会弹出到其他窗口，而打开有的链接会直接替换本页。而这种跳转方式可以使用锚链接的target属性设置跳转窗口。
_self 当前窗口打开，锚链接默认都是跳转到当前的浏览器窗口中，即默认target="_self"
<a href="https://www.gxlcms.com/" target="_self">这里是当前新窗口显示E维科技首页</a>
_blank 新窗口打开
<a href="https://www.gxlcms.com/" target="_blank">这里是打开新窗口显示E维科技首页</a>
无名target 同个新窗口打开
<a href="https://www.gxlcms.com/" target="_weigeti"> 如果这里面的_weigeti不是网页内部的name或id，就网页中所有target="_weigeti" 链接都在同一个新窗口打开，而_blank每个链接都打开不同新窗口 </a>
框架name或id
<a href="https://www.gxlcms.com/" target="weigeti">点击这里，将在下面name="weigeti" 的框架里面显示E维科技首页，不会跳转新窗口或者替换当前窗口</a> <iframe name="weigeti"></iframe>
_parent 父窗口打开，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。
<iframe> <a href="https://www.gxlcms.com/" target="_parent">这里是框架内部</a> </iframe>
_top 框架最顶层，比如网A中镶嵌iframe了网页B，网页B又镶嵌iframe了网页C
<iframe> <iframe><a href="https://www.gxlcms.com/" 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.gxlcms.com/'">这样的链接对SEO无效</a>
<a href="#" onclick="window.open('https://www.gxlcms.com/');">这样的链接对SEO无效，甚至在Chrome等浏览器下都无法打开</a>
链接 rel=nofollow 也对SEO无效
如果您跟别人网站换链的时候，通过源代码发现对方网站给您的链接添加了rel=nofollow 属性，那么就是意味着这条链接不让搜索引擎抓取。
<a href="https://www.gxlcms.com/" rel="nofollow">这样的链接对SEO无效</a> <meta name="robots" content="nofollow" /> <a href="https://www.gxlcms.com/">如果网页开头有上面一句话，那么这个网页内部所有链接都不会会搜索引擎抓取，所以对SEO无效</a>
链接和背景颜色一样对SEO无效
谷歌搜索刷先推出新算法打击链接颜色和北京颜色一样的外链，而这种外链一般被认为是黑链。
<style type="text/css">
#vgtlink{background:#FFF}
#vgtlinka{background:#FFF}
</style>
<div id="vgtlink">
<a href="https://www.gxlcms.com/" id="vgtlinka">这样的链接对SEO无效</a>
</div>
<a href="https://www.gxlcms.com/" style="background:#FFF">这样的链接对SEO也无效</a>
内容总结
以上是互联网集市为您收集整理的HTML链接锚标签及其在SEO中的作用介绍全部内容，希望文章能够帮你解决HTML链接锚标签及其在SEO中的作用介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。