欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

圖片 元素

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

img 屬性

img 是空標(biāo)簽，它有如下屬性：

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

示意代碼

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

效果

超鏈接元素

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

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

當(dāng)鼠標(biāo)光標(biāo)停留在鏈接上方時(shí)，鼠標(biāo)會(huì)從箭頭變成小手的形狀態(tài)。

當(dāng)點(diǎn)擊鏈接時(shí)，網(wǎng)頁(yè)會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的內(nèi)容上。這是通過(guò) <a> 標(biāo)簽的 href 屬性實(shí)現(xiàn)的。

<a> 標(biāo)簽的屬性

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

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

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

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

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

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

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

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

除了文本鏈接，還能鏈接的資源有圖片，錨點(diǎn)鏈接。

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

當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，會(huì)顯示的 title 信息，如下：

書簽

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

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

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

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

答案是可以，這里就使用 id 屬性進(jìn)行錨點(diǎn)定位。

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

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

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

總結(jié)

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

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

• ?? 通過(guò)元素的 id 標(biāo)簽，可以使用錨點(diǎn)鏈接達(dá)成標(biāo)簽功能，快速定位到想要瀏覽的區(qū)域。