1、這里通過一個簡單的頁面布局的例子，來展示上述標(biāo)簽的使用方法示例模仿博客首頁布局實(shí)現(xiàn)如圖21的網(wǎng)頁結(jié)構(gòu)，這是一個非常典型的博客頁面頭部尾部水平導(dǎo)航欄側(cè)邊欄導(dǎo)航以及內(nèi)容圖21在圖21中已經(jīng)看到，相應(yīng)標(biāo)簽實(shí)現(xiàn)的區(qū)域用名稱標(biāo)注了出來，比如頭部Header在編寫頁面前，有必要說一下頁面元素由HTML5實(shí)現(xiàn)；1leftcenterright三種都設(shè)置左浮動 2設(shè)置center寬度為100 3設(shè)置負(fù)邊距，left設(shè)置負(fù)邊距為100%，right設(shè)置負(fù)邊距為自身寬度 4設(shè)置content的margin值為左右兩個側(cè)欄留出空間，margin值大小為left和right寬度1流動布局html網(wǎng)頁默認(rèn)的布局方式特點(diǎn)1塊狀元素都會在所處的包含元素內(nèi)自上；所謂“T”結(jié)構(gòu)布局，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部為橫條網(wǎng)站標(biāo)志和廣告條，左下方為主菜單，右面顯示內(nèi)容，這是網(wǎng)頁設(shè)計(jì)中用得最廣泛的一種布局方式在實(shí)際設(shè)計(jì)中還可以改變“T”結(jié)構(gòu)布局的形式如左右兩欄式布局，一半是正文，另一半是形象的圖片導(dǎo)航或正文不等兩欄式布置，通過背景色；布局是一種網(wǎng)頁布局方式，它是將網(wǎng)頁內(nèi)容按照HTML元素的標(biāo)簽進(jìn)行組織，從而實(shí)現(xiàn)頁面的布局和樣式div布局基于HTML的語義化標(biāo)簽，通過對不同的div元素進(jìn)行分類和布局，實(shí)現(xiàn)網(wǎng)頁的整體結(jié)構(gòu)拓展知識具體來說，div布局是一種將網(wǎng)頁內(nèi)容劃分為多個區(qū)域的方式，每個區(qū)域通過不同的div標(biāo)簽來標(biāo)識，通過CSS進(jìn)行樣；4選擇“div標(biāo)簽”命令打開dreamweaver，新建網(wǎng)頁并保存為“diehtml”，選擇插入布局對象div標(biāo)簽命令，打開“div標(biāo)簽”對話框5柵格與響應(yīng)式移動端的興起，2007與2010當(dāng)前WEB前端開發(fā)使用DIV+CSS的布局方式會比較多也比較常用吧，網(wǎng)頁布局看起來貌似簡單，但是它需要綜合使用很多HTML+。

2、是HTML網(wǎng)頁框架是指網(wǎng)頁的結(jié)構(gòu)和布局，由HTMLHypertextMarkupLanguage語言來定義和創(chuàng)建HTML是一種標(biāo)記語言，用于描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容；頁腳部分始終放在網(wǎng)頁的底部ltfooter標(biāo)簽用于設(shè)置網(wǎng)頁中的頁腳使用表格布局最簡單和最流行的創(chuàng)建布局的方法是使用HTML lttable標(biāo)簽可以按照自己喜歡的方式來對表格中的列和行進(jìn)行排列例例如，使用包含3行和2列的表來實(shí)現(xiàn)以下HTML布局示例，但頁眉和頁腳列使用colspan屬性跨越兩列l(wèi)ttable width = quot100；html5網(wǎng)頁結(jié)構(gòu)布局標(biāo)簽 對于HTML5來講，在網(wǎng)頁結(jié)構(gòu)上標(biāo)簽定義與使用更加語義化，讓搜索引擎以及工程師更加迅速理解當(dāng)前網(wǎng)頁的整個重心所在 列舉常用HTML5結(jié)構(gòu)組合 header nav section article figure figcaption aside footer 一般首頁結(jié)構(gòu)，如圖所示 當(dāng)然也可以是下面的結(jié)構(gòu) 其中section和article最為相似，而且；HTML布局中，CSS命名至關(guān)重要以一個簡單的flex布局為例，確保像Taylor的圖片和文字這樣需要上下布局的元素，使用正確的框包圍在body部分，根據(jù)CSS定義的樣式，開始填充內(nèi)容運(yùn)行測試，通過瀏覽器預(yù)覽網(wǎng)頁，確保內(nèi)容按預(yù)期展示深入學(xué)習(xí)flex布局，如在部分，我們將id為#39main#39的元素設(shè)為displayflex；html5新增的一些語義話標(biāo)簽，可以使用比如頭部可以使用header標(biāo)簽，導(dǎo)航nav，主體部分可以使用section，底部footer，中間文章articlediv，ul li標(biāo)簽都是使用比較頻繁的標(biāo)簽，span，i，em可以對文字進(jìn)行單獨(dú)的描述，表示等ltarticle標(biāo)簽定義外部的內(nèi)容，比如來自一個外部的新聞提供者的一篇新的文章，或者來自；HTML的布局主要有以下幾種一流式布局 流式布局是HTML文檔中最基礎(chǔ)且常見的布局方式在這種布局中，頁面元素按照其在HTML中出現(xiàn)的順序從左到右從上到下排列如果元素所占空間超出容器邊界，內(nèi)容會被自動換行或者延伸這種布局簡單直觀，適用于簡單的網(wǎng)頁布局二網(wǎng)格布局 網(wǎng)格布局是一種二維的。

3、1HTML布局主要有兩種方式，一種是表格布局，一種是DIV布局2HTML表格布局是WEB10時代主要使用的布局方式，即使用TABLE標(biāo)簽進(jìn)行布局，優(yōu)點(diǎn)是布局比較簡單3HTML DIV布局是WEB20時代主要使用的布局方式，優(yōu)點(diǎn)是符合W3C標(biāo)準(zhǔn)，載入速度比較快，也比較便于做結(jié)構(gòu)分離4現(xiàn)在一般都是提倡使用DIV布局；lthtml 3 下面我們?nèi)aincss寫一些屬性看看是不是能控制index文件我希望整個頁面是粉色的，看上去溫馨，我在maincss里寫上*backgroundFF66FF看看我們打開index文件看看是不是在瀏覽器上是不是粉色的在瀏覽器上是粉色的，表示已經(jīng)受到css樣式表的控制了4 下面我們進(jìn)行布局一般網(wǎng)頁都是3。

4、一在html代碼頁面的body標(biāo)簽寫一個ltcenterltcenter的標(biāo)簽，在里面寫內(nèi)容即可實(shí)現(xiàn)居中，如接下來使用的兩個方法的前提是你的html代碼鏈接上css代碼不然沒效果 二textalign center方法在html代碼頁面給某一個標(biāo)簽取一個名字，然后在css代碼給標(biāo)簽設(shè)置屬性 css效果圖三margin 0；HTML語義化與網(wǎng)頁布局的精講 語義化的意義與優(yōu)勢 語義化是HTML文本能夠表達(dá)其內(nèi)部內(nèi)容的意義，這使機(jī)器能更好地理解網(wǎng)頁非語義化HTML代碼中，元素如等，沒有明確的意義，但語義化的元素如等明確表示了元素的作用，例如頭部導(dǎo)航頁腳或文章等語義化的好處包括有利于搜索引擎優(yōu)化SEO。