結(jié)合HTML5標(biāo)簽介紹網(wǎng)頁布局方式的規(guī)范

2022-05-08 分類：網(wǎng)站建設(shè)

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

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

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

。

規(guī)范二，用

定義頁面的“頁眉”部分

在網(wǎng)站設(shè)計網(wǎng)站制作中“頁眉”部指的就是網(wǎng)頁的頂部部分，又稱為head或header。這部分內(nèi)容包括：網(wǎng)站名稱、LOGO、主導(dǎo)航、Banner內(nèi)容。在代碼編寫時，統(tǒng)的做法是：使用

來定義網(wǎng)頁的頭文件部分。

HTML5直接提出了用

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

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

企業(yè)網(wǎng)站中每個頁面都有它的主要部分，如文章頁里面的文章、列表頁的文章標(biāo)題列表。html5對于這部分內(nèi)容提供了

標(biāo)簽，但在實(shí)際工作中，主要內(nèi)容頁面還面包屑、廣告位、評論等內(nèi)容，這時我們可以單獨(dú)設(shè)置一個來定義它為頁面內(nèi)容部分。

頁面的主要內(nèi)容依據(jù)不同層次的頁面，其內(nèi)容各自不同，如網(wǎng)站首頁內(nèi)部則由多個“部分”組成。每一塊內(nèi)容我們可以使用

標(biāo)簽定義。而