開發(fā)頁面在很多人眼里很簡單，大部分的人都會說不就是把效果圖變成網(wǎng)頁嘛，哪里需要那么多的時(shí)間，一點(diǎn)技術(shù)含量都沒有。確實(shí)html頁面沒有js那么多復(fù)雜的交互，也不需要和后臺數(shù)據(jù)打交道，但并不能代表就沒有技術(shù)含量，也不是人人都能做好的。頁面結(jié)構(gòu)好壞直接會影響到css代碼的質(zhì)量，也會影響js和后臺的開發(fā)，還會影響到以后功能的擴(kuò)展和代碼的優(yōu)化。

前端頁面的工作很瑣碎，需要的不僅是基礎(chǔ)知識的扎實(shí)，知識面的廣泛，很重要的一點(diǎn)還要細(xì)心。下面我們就講講頁面開發(fā)，開發(fā)中需要事項(xiàng)和常遇到的問題吧。

首先分析效果圖，細(xì)節(jié)上是否和站內(nèi)風(fēng)格統(tǒng)一；設(shè)計(jì)的元素是否便于實(shí)現(xiàn)；元素是否能復(fù)用。有問題及時(shí)和產(chǎn)品人員進(jìn)行溝通，避免開發(fā)過程中的頻繁修改，影響工期和代碼的質(zhì)量。這些都是為更好的布局和精簡css代碼做的必要工作。

合理布局很重要，如同大廈的地基，大廈的高度再于地基是否牢固，合理的布局能有更好的擴(kuò)展性。結(jié)構(gòu)要盡量簡潔，盡量減少結(jié)構(gòu)中的嵌套，不要為了實(shí)現(xiàn)某種樣式添加多余的空標(biāo)簽。

標(biāo)簽盡量語義化，能夠讓代碼更加清晰。現(xiàn)在html5添加了更多的語義化標(biāo)簽，像header，section等，大膽的使用吧。雖然html5對于標(biāo)簽的相互嵌套體現(xiàn)了很好的包容性，即使標(biāo)簽沒有閉合，或是inline元素中包含一堆block元素也不會有問題，但是為了養(yǎng)成良好的習(xí)慣還是盡量做到嚴(yán)格遵循xhtml的規(guī)范。

盡量少在頁面寫inline css,會使頁面代碼臃腫，不便于維護(hù)，有悖于樣式和結(jié)構(gòu)相分離的初衷。

頁面中推薦的兩種注釋：

<%!–jsp注釋,不會輸出,推薦使用–%>

另一個(gè)總和前端頁面開發(fā)打交道的就是圖片。圖片分為兩種，一種是cssimage引用，另一種純Image的頁面引用。

背景圖是通過樣式在頁面上輸出，會在頁面中產(chǎn)生請求，延長頁面的渲染時(shí)間，為了解決這個(gè)問題，可以把類似的圖片進(jìn)行合并，減少請求數(shù)。在進(jìn)行合圖的時(shí)候，盡量把顏色相近的圖標(biāo)放到一起，可以減少圖片的大小。

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

靜態(tài)圖片一定要小，建議存成png8格式，在不影響圖片的顯示質(zhì)量下，可以選擇128色或是更低的顏色輸出圖片。當(dāng)然有的色彩比較豐富的圖片，存成jpg格式的更小，難道你會非選png的嗎？存儲完后圖片還能用一些壓縮工具進(jìn)行無損壓縮（如：PNGGauntlet）。

對于圖片來說小就是原則，為什么呢，給你算個(gè)帳，節(jié)約10K看不出什么，100個(gè)用戶是1000K，10000個(gè)是100000K,那一億個(gè)用戶呢？全是白花花的銀子啊！

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

css主要說一下注意事項(xiàng)。
1、class命名建議以功能而不是外觀命名，不建議使用大小，避免起容易沖突的名字，防止樣式被覆蓋。
2、CSS后代選擇器性能：.a{} > .b .a{}，查找匹配耗費(fèi)cpu,代碼復(fù)雜，優(yōu)先級高，修改不方便；
3、編碼時(shí)盡可能使用縮寫，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;
4、使用CSS display:none隱藏的元素不會被搜索網(wǎng)站檢索，會影響到網(wǎng)站的SEO，可以使用text-indent:-9999em;來達(dá)到同樣效果。
5、減少overflow清除浮動(dòng)的使用，避免使用無意義的空標(biāo)簽清除浮動(dòng)，通常站內(nèi)使用clearfix來清除浮動(dòng)。
6、border:none;替換border:0;的寫法；
7、使用css3的屬性來代替陰影或是圓角的圖片；

瀏覽器的兼容問題是頁面開發(fā)的永衡話題。結(jié)構(gòu)的合理和簡潔在很大程度上可以減少兼容性的bug,但是ie的特立獨(dú)行又不可避免有一些兼容性問題。
IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*；
同一類class下的CSS hack可寫為：
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序?yàn)?#xff1a;FF、IE7、IE6.
寫法二：
*+html 與 *html 是IE特有的標(biāo)簽, Firefox 暫不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*僅IE6*/
*+html .classname{background-color:#555;}/*僅IE7*/
常見的css bug這里就不說了，稍后會在wiki里總結(jié)一個(gè)列表供大家查閱和參考。

對于樣式和圖片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。這三種的區(qū)別是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾經(jīng)的域，通常現(xiàn)在使用a.xnimg.cn,除非非常重要的靜態(tài)文件才使用s.xnimg.cn。

在開發(fā)過程中，我們應(yīng)該對bug出現(xiàn)有預(yù)見性，特別是常見的bug（QA經(jīng)常提的bug比如連續(xù)字符串沒有換行，鼠標(biāo)在沒有變成手型…）要提前做出處理。要考慮各種極端數(shù)據(jù)和不同大小圖片在頁面中的顯示情況。對于代碼進(jìn)行合理的規(guī)劃，減少冗余，可以簡單寫下注釋，便于以后修改。

再來說一下快速查bug和解決bug的一些個(gè)人見解吧。
首先要分辨bug的類型，有的bug不一定是頁面的問題。是否是頁面套錯(cuò)了某個(gè)標(biāo)簽沒有閉合，是否需要js修改或是后臺技術(shù)處理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自帶調(diào)試工具都能進(jìn)行調(diào)試和修改；使用工具能很快定位bug的位置和類型，作出修改。
經(jīng)驗(yàn)的積累也是很重要的。有時(shí)候你使用了所有的方法解決但問題仍然存在，需要看看DOCTYPE是否在HTML頂部，是否完整，推薦；是否有多余的空格或是編碼格式是否正確，
比如ie解析的空格間距不太一樣，有時(shí)候會導(dǎo)致意想不到的bug。
還有一種方式是逐步刪代碼方式，看究竟是那個(gè)部分是有問題的。

解決bug常用的幾個(gè)方法：
有人說zoom:1;是解決ie6的兼容問題的萬精油。可以用，但是不易多用，這個(gè)屬性可能會存在一些潛在的問題，至于是什么問題，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解決ie下滾動(dòng)圖片側(cè)漏問題哦。

最后要說的是優(yōu)化，一定要時(shí)時(shí)刻刻想著優(yōu)化自己的代碼，給用戶帶來最好的體驗(yàn)。永遠(yuǎn)記住這句話【HTML結(jié)構(gòu)的簡化>css代碼結(jié)構(gòu)的簡化】

轉(zhuǎn)載于:https://www.cnblogs.com/youdoce/archive/2011/12/13/2286990.html

總結(jié)

以上是生活随笔為你收集整理的web页面入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。