結(jié)構(gòu)要盡量簡潔，盡量減少結(jié)構(gòu)中的嵌套，不要為了實(shí)現(xiàn)某種樣式添加多余的空標(biāo)簽。頁面結(jié)構(gòu)好壞直接會影響到css代碼的質(zhì)量，也會影響js和后臺的開發(fā)，還會影響到以后功能的擴(kuò)展和代碼的優(yōu)化。確實(shí)html頁面沒有js那么多復(fù)雜的交互，也不需要和后臺數(shù)據(jù)打交道，但并不能代表就沒有技術(shù)含量，也不是人人都能做好的。固然html5對于標(biāo)簽的相互嵌套體現(xiàn)了很好的包容性，即使標(biāo)簽沒有閉合，或是inline元素中包含一堆block元素也不會有題目，但是為了養(yǎng)成良好的習(xí)慣仍是盡量做到嚴(yán)格遵循xhtml的規(guī)范。

頁面中直接引用的圖片盡可能少的縮放，非常影響頁面的渲染速度；盡可能少的使用前端技術(shù)控制圖像顯示大小，對用戶不可見的部門就是鋪張帶寬，鋪張錢，頁面的渲染速度也肯定會受到影響，影響用戶體驗(yàn)；在知道圖片寬高的情況下盡量在img中加上寬高，減少頁面reflow造成的速度損耗。

靜態(tài)圖片一定要小，建議存成png8格局，在不影響圖片的顯示質(zhì)量下，可以選擇128色或是更低的顏色輸出圖片。在進(jìn)行合圖的時(shí)候，盡量把顏色相近的圖標(biāo)放到一起，可以減少圖片的大小。下面我們就講講頁面開發(fā)，開發(fā)中需要事項(xiàng)和常碰到的題目吧。現(xiàn)在html5添加了更多的語義化標(biāo)簽，像header，section等，大膽勇敢的使用吧。

標(biāo)簽盡量語義化，能夠讓代碼更加清楚。

首先分析效果圖，細(xì)節(jié)上是否和站內(nèi)風(fēng)格同一；設(shè)計(jì)的元素是否便于實(shí)現(xiàn)；元素是否能復(fù)用。當(dāng)然有的色彩比較豐碩的圖片，存成jpg格局的更小，豈非你會非選png的嗎？存儲完后圖片還能用一些壓縮工具進(jìn)行無損壓縮（如：PNGGauntlet）。這些都是為更好的布局和精簡css代碼做的必要工作。

背景圖是通過樣式在頁面上輸出，會在頁面中產(chǎn)生哀求，延長頁面的渲染時(shí)間，為了解決這個(gè)題目，可以把類似的圖片進(jìn)行合并，減少哀求數(shù)。

網(wǎng)頁設(shè)計(jì)公道布局很重要，猶如大廈的地基，大廈的高度再于地基是否牢固，公道的布局能有更好的擴(kuò)展性。

前端頁面的工作很瑣碎，需要的不僅是基礎(chǔ)知識的扎實(shí)，知識面的廣泛，很重要的一點(diǎn)還要細(xì)心。

發(fā)頁面在良多人眼里很簡樸，大部門的人都會說不就是把效果圖變成網(wǎng)頁嘛，哪里需要那么多的時(shí)間，一點(diǎn)技術(shù)含量都沒有。有題目及時(shí)和產(chǎn)品職員進(jìn)行溝通，避免開發(fā)過程中的頻繁修改，影響工期和代碼的質(zhì)量。

圖片有幾點(diǎn)需要注意：
1、我們在使用背景圖做圖標(biāo)的時(shí)候通常會在頁面加一個(gè)鉤子——img標(biāo)簽。
2、如果你的工程已經(jīng)上線，我們站內(nèi)對靜態(tài)文件會有一個(gè)緩存機(jī)制。在開發(fā)過程中，經(jīng)常會遇到修改圖片的情況，如果你修改后的圖片不更改文件名或是在樣式中更改引用該圖片的版本號，對于用戶而言，他們?nèi)匀豢床坏叫薷暮蟮膱D片。所以，一定要記得修改文件名。
3、避免過小的背景圖平鋪。
4、盡量將圖片上的文字提取出來用代碼實(shí)現(xiàn)，便于圖片的復(fù)用和日后文案的修改；