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

我們?cè)诤芏鄳?yīng)用場(chǎng)景需要點(diǎn)擊標(biāo)簽而跳轉(zhuǎn)到一個(gè)新的網(wǎng)頁(yè)，比如點(diǎn)擊文章標(biāo)題進(jìn)入到文章詳情，點(diǎn)擊商品名稱進(jìn)入到商品詳情，這個(gè)時(shí)候我們就需要用到超鏈接標(biāo)簽 a 標(biāo)簽了， a 標(biāo)簽頁(yè)成為了我們?cè)趯?shí)際網(wǎng)站開發(fā)過程中，用的比較多的標(biāo)簽。

注意：

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

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

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

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

在網(wǎng)頁(yè)中會(huì)呈現(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)字體為藍(lán)色，文本有下劃線，點(diǎn)擊過后，字體變?yōu)槠仙?/li>
3. a 標(biāo)簽?zāi)J(rèn)在本頁(yè)面跳轉(zhuǎn)，既不會(huì)新開一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)；
4. a 標(biāo)簽的 href 屬性如果為錯(cuò)誤的網(wǎng)絡(luò)地址，則頁(yè)面會(huì)跳轉(zhuǎn)，但不會(huì)顯示網(wǎng)頁(yè)的內(nèi)容。

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

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

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

2. 圖片鏈接

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

3. 錨點(diǎn)定位

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

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

<a href="#mao">點(diǎn)擊此處到目標(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>

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

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

<a href="#mubiao">點(diǎn)擊此處到目標(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>

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

4. 注意事項(xiàng)

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

5. 經(jīng)驗(yàn)分享

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

6. 真實(shí)案例分享

思否論壇首頁(yè)

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

京東首頁(yè)（部分）

<ul>
    <li>
      <a href="javascript:login();">你好，請(qǐng)登錄</a>  
      <a href="javascript:regist();">免費(fèi)注冊(cè)</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/">京東會(huì)員</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//b.jd.com/">企業(yè)采購(gòu)</a>
      </div>
    </li>
    <li>
      <div>
        <a target="_blank" href="//app.jd.com/">手機(jī)京東</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)頁(yè)面的打開方式。