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