首頁(yè)技術(shù)文章正文

怎樣創(chuàng)建錨點(diǎn)鏈接?錨點(diǎn)鏈接的創(chuàng)建步驟

更新時(shí)間:2020-12-24 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

  如果網(wǎng)頁(yè)內(nèi)容較多,頁(yè)面過(guò)長(zhǎng),瀏覽網(wǎng)頁(yè)時(shí)就需要不斷地拖動(dòng)滾動(dòng)條來(lái)查看所需要的內(nèi)容,這樣不僅效率較低,而且不方便操作。為了提高信息的檢索速度,HTML語(yǔ)言提供了一種特殊的鏈接——錨點(diǎn)鏈接。通過(guò)創(chuàng)建錨點(diǎn)鏈接,用戶能夠直接跳到指定位置的內(nèi)容。示例代碼如下:

  <ul>

  <li><a href="#one">福田繁雄</a></li>

    <li><a href="#two">西摩·切瓦斯特</a></li>

    <li><a href="#three">岡特·蘭堡</a></li>

    <li><a href="#four">原研哉</a></li>

    <li><a href="#five">田中一光</a></li>

  </ul>

  運(yùn)行示例代碼,效果如圖1所示。

1608801021203_1.jpg

  圖1 錨點(diǎn)鏈接的使用

  通過(guò)圖1看出,網(wǎng)頁(yè)頁(yè)面內(nèi)容比較長(zhǎng)而且出現(xiàn)了滾動(dòng)條。當(dāng)鼠標(biāo)單擊“原研哉”的鏈接時(shí),頁(yè)面會(huì)自動(dòng)定位到相應(yīng)的內(nèi)容介紹部分,頁(yè)面效果如圖2所示。

1608801032995_2.jpg

  圖2 頁(yè)面跳到相應(yīng)內(nèi)容的指定位置

  通過(guò)上面的例子可以總結(jié)出,創(chuàng)建錨點(diǎn)鏈接可分為兩步:一是使用標(biāo)簽應(yīng)用href屬性(href屬性= "#id名",id名不可重復(fù))創(chuàng)建鏈接文本;二是使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。



猜你喜歡:

黑馬程序員web前端:HTML5+CSS3教程下載

怎樣在HTML中創(chuàng)建超鏈接?

黑馬程序員web前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!