前面說過 HTML 是超文本標記語言，到目前為止，還沒有涉及至超文本內(nèi)容，這一節(jié)就來講講能體現(xiàn)超文本的圖片和超鏈接。

圖片 元素

圖片元素用于在網(wǎng)頁中顯示圖片，使用<img>實現(xiàn)。

img 屬性

img 是空標簽，它有如下屬性：

src 中的圖片地址，可以是與網(wǎng)站在相同服務(wù)器的某個路徑下，也可以是在互聯(lián)網(wǎng)其它服務(wù)器上的，這時就需要使用它的 http 地址。

示意代碼

<img src="../img/2-6-1.png" alt="這是本地的圖片" width="400" /> <img   src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"   alt="這是來自百度的logo圖片"   width="300" /> 

效果

超鏈接元素

超鏈接常用于導(dǎo)航和鏈接其它資源。

標簽 <a> 用于設(shè)置超文本鏈接。鏈接的內(nèi)容可以是文字（一個或多個詞）或圖像。

當鼠標光標停留在鏈接上方時，鼠標會從箭頭變成小手的形狀態(tài)。

當點擊鏈接時，網(wǎng)頁會跳轉(zhuǎn)到對應(yīng)的內(nèi)容上。這是通過 <a> 標簽的 href 屬性實現(xiàn)的。

<a> 標簽的屬性

鏈接有幾個不同的狀態(tài)，不同的狀態(tài)下樣式會不一樣，這些樣式也可以通過 CSS 進行自定義。此處不作詳細描述。

<a   href="https://www.baidu.com/"   target="_blank"   title="這是一個會在新窗口打開的百度搜索鏈接。"   rel="nofollow"   >百度搜索</a > 

<a> 標簽的應(yīng)用：導(dǎo)航

導(dǎo)航在網(wǎng)站里指的是，當一個網(wǎng)站的網(wǎng)頁數(shù)量眾多時，通過統(tǒng)一的鏈接區(qū)域，讓用戶對該網(wǎng)站有一個全局的認知，并方便用戶隨時進入想要看到內(nèi)容頁。

我們可以把網(wǎng)頁的導(dǎo)航理解為一本書的目錄。

書的目錄里最重要的信息除了目錄的結(jié)構(gòu)，就是每個目錄對應(yīng)的頁碼。通過頁碼我們能快速找到我們想要讀的內(nèi)容。

類似的，在一個網(wǎng)站中，我們能過導(dǎo)航實現(xiàn)和書的目錄相同功能。

<a> 標簽的應(yīng)用：鏈接其它資源

除了文本鏈接，還能鏈接的資源有圖片，錨點鏈接。

<a   href="https://www.baidu.com/"   target="_blank"   title="這是一個會在新窗口打開的百度搜索鏈接。"   rel="nofollow"   ><img     src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"     alt="這是來自百度的logo圖片"     width="300" /></a> 

當鼠標經(jīng)過時，會顯示的 title 信息，如下：

書簽

想要把鏈接的內(nèi)容用于書簽，就要搭配使用 id 屬性。它就是一個錨點鏈接。

現(xiàn)代很多網(wǎng)頁設(shè)計使用 single page，也就是單頁模式，常見展示頁。

這種網(wǎng)頁，只有一個主頁，所有的內(nèi)容都在主頁上，那這時如何導(dǎo)航呢？

大家記錄，我們使用 a 標簽做導(dǎo)航時，在 href 里填的都是鏈接地址或頁面地址，還能定位到更細的部分，比如，頁面上的某個區(qū)域嗎？

答案是可以，這里就使用 id 屬性進行錨點定位。

錨點鏈接在 href 屬性中使用 # 加目標元素的 id 屬性實現(xiàn)，如下。

<div>   <a href="#introduce">產(chǎn)品介紹</a>   <a href="#proudct">產(chǎn)品展示</a>   <a href="#price">產(chǎn)品價格</a> </div>  <div id="introduce">這里是產(chǎn)品介紹區(qū)</div> <div id="proudct">這里是產(chǎn)品展示區(qū)</div> <div id="price">這里是產(chǎn)品價格區(qū)</div> 

當上面示意代碼中的三個區(qū)的內(nèi)容很多，多到電腦一屏顯示不下，這時通過上面的導(dǎo)航鏈接，就能直接定位到想要去的區(qū)域。

總結(jié)

• ?? 圖片標簽 img 可以在網(wǎng)頁上顯示圖片，圖片可以是本地的，也可以是互聯(lián)網(wǎng)上的。

• ?? 超鏈接標簽 a 用于鏈接資源，常用于網(wǎng)頁導(dǎo)航和鏈接文件。

• ?? 通過元素的 id 標簽，可以使用錨點鏈接達成標簽功能，快速定位到想要瀏覽的區(qū)域。