日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁

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

圖片 元素

圖片元素用于在網頁中顯示圖片，使用<img>實現。

img 屬性

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

src 中的圖片地址，可以是與網站在相同服務器的某個路徑下，也可以是在互聯網其它服務器上的，這時就需要使用它的 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" /> 

效果

超鏈接元素

超鏈接常用于導航和鏈接其它資源。

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

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

當點擊鏈接時，網頁會跳轉到對應的內容上。這是通過 <a> 標簽的 href 屬性實現的。

<a> 標簽的屬性

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

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

<a> 標簽的應用：導航

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

我們可以把網頁的導航理解為一本書的目錄。

書的目錄里最重要的信息除了目錄的結構，就是每個目錄對應的頁碼。通過頁碼我們能快速找到我們想要讀的內容。

類似的，在一個網站中，我們能過導航實現和書的目錄相同功能。

<a> 標簽的應用：鏈接其它資源

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

<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> 

當鼠標經過時，會顯示的 title 信息，如下：

書簽

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

現代很多網頁設計使用 single page，也就是單頁模式，常見展示頁。

這種網頁，只有一個主頁，所有的內容都在主頁上，那這時如何導航呢？

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

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

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

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

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

總結

• ?? 圖片標簽 img 可以在網頁上顯示圖片，圖片可以是本地的，也可以是互聯網上的。

• ?? 超鏈接標簽 a 用于鏈接資源，常用于網頁導航和鏈接文件。

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