<a>標簽可定義錨。一個錨有兩種用法:
- 通過使用 href 屬性,創建一個到另外一個文檔的鏈接
- 通過使用 name 或 id 屬性,創建一個文檔內部的書簽
如果是在 HTML 5 中,它定義為:超鏈接,用於從一個頁面連接到另一個頁面。此時,name 屬性將由 id 代替。
通常格式:
<a href="url">text</a>
<a href="mapObj.zoomOut();">縮小</a>
此種方法在傳遞 this 等參數時很容易出現問題,而且 javascript: 協議作為 <a> 的 href 屬性時不僅會導致不必要的window.onbeforeunload 事件的觸發,還會使 IE 中的 gif 動畫圖片停止播放。W3C 標准不推薦在 href 里面執行 javascript 語句。<a href="javascript:void(0);" onclick="mapObj.zoomOut();">縮小</a>
這種方法是很多網站最常用的方法,也是最周全的方法,onclick 方法負責執行 JS 函數,而 void 是一個操作符,void(0) 返回undefined,地址不發生跳轉。而且這種方法不會像第一種方法一樣直接將 JS 方法暴露在瀏覽器的狀態欄。<a href="javascript:;" onclick="mapObj.zoomOut();">縮小</a>
這種方法同 2),區別在於執行了一條空的 JS 代碼。<a href="#" onclick="mapObj.zoomOut();">縮小</a>
這種方法也是網上很常見的代碼,# 是標簽內置的一個方法,代表 top 的作用。所以用這種方法點擊后網頁返回到頁面的最頂端,但是對於一個很長的頁面而言,可能會在跳轉時產生頁面滑動的效果。<a href="#" onclick="mapObj.zoomOut();">縮小</a>
這種方法點擊執行了js函數后return false,頁面不發生跳轉,執行后還是在頁面的當前位置。<a href="http://www.test.com/" target="_blank">test</a>
- _blank - 在一個新的未命名的窗口載入文檔
- _self - 在相同的框架或窗口中載入目標文檔
- _parent - 把文檔載入父窗口或包含了超鏈接引用的框架的框架集
- _top - 把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架
<td style="cursor:pointer;" onclick="window.open('http://blog.163.com/hdyl_8603','_blank')">網址 :<a href=''>hdyl的blog</a></td>
二.書簽:
<a name="test"></a>
添加鏈接的部分,添加標簽:<a href="#test"></a>
三.樣式:如果需要修改某些內容的鏈接樣式,可設置一個 class 而將這些內容放在這個 class 內。比如:
<style type="text/css">
html,body{height:100%;margin:0;padding:0;font-size:15px;}
/*右鍵菜單樣式*/
.triangle-border {
position:relative;
padding:15px;
border:2px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/*右鍵菜單項樣式,triangle-border 內的 <a> 標簽樣式*/
.triangle-border A:link{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:visited{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:active{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:hover{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
</style>
<body></body> 中應用:
<div class="triangle-border">
<table>
<tr>
<td><a href="javascript:void(0);" onclick="mapObj.zoomIn();">放大</a></td>
</tr>
</table>
</div>
效果:
