認識超鏈接標簽 a 標簽

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

注意：

本章節只能展示 a 標簽在網頁上呈現的效果，實際跳轉效果需自己編寫代碼操作。

1. a 標簽的使用

a 標簽為雙標簽，需要有首尾標簽。a 標簽的 href 屬性為必填屬性，表示該 a 標簽點擊過后跳轉網頁的地址。例如：

<a href="http://www.xianlaiwan.cn/">去往慕課網</a>

在網頁中會呈現以下效果：

注意:

1. a 標簽的 href 屬性必須添加網絡協議，如：HTTP 或者 HTTPS 協議，一般為 HTTPS 協議，不能單純的編寫網址；
2. a 標簽有很多默認樣式，默認字體為藍色，文本有下劃線，點擊過后，字體變為偏紫色；
3. a 標簽默認在本頁面跳轉，既不會新開一個網頁跳轉；
4. a 標簽的 href 屬性如果為錯誤的網絡地址，則頁面會跳轉，但不會顯示網頁的內容。

a 標簽還有一個屬性為 target，表示跳轉的網頁為在當前頁面跳轉，還是新開一個頁面跳轉。默認值為 _self,表示為在當前頁面跳轉，如果將 a 標簽的 target 屬性設置為 _blank，則表示新開一個網頁跳轉，代碼如下：

<a href="http://www.xianlaiwan.cn/" target="_blank">去往慕課網</a>

a 標簽的 target 屬性為可選屬性。

2. 圖片鏈接

我們如果是編寫新聞類網站或者電商類網站，有一個需求是點擊圖片也可以跳轉到對應的詳情頁面，這個時候就需要用到圖片鏈接了。其實圖片鏈接非常簡單，我們只需要在 a 標簽中嵌套一個 img 標簽即可，這樣就可以實現點擊圖片跳轉網頁了。

3. 錨點定位

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

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

<a href="#mao">點擊此處到目標位置</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">目標位置</a>

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

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

<a href="#mubiao">點擊此處到目標位置</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">這里是目標的位置</div>

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

4. 注意事項

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

5. 經驗分享

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

6. 真實案例分享

思否論壇首頁

 <div>
   <a href="/">
      <span>我的訂閱</span>
   </a>
   <a href="/hottest">
      <span>近期熱門</span>
   </a>
   <a href="/newest">
      <span >最新內容</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/">企業采購</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//app.jd.com/">手機京東</a>
      </div>
    </li>
  </ul>

7. 小結

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