開發頁面在很多人眼裡很簡單，大部分的人都會說不就是把效果圖變成網頁嘛，**需要那麼多的時間，一點技術含量都沒有。確實html頁面沒有js那麼多複雜的互動，也不需要和後台資料打交道，但並不能代表就沒有技術含量，也不是人人都能做好的。頁面結構好壞直接會影響到css**的質量，也會影響js和後台的開發，還會影響到以後功能的擴充套件和**的優化。
前端頁面的工作很瑣碎，需要的不僅是基礎知識的紮實，知識面的廣泛，很重要的一點還要細心。下面我們就講講頁面開發，開發中需要事項和常遇到的問題吧。
首先分析效果圖，細節上是否和站內風格統一；設計的元素是否便於實現；元素是否能復用。有問題及時和產品人員進行溝通，避免開發過程中的頻繁修改，影響工期和**的質量。這些都是為更好的布局和精簡css**做的必要工作。
合理布局很重要，如同大廈的地基，大廈的高度再於地基是否牢固，合理的布局能有更好的擴充套件性。結構要盡量簡潔，儘量減少結構中的巢狀，不要為了實現某種樣式新增多餘的空標籤。
標籤盡量語義化，能夠讓**更加清晰。現在html5新增了更多的語義化標籤，像header，section等，大膽的使用吧。雖然html5對於標籤的相互巢狀體現了很好的包容性，即使標籤沒有閉合，或是inline元素中包含一堆block元素也不會有問題，但是為了養成良好的習慣還是盡量做到嚴格遵循xhtml的規範。
盡量少在頁面寫inline css,會使頁面**臃腫，不便於維護，有悖於樣式和結構相分離的初衷。
另乙個總和前端頁面開發打交道的就是。分為兩種，一種是cssimage引用，另一種純image的頁面引用。
背景圖是通過樣式在頁面上輸出，會在頁面中產生請求，延長頁面的渲染時間，為了解決這個問題，可以把類似的進行合併，減少請求數。在進行合圖的時候，盡量把顏色相近的圖示放到一起，可以減少的大小。
頁面中直接引用的盡可能少的縮放，非常影響頁面的渲染速度；盡可能少的使用前端技術控制影象顯示大小，對使用者不可見的部分就是浪費頻寬，浪費錢，頁面的渲染速度也肯定會受到影響，影響使用者體驗；在知道寬高的情況下盡量在img中加上寬高，減少頁面reflow造成的速度損耗。
靜態一定要小，建議存成png8格式，在不影響的顯示質量下，可以選擇128色或是更低的顏色輸出。當然有的色彩比較豐富的，存成jpg格式的更小，難道你會非選png的嗎？儲存完後還能用一些壓縮工具進行無失真壓縮（如：pnggauntlet）。
對於來說小就是原則，為什麼呢，給你算個帳，節約10k看不出什麼，100個使用者是1000k，10000個是100000k,那一億個使用者呢？全是白花花的銀子啊！
有幾點需要注意：
1、我們在使用背景圖做圖示的時候通常會在頁面加乙個鉤子——img標籤，img標籤中的src中一定要寫上存在的鏈結，人人網通常使用的是一畫素的代替（如果你忽略了這個位址，頁面上會有乙個404的請求，在ie6下直接顯示乙個叉。
2、如果你的工程已經上線，我們站內對靜態檔案會有乙個快取機制。在開發過程中，經常會遇到修改的情況，如果你修改後的不更改檔名或是在樣式中更改引用該的版本號，對於使用者而言，他們仍然看不到修改後的。所以，一定要記得修改檔名。
3、避免過小的背景圖平鋪。
4、盡量將上的文字提取出來用**實現，便於的復用和日後文案的修改；
css主要說一下注意事項。
1、class命名建議以功能而不是外觀命名，不建議使用大小，避免起容易衝突的名字，防止樣式被覆蓋。
2、css後代選擇器效能：.a{} > .b .a{}，查詢匹配耗費cpu,**複雜，優先順序高，修改不方便；
3、編碼時盡可能使用縮寫，如padding：top right bottom left;border-width:1px 0;border-color:#cee1ee;color:#f05;
4、使用css display:none隱藏的元素不會被搜尋**檢索，會影響到**的seo，可以使用text-indent:-9999em;來達到同樣效果。
5、減少overflow清除浮動的使用，避免使用無意義的空標籤清除浮動，通常站內使用clearfix來清除浮動。
6、border:none;替換border:0;的寫法；
7、使用css3的屬性來代替陰影或是圓角的；
對於樣式和的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。這三種的區別是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾經的域，通常現在使用a.xnimg.cn,除非非常重要的靜態檔案才使用s.xnimg.cn。
在開發過程中，我們應該對bug出現有預見性，特別是常見的bug（qa經常提的bug比如連續字串沒有換行，滑鼠在沒有變成手型…）要提前做出處理。要考慮各種極端資料和不同大小在頁面中的顯示情況。對於**進行合理的規劃，減少冗餘，可以簡單寫下注釋，便於以後修改。
再來說一下快速查bug和解決bug的一些個人見解吧。
首先要分辨bug的型別，有的bug不一定是頁面的問題。是否是頁面套錯了某個標籤沒有閉合，是否需要js修改或是後台技術處理。
查bug，工具是必不可少的，firebug,ie的iedev*******,chrome自帶除錯工具都能進行除錯和修改；使用工具能很快定位bug的位置和型別，作出修改。
經驗的積累也是很重要的。有時候你使用了所有的方法解決但問題仍然存在，需要看看doctype是否在html頂部，是否完整，推薦；是否有多餘的空格或是編碼格式是否正確，
比如ie解析的空格間距不太一樣，有時候會導致意想不到的bug。
還有一種方式是逐步刪**方式，看究竟是那個部分是有問題的。
解決bug常用的幾個方法：
有人說zoom:1;是解決ie6的相容問題的萬精油。可以用，但是不易多用，這個屬性可能會存在一些潛在的問題，至於是什麼問題，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解決ie下滾動側漏問題哦。
最後要說的是優化，一定要時時刻刻想著優化自己的**，給使用者帶來最好的體驗。永遠記住這句話【html結構的簡化》css**結構的簡化】
web頁面總結
經過半個月的奮鬥，善良公社專案書畫院前台的web介面竣工了。雖然介面並不是很完美，說明學習的地方還有很多。在介面部分需要的技術 div css j ascript ajax html和一般處理程式等等。頁面布局對於使用者來說是最直觀的。使用者雖然不懂技術問題，但對於介面是否簡潔美觀，人性化，有沒有功...
web前端入門到實戰 實現html頁面自動重新整理
使用場景 頁面需要定時重新整理，實時載入資料，需要實時檢視監控資料 h5中的websocket和sse可以實現區域性重新整理 一定時間之後跳轉到指定頁面 登入註冊之類 前端開發使用偽資料除錯html頁面 修改一些js的變數值，可以自動重新整理效果 示例 頁面自動重新整理注 其中10指每隔10秒重新整...
Web 頁面效能優化
web 頁面效能優化 二 減少 http 的請求數 當使用者瀏覽頁面時，如果我們在使用者第一次訪問時將一些資訊一次性載入到客戶端快取，使用者訪問其他頁面時是可以大大提高頁面訪問速度的，因為每一次發生http請求是要產生伺服器開銷的，常用的方法有 合併css，js，並作為外部引用，這樣就可以減少訪問其...