<a> 標籤主要用於定義鏈接和書籤,又被稱作超鏈接或錨(anchor)鏈接,最常見的用法是下面幾種:
建立超鏈接href屬性,跳轉到href=中間的鏈接。<a href=https://www.VeVb.com/>www.VeVb.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.VeVb.com/'>www.VeVb.com</a>
在沒有自定義錨鏈接<a href=https://www.VeVb.com/>錨鏈接文字</a>的CSS樣式的時候,默認錨鏈接的樣式都是下面:
默認鏈接樣式,請用鼠標觸發就可以看到效果
<style type=text/css>
a{color:#00F}
a:visited{color:#800080}
a:hover{color:#F00}
</style>
<a href=https://www.VeVb.com/>www.VeVb.com</a>
a{color:#00F} 未被訪問錨鏈接都是藍色、下劃線樣式
a:visited{color:#800080} 點擊後的鏈接就是紫色、下劃線樣式
a:hover{color:#F00} 鼠標觸發上去就是紅色、下劃線樣式
不過由於這三種顏色太過強烈往往無法匹配所有的網頁設計風格,如果需要其他顏色的錨鏈接樣式,只需要在CSS中按照上面三種樣式自己修改顏色及背景就可以了。
其實HTML剛推出的時候,瀏覽器還沒有現在這麼先進,同時當時的電腦屏幕也沒有現在液晶等色彩,很多甚至都是黑白的。而在當時區分是不是鏈接的方法就是通過下劃線,而在很多黑白顯示器上、或者面向色盲用戶的網頁盡量還是保留下劃線,否則用戶無法區分顏色。
當然為了美觀,一般現代網頁設計都不會在鏈接上直接放上下劃線。不過為了照顧色盲用戶和黑白手機顯示器用戶,建議在用戶鼠標觸發的時候盡量設置CSS樣式為帶下劃線的。
當您打開本頁的鏈接的時候,會發現打開有的鏈接會彈出到其他窗口,而打開有的鏈接會直接替換本頁。而這種跳轉方式可以使用錨鏈接的target屬性設置跳轉窗口。
_self 當前窗口打開,錨鏈接默認都是跳轉到當前的瀏覽器窗口中,即默認target=_self<a href=https://www.VeVb.com/ target=_self>這裡是當前新窗口顯示E維科技首頁</a>_blank 新窗口打開
<a href=https://www.VeVb.com/ target=_blank>這裡是打開新窗口顯示E維科技首頁</a>無名target 同個新窗口打開
<a href=https://www.VeVb.com/ target=_weigeti> 如果這裡面的_weigeti不是網頁內部的name或id,就網頁中所有target=_weigeti 鏈接都在同一個新窗口打開,而_blank每個鏈接都打開不同新窗口</a>框架name或id
<a href=https://www.VeVb.com/ target=weigeti>點擊這裡,將在下面name=weigeti 的框架裡面顯示E維科技首頁,不會跳轉新窗口或者替換當前窗口</a><iframe name=weigeti></iframe>_parent 父窗口打開,將鏈接的文件載入含有該鏈接框架的父框架集或父窗口中。如果含有該鏈接的框架不是嵌套的,則在瀏覽器全屏窗口中載入鏈接的文件,就像_self參數一樣。
<iframe> <a href=https://www.VeVb.com/ target=_parent>這裡是框架內部</a></iframe>_top 框架最頂層,比如網A中鑲嵌iframe了網頁B,網頁B又鑲嵌iframe了網頁C
<iframe> <iframe><a href=https://www.VeVb.com/ target=_top>這裡是框架內部的框架</a></iframe></iframe>
如果網頁C中連接設置target=_parent,則跳將網頁B去掉直接A中嵌入網頁C中鏈接頁面;
而如果網頁C中target=_top ,則直接跳出所有iframe框架,直接轉向C中鏈接頁面。
_top 在當前的整個瀏覽器窗口中打開所鏈接的文檔,因而會刪除所所有框架
外鏈一直被當作搜索引擎優化的核心之一,為此各種形式的外鏈都出現了,而並不是所有的外鏈都對SEO有作用。
搜索引擎比較不願意去識別Javascript,所有這點很容易理解。
<a href=# onclick=this.href='https://www.VeVb.com/'>這樣的鏈接對SEO無效</a><a href=# onclick=window.open('https://www.VeVb.com/');>這樣的鏈接對SEO無效,甚至在Chrome等瀏覽器下都無法打開</a>如果您跟別人網站換鏈的時候,通過源代碼發現對方網站給您的鏈接添加了rel=nofollow 屬性,那麼就是意味著這條鏈接不讓搜索引擎抓取。
<a href=https://www.VeVb.com/ rel=nofollow>這樣的鏈接對SEO無效</a><meta name=robots content=nofollow /><a href=https://www.VeVb.com/>如果網頁開頭有上面一句話,那麼這個網頁內部所有鏈接都不會會搜索引擎抓取,所以對SEO無效</a>
谷歌搜索刷先推出新算法打擊鏈接顏色和北京顏色一樣的外鏈,而這種外鏈一般被認為是黑鏈。
<style type=text/css>#vgtlink{background:#FFF}#vgtlinka{background:#FFF}</style><div id=vgtlink> <a href=https://www.VeVb.com/ id=vgtlinka>這樣的鏈接對SEO無效</a></div> <a href=https://www.VeVb.com/ style=background:#FFF>這樣的鏈接對SEO也無效</a>