《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第二章-頁(yè)面結(jié)構(gòu)-理論學(xué)習(xí)資料_第1頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第二章-頁(yè)面結(jié)構(gòu)-理論學(xué)習(xí)資料_第2頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第二章-頁(yè)面結(jié)構(gòu)-理論學(xué)習(xí)資料_第3頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第二章-頁(yè)面結(jié)構(gòu)-理論學(xué)習(xí)資料_第4頁(yè)
《使用HTML5實(shí)現(xiàn)響應(yīng)式布局》第二章-頁(yè)面結(jié)構(gòu)-理論學(xué)習(xí)資料_第5頁(yè)
已閱讀5頁(yè)，還剩11頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第二章頁(yè)面結(jié)構(gòu)理論內(nèi)容結(jié)構(gòu)標(biāo)簽概述常見的結(jié)構(gòu)標(biāo)簽1.結(jié)構(gòu)標(biāo)簽概述網(wǎng)站的整體結(jié)構(gòu)可以分為頁(yè)眉、內(nèi)容區(qū)塊和頁(yè)腳三大部分頁(yè)眉內(nèi)容區(qū)塊頁(yè)腳2.常見的結(jié)構(gòu)標(biāo)簽為實(shí)現(xiàn)清晰的文檔結(jié)構(gòu)，HTML5提供了相關(guān)的結(jié)構(gòu)標(biāo)簽：頁(yè)眉標(biāo)簽是header頁(yè)腳標(biāo)簽是footer導(dǎo)航欄標(biāo)簽是nav內(nèi)容區(qū)塊標(biāo)簽是section文章標(biāo)簽是article側(cè)邊欄標(biāo)簽是aside常見的結(jié)構(gòu)標(biāo)簽常見的HTML5結(jié)構(gòu)標(biāo)簽構(gòu)成頁(yè)面結(jié)構(gòu)的示意圖如下header標(biāo)簽header標(biāo)簽可用于頁(yè)面內(nèi)任何特定獨(dú)立部分的前言或?qū)Ш街?lt;body>

<header> <h1>Web開發(fā)工作室</h1>

</header></body>footer標(biāo)簽footer標(biāo)簽表示當(dāng)前區(qū)域內(nèi)容的頁(yè)腳，頁(yè)腳通常包含版權(quán)信息、相關(guān)鏈接列表、作者信息或當(dāng)前內(nèi)容塊結(jié)尾處的內(nèi)容<body><header></header><footer><!--省略--></footer></body>nav標(biāo)簽nav標(biāo)簽是一個(gè)可以用作頁(yè)面導(dǎo)航的鏈接組，用于管理多個(gè)超鏈接<body><header>

<nav>

<!--省略-->

</nav></header><footer></footer></body>section標(biāo)簽section標(biāo)簽的作用是對(duì)頁(yè)面上的內(nèi)容執(zhí)行分塊，或?qū)ξ恼路侄?lt;section><header><!--省略--></header><footer><!--省略--></footer></section>article標(biāo)簽article標(biāo)簽是一個(gè)特殊的section標(biāo)簽，它比section標(biāo)簽具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊<section><header><!--省略--></header>

<article><header><!--省略--></header><footer><!--省略--></footer>

</article></section>aside標(biāo)簽aside標(biāo)簽用于表示當(dāng)前頁(yè)面或文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用鏈接、側(cè)邊欄、廣告、導(dǎo)航條以及類似的有別于主要內(nèi)容的部分<aside><section><!--省略--></section><section><!--省略--></section></aside>div標(biāo)簽除了使用HTML5的結(jié)構(gòu)標(biāo)簽，還可以使用div制作頁(yè)面的結(jié)構(gòu)。div標(biāo)簽的名稱來(lái)源于英文單詞division，通常稱其為HTML5的層或容器，常結(jié)合CSS實(shí)現(xiàn)網(wǎng)頁(yè)布局技術(shù)。div通常使用id屬性設(shè)置標(biāo)簽的標(biāo)識(shí)，用于區(qū)分不同的內(nèi)容結(jié)構(gòu)區(qū)域。id是HTML5標(biāo)簽的標(biāo)識(shí)，頁(yè)面中的每個(gè)標(biāo)簽的id不能相同。div標(biāo)簽div標(biāo)簽表達(dá)結(jié)構(gòu)化布局頁(yè)面排版的方法<body>

<divid="header">--頁(yè)眉--</div>

<divid="section">--內(nèi)容區(qū)塊--</div>

<divid="footer">--頁(yè)腳--</div>

</body>HTML5的結(jié)構(gòu)標(biāo)簽本質(zhì)是div標(biāo)簽，如<header>與<divid=”header”>表達(dá)的是相同的意思。只是<header>在語(yǔ)義上更為直觀。div默認(rèn)沒有外觀，由CSS3設(shè)置div標(biāo)簽在HTML5中，與div標(biāo)簽相似的還有span標(biāo)簽，其寫法是：<span>內(nèi)容</span>。div與span的區(qū)別是div占用一行寬度，而span占用寬度隨內(nèi)容寬度變換。在DreamweaverCC的設(shè)計(jì)視圖中，可以看出其占位寬度及顯示區(qū)別。div獨(dú)占一行的塊狀結(jié)構(gòu)特點(diǎn)span隨內(nèi)容的寬度變化，在一行顯示內(nèi)容總結(jié)在大型網(wǎng)站中，

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論