“沒(méi)有規(guī)矩不成方圓”這句話(huà)選用在任何行業(yè)都是可行的，因?yàn)槲覀冏鋈魏问虑槎急仨氁凑找欢ǖ囊?guī)則和順序來(lái)進(jìn)行，否則你這樣做、他那樣做，整個(gè)社會(huì)都會(huì)亂套，所以按規(guī)范辦事、工作、生活是非常必要的。網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)布局也是如此，千尤不可掉以輕心。
網(wǎng)頁(yè)如何布局？一直是網(wǎng)站設(shè)計(jì)網(wǎng)站制作中一個(gè)常會(huì)談到的話(huà)題，總結(jié)起來(lái)就是頭部、內(nèi)容、側(cè)欄、底部幾個(gè)“盒子(Box)”的集合等。看似一個(gè)簡(jiǎn)單的問(wèn)題在網(wǎng)頁(yè)設(shè)計(jì)中會(huì)隨著網(wǎng)站越來(lái)越龐大交錯(cuò)，而變得越來(lái)越復(fù)雜。所以網(wǎng)站設(shè)計(jì)師在工作中也要按照正確的規(guī)范來(lái)進(jìn)行，否則可以會(huì)因?yàn)椴环犀F(xiàn)行的規(guī)范，而造成一些邏輯不正確，或是設(shè)計(jì)元素?zé)o法使用的問(wèn)題。
為什么要規(guī)范網(wǎng)頁(yè)布局的標(biāo)簽使用及命名？
首先，html5提出了標(biāo)簽邏輯化，在標(biāo)簽本身已經(jīng)規(guī)范了內(nèi)容的使用，無(wú)論在頁(yè)面體驗(yàn)還是搜索引擎親和方面都是大勢(shì)所趨。

其次，對(duì)于一個(gè)網(wǎng)站的代碼編寫(xiě)，尤其是結(jié)構(gòu)復(fù)雜的大項(xiàng)目難免涉及到多人合作、接替的工作內(nèi)容，因此規(guī)范化的使用標(biāo)簽及命名能更好的讓多人“兼容”在一起，減少因工作交接而耽擱的工作進(jìn)程時(shí)間。

結(jié)合HTML5標(biāo)簽介紹網(wǎng)頁(yè)布局方式的規(guī)范
規(guī)范一，為整個(gè)頁(yè)面添加“容器”標(biāo)簽
這是一種形象的比喻，將整個(gè)頁(yè)面比做一個(gè)房間，那么我們需要為這個(gè)房間起一個(gè)名稱(chēng)標(biāo)簽，以便罩住、囊括里面所有的頁(yè)面元素。簡(jiǎn)單的說(shuō)就是在body內(nèi)設(shè)置一個(gè)最外層“div”，有了它我們可以控制整張網(wǎng)頁(yè)的位置——居左、居右、居中。在名稱(chēng)標(biāo)簽的命名上可以最直觀的標(biāo)寫(xiě)<div id=”page”>。

規(guī)范二，用<Header>定義頁(yè)面的“頁(yè)眉”部分

在網(wǎng)站設(shè)計(jì)網(wǎng)站制作中“頁(yè)眉”部指的就是網(wǎng)頁(yè)的頂部部分，又稱(chēng)為head或header。這部分內(nèi)容包括：網(wǎng)站名稱(chēng)、LOGO、主導(dǎo)航、Banner內(nèi)容。在代碼編寫(xiě)時(shí)，統(tǒng)的做法是：使用 <div id=”header”> 來(lái)定義網(wǎng)頁(yè)的頭文件部分。

HTML5直接提出了用<header>標(biāo)簽來(lái)更直觀的告訴web開(kāi)發(fā)者與搜索引擎：這里是相對(duì)父級(jí)的頭部/頂部/頁(yè)眉部分。header標(biāo)簽可以在頁(yè)面里重復(fù)出現(xiàn)，我們可以將作為頁(yè)面布局的header標(biāo)簽命名為 id=”masthead”或其他。

規(guī)范三，用“Content”命名頁(yè)面的主要內(nèi)容部分

企業(yè)網(wǎng)站中每個(gè)頁(yè)面都有它的主要部分，如文章頁(yè)里面的文章、列表頁(yè)的文章標(biāo)題列表。html5對(duì)于這部分內(nèi)容提供了<article>標(biāo)簽，但在實(shí)際工作中，主要內(nèi)容頁(yè)面還面包屑、廣告位、評(píng)論等內(nèi)容，這時(shí)我們可以單獨(dú)設(shè)置一個(gè)<div=”content”> 來(lái)定義它為頁(yè)面內(nèi)容部分。

頁(yè)面的主要內(nèi)容依據(jù)不同層次的頁(yè)面，其內(nèi)容各自不同，如網(wǎng)站首頁(yè)內(nèi)部則由多個(gè)“部分”組成。每一塊內(nèi)容我們可以使用 <section> 標(biāo)簽定義。而<article> 標(biāo)簽我們用于定義頁(yè)面內(nèi)的主題內(nèi)容。

規(guī)范四，用 “Sidebar”命名頁(yè)面的輔助信息部分

Sidebar是頁(yè)面布局中稱(chēng)為“側(cè)欄”或“邊欄”，它往往是頁(yè)面的可選部分。Sidebar內(nèi)放置的是相對(duì)于Content的相關(guān)內(nèi)容或輔助內(nèi)容，如“最新文章”、“熱門(mén)文章”等。html5的新標(biāo)簽<aside>代表與頁(yè)面內(nèi)容相關(guān)、有別于主要內(nèi)容的部分。

規(guī)范五，用<Footer>定義頁(yè)面的頁(yè)腳部分
了解了header標(biāo)簽之后我們就不難了解footer標(biāo)簽了，它是相對(duì)于父級(jí)的底部/頁(yè)腳部分。由于網(wǎng)站底部?jī)?nèi)容主要是體現(xiàn)版權(quán)類(lèi)信息，所以我們可以為footer標(biāo)簽命名為“colophon”。

分享標(biāo)題：結(jié)合HTML5標(biāo)簽介紹網(wǎng)頁(yè)布局方式的規(guī)范
URL標(biāo)題：http://m.2m8n56k.cn/news29/151129.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、用戶(hù)體驗(yàn)、云服務(wù)器、軟件開(kāi)發(fā)、微信小程序、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)