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

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

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

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

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

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

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

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

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

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