主頁 > 知識庫 > HTML 鏈接錨標(biāo)簽及其在SEO中的作用介紹

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

熱門標(biāo)簽:營口400電話申請 梧州地圖標(biāo)注app AI外呼系統(tǒng) 價格 水經(jīng)注萬能地圖標(biāo)注 新鄉(xiāng)機器人外呼系統(tǒng) 禹州電話外呼系統(tǒng) 錦州企業(yè)外呼系統(tǒng) 青海保險智能外呼系統(tǒng)商家 最簡單的百度地圖標(biāo)注店鋪

<a> 標(biāo)簽主要用于定義鏈接和書簽,又被稱作超鏈接或錨(anchor)鏈接,最常見的用法是下面幾種:

建立超鏈接href屬性,跳轉(zhuǎn)到href=""中間的鏈接。

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

建立書簽,用name 或 id屬性 和超鏈接尾部加“#”及這個書簽的name 跳轉(zhuǎn)到網(wǎng)頁某個位置

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

當(dāng)您打開E維科技W3CSchool 在線教程的時候,會顯現(xiàn)標(biāo)題下面的導(dǎo)航,這些就是通過書簽name建立的。

Javascript 事件屬性,點擊后執(zhí)行不同命令

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

錨鏈接CSS樣式

在沒有自定義錨鏈接<a href="https://www.jb51.net/">錨鏈接文字</a>的CSS樣式的時候,默認錨鏈接的樣式都是下面:

默認鏈接樣式,請用鼠標(biāo)觸發(fā)就可以看到效果

<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} 鼠標(biāo)觸發(fā)上去就是紅色、下劃線樣式

不過由于這三種顏色太過強烈往往無法匹配所有的網(wǎng)頁設(shè)計風(fēng)格,如果需要其他顏色的錨鏈接樣式,只需要在CSS中按照上面三種樣式自己修改顏色及背景就可以了。

錨鏈接為什么要帶下劃線?

其實HTML剛推出的時候,瀏覽器還沒有現(xiàn)在這么先進,同時當(dāng)時的電腦屏幕也沒有現(xiàn)在液晶等色彩,很多甚至都是黑白的。而在當(dāng)時區(qū)分是不是鏈接的方法就是通過下劃線,而在很多黑白顯示器上、或者面向色盲用戶的網(wǎng)頁盡量還是保留下劃線,否則用戶無法區(qū)分顏色。

當(dāng)然為了美觀,一般現(xiàn)代網(wǎng)頁設(shè)計都不會在鏈接上直接放上下劃線。不過為了照顧色盲用戶和黑白手機顯示器用戶,建議在用戶鼠標(biāo)觸發(fā)的時候盡量設(shè)置CSS樣式為帶下劃線的。

錨鏈接Target跳轉(zhuǎn)窗口設(shè)置

當(dāng)您打開本頁的鏈接的時候,會發(fā)現(xiàn)打開有的鏈接會彈出到其他窗口,而打開有的鏈接會直接替換本頁。而這種跳轉(zhuǎn)方式可以使用錨鏈接的target屬性設(shè)置跳轉(zhuǎn)窗口。

_self 當(dāng)前窗口打開,錨鏈接默認都是跳轉(zhuǎn)到當(dāng)前的瀏覽器窗口中,即默認target="_self"

<a href="https://www.jb51.net/" target="_self">這里是當(dāng)前新窗口顯示E維科技首頁</a>

_blank 新窗口打開

<a href="https://www.jb51.net/" target="_blank">這里是打開新窗口顯示E維科技首頁</a>

無名target 同個新窗口打開

<a href="https://www.jb51.net/" target="_weigeti"> 如果這里面的_weigeti不是網(wǎng)頁內(nèi)部的name或id,就網(wǎng)頁中所有target="_weigeti" 鏈接都在同一個新窗口打開,而_blank每個鏈接都打開不同新窗口 </a>

框架name或id

<a href="https://www.jb51.net/" target="weigeti">點擊這里,將在下面name="weigeti" 的框架里面顯示E維科技首頁,不會跳轉(zhuǎn)新窗口或者替換當(dāng)前窗口</a>
<iframe name="weigeti"></iframe>

_parent 父窗口打開,將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的,則在瀏覽器全屏窗口中載入鏈接的文件,就象_self參數(shù)一樣。

<iframe>
   <a href="https://www.jb51.net/" target="_parent">這里是框架內(nèi)部</a>
</iframe>

_top 框架最頂層,比如網(wǎng)A中鑲嵌iframe了網(wǎng)頁B,網(wǎng)頁B又鑲嵌iframe了網(wǎng)頁C

<iframe>
   <iframe><a href="https://www.jb51.net/" target="_top">這里是框架內(nèi)部的框架</a></iframe>
</iframe>

如果網(wǎng)頁C中連接設(shè)置target=_parent,則跳將網(wǎng)頁B去掉直接A中嵌入網(wǎng)頁C中鏈接頁面;

而如果網(wǎng)頁C中target=_top ,則直接跳出所有iframe框架,直接轉(zhuǎn)向C中鏈接頁面。

_top 在當(dāng)前的整個瀏覽器窗口中打開所鏈接的文檔,因而會刪除所所有框架

錨鏈接對SEO的作用

外鏈一直被當(dāng)作搜索引擎優(yōu)化的核心之一,為此各種形式的外鏈都出現(xiàn)了,而并不是所有的外鏈都對SEO有作用。

JS寫的外鏈對SEO無效

搜索引擎比較不愿意去識別Javascript,所有這點很容易理解。

<a href="#" onclick="this.">這樣的鏈接對SEO無效</a>
<a href="#" onclick="window.open('https://www.jb51.net/');">這樣的鏈接對SEO無效,甚至在Chrome等瀏覽器下都無法打開</a>

鏈接 rel=nofollow 也對SEO無效

如果您跟別人網(wǎng)站換鏈的時候,通過源代碼發(fā)現(xiàn)對方網(wǎng)站給您的鏈接添加了rel=nofollow 屬性,那么就是意味著這條鏈接不讓搜索引擎抓取。

<a href="https://www.jb51.net/" rel="nofollow">這樣的鏈接對SEO無效</a>

<meta name="robots" content="nofollow" />
<a href="https://www.jb51.net/">如果網(wǎng)頁開頭有上面一句話,那么這個網(wǎng)頁內(nèi)部所有鏈接都不會會搜索引擎抓取,所以對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>

標(biāo)簽:懷化 荊門 潮州 延邊 青島 哈密 山南 昭通

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML 鏈接錨標(biāo)簽及其在SEO中的作用介紹》,本文關(guān)鍵詞  HTML,鏈接,錨,標(biāo)簽,及其,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML 鏈接錨標(biāo)簽及其在SEO中的作用介紹》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML 鏈接錨標(biāo)簽及其在SEO中的作用介紹的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章