怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄

發(fā)布時(shí)間：2021-08-25 18:17:34 來源：億速云閱讀：298 作者：chen 欄目：大數(shù)據(jù)

這篇文章主要講解了“怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄”吧！

導(dǎo)航欄，有的人又喜歡叫菜單欄。確實(shí)和菜單有點(diǎn)像。導(dǎo)航欄幾乎會(huì)用在所有的網(wǎng)站中。那么導(dǎo)航欄是怎么開發(fā)出來的呢？今天我們就來開發(fā)一個(gè)最為簡單的導(dǎo)航欄。

重要知識(shí)點(diǎn)：鏈接標(biāo)簽<a>

基本舉例<a href="index.html">首頁</a>

這是最基本的標(biāo)簽的使用舉例。我們可以形成一個(gè)最為簡單的鏈接文字。用在瀏覽器中，會(huì)在同一個(gè)窗口標(biāo)簽中進(jìn)行跳轉(zhuǎn)網(wǎng)頁。

<a>標(biāo)簽還有其它更為有用的屬性，以下我們來簡單介紹一下：

href屬性：

鏈接的目標(biāo)，如果要鏈接外部網(wǎng)站，那么要加http://www.bcczcs.com

target屬性：

使用_blank，可以打開新窗口鏈接出去。默認(rèn)如果沒寫，意味著在本窗口打開鏈接。

<a>標(biāo)簽在不同的css包裝下，可以形成完全不同的效果。我們可以通過普通的點(diǎn)擊效果進(jìn)行跳轉(zhuǎn)。也可以使用js控件a標(biāo)簽來進(jìn)行跳轉(zhuǎn)。

總結(jié)

1、掌握鏈接標(biāo)簽<a> 成對出現(xiàn)的，標(biāo)簽的中間寫鏈接的文字

2、掌握href屬性

3、掌握target屬性

文件結(jié)構(gòu)：

怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄

index.html源代碼

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>劉金玉編程首頁</title>  </head>  <body>    <div id="wrapper">      <div class="header">        <div class="nav">          <a href="index.html">首頁</a>          <a href="#">編程開發(fā)</a>          <a href="#">人生旅程</a>          <a href="#">攝影攝像</a>          <a href="#">網(wǎng)賺技巧</a>          <a href="#">電腦技巧</a>          <a href="http://ljy.kim" target="_blank">編程創(chuàng)造城市</a>        </div>      </div>      <div class="main"></div>      <div class="footer"></div>    </div>  </body></html>

感謝各位的閱讀，以上就是“怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

怎么用html5實(shí)現(xiàn)網(wǎng)頁導(dǎo)航欄

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽