學習前端第一步：划分網頁結構，網頁的結構的划分應該遵循哪些原則，如何去划分網頁的結構呢？
對於一個前端初學者，第一步就是要學會如何划分一個網頁的結構。當設計師給到你一張設計圖，你需要根據這張圖做出一個符合標准的頁面，這里所說的標准，即w3c標准，參考w3school在線教程。那么做出一個完整的符合標准的網頁第一步就是要划分網頁的結構。一般來講，網頁結構的划分需要遵循幾個原則：
一、自上而下原則
因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。
二、從左至右原則
在自上而下的同時，同一行的內容是從左至右渲染，所以在划分結構的時候有從左至右的順序。
三、一像素原則
這個原則對於初學者來說必須堅持，但也並不是說無論什么時候都得死認這個道理。前期我們在划分網頁的時候一定要划分准確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，里面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那么必然第二個盒子會換到下一行進行顯示。
在說完上述三個原則過后有些人就會一味地追求遵循這些原則，比如在划分結構的時候一定要分為上下部分，但是比如下面我截取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向划分，每一個圖文作為一部分內容，水平分為四部分：
我們說一般網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並非所有網頁都是這樣，有些網頁沒有banner但是初學者容易將header下面那一部分硬划分為banner，有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們划分到main中去。
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
說到main區，這個結構划分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的划分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，里面再嵌套一個inner盒，給可視區域的固定寬度並居中。如果沒有通欄的背景那么這個時候是不需要給通欄的盒子，直接main區給固定寬度居中就好了。
那么在結構划分的時候有些盒子區域之間的空隙怎么去划分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構划分的時候並不會造成影響，因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼着文字的上下來划分，因為文字都是自帶行高的。
另外，有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上，這部分在划分結構的時候可以不用管，因為后期在代碼實現的時候我們可以利用定位技術實現。