認(rèn)識超鏈接標(biāo)簽 a 標(biāo)簽

我們在很多應(yīng)用場景需要點擊標(biāo)簽而跳轉(zhuǎn)到一個新的網(wǎng)頁，比如點擊文章標(biāo)題進入到文章詳情，點擊商品名稱進入到商品詳情，這個時候我們就需要用到超鏈接標(biāo)簽 a 標(biāo)簽了， a 標(biāo)簽頁成為了我們在實際網(wǎng)站開發(fā)過程中，用的比較多的標(biāo)簽。

注意：

本章節(jié)只能展示 a 標(biāo)簽在網(wǎng)頁上呈現(xiàn)的效果，實際跳轉(zhuǎn)效果需自己編寫代碼操作。

1. a 標(biāo)簽的使用

a 標(biāo)簽為雙標(biāo)簽，需要有首尾標(biāo)簽。a 標(biāo)簽的 href 屬性為必填屬性，表示該 a 標(biāo)簽點擊過后跳轉(zhuǎn)網(wǎng)頁的地址。例如：

<a href="http://idcbgp.cn/">去往慕課網(wǎng)</a>

在網(wǎng)頁中會呈現(xiàn)以下效果：

注意:

1. a 標(biāo)簽的 href 屬性必須添加網(wǎng)絡(luò)協(xié)議，如：HTTP 或者 HTTPS 協(xié)議，一般為 HTTPS 協(xié)議，不能單純的編寫網(wǎng)址；
2. a 標(biāo)簽有很多默認(rèn)樣式，默認(rèn)字體為藍色，文本有下劃線，點擊過后，字體變?yōu)槠仙?/li>
3. a 標(biāo)簽?zāi)J(rèn)在本頁面跳轉(zhuǎn)，既不會新開一個網(wǎng)頁跳轉(zhuǎn)；
4. a 標(biāo)簽的 href 屬性如果為錯誤的網(wǎng)絡(luò)地址，則頁面會跳轉(zhuǎn)，但不會顯示網(wǎng)頁的內(nèi)容。

a 標(biāo)簽還有一個屬性為 target，表示跳轉(zhuǎn)的網(wǎng)頁為在當(dāng)前頁面跳轉(zhuǎn)，還是新開一個頁面跳轉(zhuǎn)。默認(rèn)值為 _self,表示為在當(dāng)前頁面跳轉(zhuǎn)，如果將 a 標(biāo)簽的 target 屬性設(shè)置為 _blank，則表示新開一個網(wǎng)頁跳轉(zhuǎn)，代碼如下：

<a href="http://idcbgp.cn/" target="_blank">去往慕課網(wǎng)</a>

a 標(biāo)簽的 target 屬性為可選屬性。

2. 圖片鏈接

我們?nèi)绻蔷帉懶侣勵惥W(wǎng)站或者電商類網(wǎng)站，有一個需求是點擊圖片也可以跳轉(zhuǎn)到對應(yīng)的詳情頁面，這個時候就需要用到圖片鏈接了。其實圖片鏈接非常簡單，我們只需要在 a 標(biāo)簽中嵌套一個 img 標(biāo)簽即可，這樣就可以實現(xiàn)點擊圖片跳轉(zhuǎn)網(wǎng)頁了。

3. 錨點定位

a 標(biāo)簽還有一個重要的功能，那就是錨點定位。什么是錨點定位呢？通俗的講，我們想要讓頁面跳轉(zhuǎn)到的位置，就是錨點。錨點是一種超鏈接，只不過它是頁面內(nèi)部的超鏈接，它指向頁面特定的部分。那么 a 標(biāo)簽實現(xiàn)錨點定位，需要兩個部分組成：錨記 和 指向錨記的鏈接。有以下方法：

1. 方法一：使用 a 標(biāo)簽作為錨記和鏈接，俗稱使用 name 定位，代碼如下：

<a href="#mao">點擊此處到目標(biāo)位置</a>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="mao">目標(biāo)位置</a>

被點擊的 a 標(biāo)簽的 href 屬性需要和目標(biāo)位置的 a 標(biāo)簽的 name 屬性對應(yīng)，而且被點擊的 a 標(biāo)簽的 href 屬性必須加上 # ，但是很多時候錨點對象不一定是 a 標(biāo)簽，那就不必要為了使用錨點定位而額外增加一個 a 標(biāo)簽了。

2. 方法二：使用 a 標(biāo)簽作為鏈接，使用其他元素（建議使用塊元素）作為錨記，俗稱 id 定位，代碼如下：

<a href="#mubiao">點擊此處到目標(biāo)位置</a>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</a>
<div id="mubiao">這里是目標(biāo)的位置</div>

被點擊的 a 標(biāo)簽的 href 屬性必須和目標(biāo)位置的 HTML 標(biāo)簽的 id 名一致，而且被點擊的 a 標(biāo)簽的href 屬性也必須加上 # 。需要注意的是，目標(biāo)位置的 HTML 元素最好是塊級元素。

4. 注意事項

1. a 標(biāo)簽為雙標(biāo)簽，有首尾標(biāo)簽；
2. a 標(biāo)簽必須寫內(nèi)容，否則在頁面上不會顯示；
3. a 標(biāo)簽的 href 屬性為必填屬性，表示跳轉(zhuǎn)網(wǎng)頁的地址；
4. a 標(biāo)簽的 target 屬性為可選屬性，表示是在當(dāng)前頁面跳轉(zhuǎn)還是新開一個頁面跳轉(zhuǎn)，默認(rèn)在當(dāng)前頁面跳轉(zhuǎn)；
5. A 標(biāo)簽有一些默認(rèn)樣式。

5. 經(jīng)驗分享

1. 通常情況下我們會清除 a 標(biāo)簽的默認(rèn)樣式；
2. 如果我們不想 a 標(biāo)簽跳轉(zhuǎn)頁面，我們可以設(shè)置 HREF 屬性為 # 或者 javascript:;；
3. 我們也可以通過 js 阻止 a 標(biāo)簽的默認(rèn)事件，這樣 A 標(biāo)簽頁不會跳轉(zhuǎn)頁面；
4. a 標(biāo)簽為行內(nèi)塊元素，默認(rèn)在同一行排列，可以設(shè)置寬高，所以我們通常用來做導(dǎo)航欄。

6. 真實案例分享

思否論壇首頁

 <div>
   <a href="/">
      <span>我的訂閱</span>
   </a>
   <a href="/hottest">
      <span>近期熱門</span>
   </a>
   <a href="/newest">
      <span >最新內(nèi)容</span>
   </a>
</div>

京東首頁（部分）

<ul>
    <li>
      <a href="javascript:login();">你好，請登錄</a>  
      <a href="javascript:regist();">免費注冊</a>
    </li>
    <li>
      <div>
        <a target="_blank" href="//order.jd.com/center/list.action">我的訂單</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//home.jd.com/">我的京東</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//vip.jd.com/">京東會員</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//b.jd.com/">企業(yè)采購</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//app.jd.com/">手機京東</a>
      </div>
    </li>
  </ul>

7. 小結(jié)

1. a 標(biāo)簽為雙標(biāo)簽，有首尾標(biāo)簽，且必須有內(nèi)容。
2. a 標(biāo)簽必須填寫 href 屬性，href 屬性為跳轉(zhuǎn)的地址路徑。
3. a 標(biāo)簽為行內(nèi)元素，不可以設(shè)置寬高，且在一行排列。
4. a 標(biāo)簽通常用于制作導(dǎo)航欄。
5. a 標(biāo)簽設(shè)置 target 屬性來設(shè)置跳轉(zhuǎn)頁面的打開方式。