HTML 鏈接錨標(biāo)簽及其在SEO中的作用介紹

2020-03-24 19:15:42

字體：大中小

供稿：網(wǎng)友

a 標(biāo)簽主要用于定義鏈接和書(shū)簽，又被稱作超鏈接或錨(anchor)鏈接，最常見(jiàn)的用法是下面幾種：建立超鏈接href屬性，跳轉(zhuǎn)到href= 中間的鏈接。 a href= http://www.phpstudy.net/ www.phpstudy.net /a 建立書(shū)簽，用name 或 id屬性和超鏈接尾部加 # 及這個(gè)書(shū)簽的name 跳轉(zhuǎn)到網(wǎng)頁(yè)某個(gè)位置 a name= top /a a name= 1 /a a name= 2 /a a href= #top 返回頂部 /a a href= #1 打開(kāi)第一章 /a a href= #2 打開(kāi)第二章 /a 當(dāng)您打開(kāi)E維科技W3CSchool 在線教程的時(shí)候，會(huì)顯現(xiàn)標(biāo)題下面的導(dǎo)航，這些就是通過(guò)書(shū)簽name建立的。Javascript 事件屬性，點(diǎn)擊后執(zhí)行不同命令 a href= javascript:void(0) quot;this. www.phpstudy.net /a 錨鏈接CSSyangshi_10628_1.html' target='_blank'>CSS樣式在沒(méi)有自定義錨鏈接 a href= http://www.phpstudy.net/ 錨鏈接文字 /a 的CSS樣式的時(shí)候，默認(rèn)錨鏈接的樣式都是下面：默認(rèn)鏈接樣式，請(qǐng)用鼠標(biāo)觸發(fā)就可以看到效果 style type= text/css a{color:#00F}a:visited{color:#800080}a:hover{color:#F00} /style a href= http://www.phpstudy.net/ www.phpstudy.net /a a{color:#00F} 未被訪問(wèn)錨鏈接都是藍(lán)色、下劃線樣式a:visited{color:#800080} 點(diǎn)擊后的鏈接就是紫色、下劃線樣式a:hover{color:#F00} 鼠標(biāo)觸發(fā)上去就是紅色、下劃線樣式不過(guò)由于這三種顏色太過(guò)強(qiáng)烈往往無(wú)法匹配所有的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，如果需要其他顏色的錨鏈接樣式，只需要在CSS中按照上面三種樣式自己修改顏色及背景就可以了。錨鏈接為什么要帶下劃線？其實(shí)HTML剛推出的時(shí)候，瀏覽器還沒(méi)有現(xiàn)在這么先進(jìn)，同時(shí)當(dāng)時(shí)的電腦屏幕也沒(méi)有現(xiàn)在液晶等色彩，很多甚至都是黑白的。而在當(dāng)時(shí)區(qū)分是不是鏈接的方法就是通過(guò)下劃線，而在很多黑白顯示器上、或者面向色盲用戶的網(wǎng)頁(yè)盡量還是保留下劃線，否則用戶無(wú)法區(qū)分顏色。當(dāng)然為了美觀，一般現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)都不會(huì)在鏈接上直接放上下劃線。不過(guò)為了照顧色盲用戶和黑白手機(jī)顯示器用戶，建議在用戶鼠標(biāo)觸發(fā)的時(shí)候盡量設(shè)置CSS樣式為帶下劃線的。錨鏈接Target跳轉(zhuǎn)窗口設(shè)置當(dāng)您打開(kāi)本頁(yè)的鏈接的時(shí)候，會(huì)發(fā)現(xiàn)打開(kāi)有的鏈接會(huì)彈出到其他窗口，而打開(kāi)有的鏈接會(huì)直接替換本頁(yè)。而這種跳轉(zhuǎn)方式可以使用錨鏈接的target屬性設(shè)置跳轉(zhuǎn)窗口。_self 當(dāng)前窗口打開(kāi)，錨鏈接默認(rèn)都是跳轉(zhuǎn)到當(dāng)前的瀏覽器窗口中，即默認(rèn)target= _self a href= http://www.phpstudy.net/ target= _self 這里是當(dāng)前新窗口顯示E維科技首頁(yè) /a _blank 新窗口打開(kāi) a href= http://www.phpstudy.net/ target= _blank 這里是打開(kāi)新窗口顯示E維科技首頁(yè) /a 無(wú)名target 同個(gè)新窗口打開(kāi) a href= http://www.phpstudy.net/ target= _weigeti 如果這里面的_weigeti不是網(wǎng)頁(yè)內(nèi)部的name或id，就網(wǎng)頁(yè)中所有target= _weigeti 鏈接都在同一個(gè)新窗口打開(kāi)，而_blank每個(gè)鏈接都打開(kāi)不同新窗口 /a 框架name或id a href= http://www.phpstudy.net/ target= weigeti 點(diǎn)擊這里，將在下面name= weigeti 的框架里面顯示E維科技首頁(yè)，不會(huì)跳轉(zhuǎn)新窗口或者替換當(dāng)前窗口 /a iframe name= weigeti /iframe _parent 父窗口打開(kāi)，將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的，則在瀏覽器全屏窗口中載入鏈接的文件，就象_self參數(shù)一樣。 iframe a href= http://www.phpstudy.net/ target= _parent 這里是框架內(nèi)部 /a /iframe _top 框架最頂層，比如網(wǎng)A中鑲嵌iframe了網(wǎng)頁(yè)B，網(wǎng)頁(yè)B又鑲嵌iframe了網(wǎng)頁(yè)C iframe iframe a href= http://www.phpstudy.net/ target= _top 這里是框架內(nèi)部的框架 /a /iframe /iframe 如果網(wǎng)頁(yè)C中連接設(shè)置target=_parent，則跳將網(wǎng)頁(yè)B去掉直接A中嵌入網(wǎng)頁(yè)C中鏈接頁(yè)面;而如果網(wǎng)頁(yè)C中target=_top ，則直接跳出所有iframe框架，直接轉(zhuǎn)向C中鏈接頁(yè)面。_top 在當(dāng)前的整個(gè)瀏覽器窗口中打開(kāi)所鏈接的文檔，因而會(huì)刪除所所有框架錨鏈接對(duì)SEO的作用外鏈一直被當(dāng)作搜索引擎優(yōu)化的核心之一，為此各種形式的外鏈都出現(xiàn)了，而并不是所有的外鏈都對(duì)SEO有作用。JS寫(xiě)的外鏈對(duì)SEO無(wú)效搜索引擎比較不愿意去識(shí)別Javascript，所有這點(diǎn)很容易理解。 a href= # quot;this. 這樣的鏈接對(duì)SEO無(wú)效 /a a href= # quot;window.open('http://www.phpstudy.net/'); 這樣的鏈接對(duì)SEO無(wú)效，甚至在Chrome等瀏覽器下都無(wú)法打開(kāi) /a 鏈接 rel=nofollow 也對(duì)SEO無(wú)效如果您跟別人網(wǎng)站換鏈的時(shí)候，通過(guò)源代碼發(fā)現(xiàn)對(duì)方網(wǎng)站給您的鏈接添加了rel=nofollow 屬性，那么就是意味著這條鏈接不讓搜索引擎抓取。 a href= http://www.phpstudy.net/ rel= nofollow 這樣的鏈接對(duì)SEO無(wú)效 /a meta name= robots content= nofollow / a href= http://www.phpstudy.net/ 如果網(wǎng)頁(yè)開(kāi)頭有上面一句話，那么這個(gè)網(wǎng)頁(yè)內(nèi)部所有鏈接都不會(huì)會(huì)搜索引擎抓取，所以對(duì)SEO無(wú)效 /a 鏈接和背景顏色一樣對(duì)SEO無(wú)效谷歌搜索刷先推出新算法打擊鏈接顏色和北京顏色一樣的外鏈，而這種外鏈一般被認(rèn)為是黑鏈。 style type= text/css #vgtlink{background:#FFF}#vgtlinka{background:#FFF} /style div id= vgtlink a href= http://www.phpstudy.net/ id= vgtlinka 這樣的鏈接對(duì)SEO無(wú)效 /a /div a href= http://www.phpstudy.net/ >html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5實(shí)現(xiàn)分享各大微信QQ等交流平臺(tái)二維碼功能

下一篇：html中常用標(biāo)簽的分析（附代碼）