簡化代碼，使頁面簡潔！
web前端開發——將界面更好呈現給用戶！
要了解在不同瀏覽器上的兼容情況、渲染原理和存在的bug！
網站性能優化、SEO；
代碼的可維護性、性能；
網站重構的本質：建立一個前端靈活的MVC框架，代碼具有複用性；
web標準：結構、樣式和行爲的分離；理想狀態下，網頁源代碼由html文件、css文件和js文件組成！
高質量的代碼：精簡、重用、有序，符合web標準；
js要有常用效果和功能的積累；js類庫封裝了跨瀏覽器兼容的特性並擴展了功能；
最基本要求是CSS能兼容IE6、IE7、IE8、FF；
ActionScript與前臺和服務器交互；
一專多能是必須的！
增加代碼可讀性——註釋！
提高重用性：公共組件（設計時讓接口保持彈性，且高度模塊化）和私有組件（不考慮他人重用）；
按需加載！
模塊化：樣式層面；行爲層面；
1、TIPS
（1）XHTML包含豐富的有意義元素（它在文檔中添加了結構並創建一個底層框架可直接設置元素的樣式。）：
h1、h2等
ul、ol和dl
strong和em
blockquote和cite
abbr、acronym和code
fieldset、legend和label
caption、thead、tbody和tfoot
應該在沒有現有元素能實現區域分割的情況下使用div元素。
瀏覽器會根據標籤的語義給定一個默認的樣式。
HTML標籤的設計是有語義考慮的。
先確定HTML，確定語義的標籤，再來選用合適的CSS！
判斷網頁標籤語義是否良好：去掉樣式，看網頁結構是否組織良好有序，是否依然有很好的可讀性！
對標籤是否語義良好調試——FF插件web Developer，禁用網頁中的CSS，即ctrl+shift+s，“網頁信息”——“查看文件大綱”；
標籤語義要清晰。當頁面內標籤無法滿足設計需要時，纔會適當添加div和span等無語義標籤來輔助實現！
爲保證網頁去樣式後的可讀性：
a、儘可能少用div和span；
b、可用p時，就不要用div；
c、語義上需要強調的文本可包在strong和em標籤裏。
搜索引擎看到的只是代碼，只能通過標籤來判斷內容的語義！
標籤語義：
legend：圖標；
caption：標題；
pre：預定義格式；
ol：排序列表；
ul：不排序列表；
li：列表項目；
（2）id名和class名，名稱要有意義且與表現方式無關。
（3）css作用於特定的元素，需要能找到此元素——選擇器。包括元素選擇器、後代選擇器（兩個選擇器之間的空格表示）、id選擇器、class選擇器、屬性選擇器、子選擇器等。
可將任何規則指定爲!important來提高它的重要性。
若兩個規則的特殊性相同，則後定義的規則優先！
css註釋：/**/
框模型：指定元素如何顯示；頁面上每個元素都被看成一個矩形框。
只有塊框的垂直margin纔會發生margin疊加。行內框、浮動框和絕對定位框之間的margin不會疊加。
當兩個垂直margin相遇，會形成一個空白邊。這個空白邊的高度等於兩個發生疊加的空白邊的高度中的較大者。
當一個元素包含在另一個元素中時，它們的頂或底空白邊會發生疊加。
p、h1、div等元素稱爲塊級元素，顯示爲一塊內容；
strong、span等元素稱爲行內元素，內容顯示在行中；
塊框從上到下一個個排列；行內框在一行中水平佈置；
相對定位：通過設置位置，讓這個元素相對於它的起點進行移動。
使用相對定位，無論是否進行移動，元素仍佔據原來的空間。移動元素會導致它覆蓋其它框。
絕對定位：不佔據空間。
絕對定位的元素的位置相對於最近的已定位的祖先元素。若元素沒有已定位的祖先元素，則它的位置相對於最初的包含塊！
浮動元素不佔據空間，因此容器中其它元素會包圍此浮動元素，可添加一個清理的空元素來使容器元素不包圍此浮動元素！對框使用clear，值爲left、right、both、none，表示框的哪些邊不應該挨着浮動框。
浮動的框可以左右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊緣。
應用CSS的能力：
a、CSS的API：如何用CSS控制頁面內元素的樣式；
b、CSS框架：如何對CSS進行組織；
一種組織CSS的方法：base.css+common.css+page.css；任何一個網頁的最終表現都由這三者共同完成，這三者是層疊結構。
base層：位於最底層。這一層會被所有頁面引用，提供CSS reset功能和粒度最小的通用類——原子類。與具體UI無關，這一層內容很少，力求精簡和通用。適用於任何網站！
common層：提供組件級的CSS類，即樣式的模塊化。大量重複的模塊視爲一個組件。將頁面內的元素分爲樣式相對獨立的小模塊。從頁面裏儘可能多地將組件提取出來，放在common層裏。組件在網站內部可高度重用！common層是網站級的，不同網站有不同的common層。
page層：網站中高度重用的組件（模塊）放在common層，非高度重用的模塊放在page層。提供頁面級的樣式，位於最高層。每個頁面都可能會有自己的page層css，若網絡規模不大，可將網站內所有頁面page層的代碼放在一個文件裏。根據頁面註釋，分塊書寫便於維護。通過命名規則來避免衝突！
CSS reset：HTML標籤在瀏覽器裏有默認的樣式，不同的瀏覽器的默認樣式之間有差別。解決方法是一開始就將瀏覽器的默認樣式全部去掉，即通過重新定義標籤的樣式，覆蓋掉瀏覽器提供的默認樣式。CSS reset部分來自於YUI。
通用原子類：是一系列常用的基本類，不可再分。
CSS的很多樣式具有繼承性，但繼承性的權重非常低，比標籤選擇符的權重低；
CSS命名：
a、可根據內容來選用合適的英文單詞，如頭部用head，導航用nav，菜單用menu等；
b、不輕易使用子選擇符；
c、 命名CSS時，首先要判斷它位於什麼層，若在page層，需考慮如何避免衝突——加前綴。
相鄰的margin-left和margin-right是不會重合的！
低權重原則——避免濫用子選擇器；
CSS設置的樣式是可以層疊的。
當不同的選擇符的樣式設置有衝突時，會採用權重高的選擇符設置的樣式！——CSS的選擇符是有權重的。
權重的規則：HTML標籤的權重是1，class的權重是10，id的權重是100.
若CSS選擇符權重相同，則哪個選擇符最後定義，就採用哪個選擇符的樣式！
使用子選擇器，會增加CSS選擇符的權重。CSS選擇符的權重越高，樣式越不容易被覆蓋，越容易對其他選擇符產生影響；
爲保證樣式易被覆蓋，提高可維護性，CSS選擇符需保證權重儘可能低。少用子選擇器，就需要多添加class。
過多的空白，會增大CSS文件的大小。
（4）CSS Sprite
圖片翻轉技術將多張圖片合併爲一張，利用background-position屬性來展示我們需要的部分。
css sprite將網站的背景圖合併到一張大圖片上。
css sprite：
a、只能合併用於背景的圖片；
b、對於橫向和縱向都平鋪的圖片，不能使用css sprite。若是橫向平鋪的，只能將所有橫向平鋪的圖片合併成一張大圖，只能豎直排列。
使用css sprite最大的好處是減少http請求數，減輕服務器壓力，但要付出降低開發效率和增大維護難度的代價。
（5）CSS Hack
a、IE條件註釋法：
<!--[if IE]>
<link type="text/css" href="XX.css" ref="stylesheet"/>
<![endif]-->
只加載到IE瀏覽器，對於非IE會忽略這條語句。
b、選擇符前綴法（瞭解即可）：
原理是在CSS選擇符前加一些只有特定瀏覽器才能識別的前綴，從而讓某些樣式只對特定瀏覽器生效。
如："*html"前綴只對IE6生效。"*+html"前綴只對IE7生效。
c、樣式屬性前綴法
原理是在樣式的屬性名前加前綴，這些前綴只在特定瀏覽器下才生效。
如："_"只在IE6下生效。"*"在IE6和IE7下生效。
a標籤的四種狀態的正確排序：（僞類：a:visited樣式等）
love hate原則：即l(link)ov(visited)eh(hover)a(active)te
（6）
（7）瀏覽器廠商發明了標準模式和怪異模式來解析網頁。
怪異模式是爲了兼容老瀏覽器下的代碼，它的很多解析方式是不符合標準的。怪異模式的觸發與DTD有關。
W3C標準，需要在HTML的最開始聲明文件的DTD類型。
（8）常見的塊級元素有：div、p、form、ul、ol、li等；
常見的行級元素有：span、strong、em等；
默認情況下，塊級元素的寬度會自動填滿其父元素的寬度。
行級元素其寬度會隨元素的內容而變化。
行級元素設置width、height屬性無效。
行級元素的margin和padding屬性很奇怪，水平方向的margin-left、margin-right、padding-left、padding-right都產生邊距效果，但豎直方向的margin-top、margin-bottom、padding-top、padding-bottom不會產生邊距效果。
塊級元素對應於display:block；行內元素對應於display:inline。可通過修改display屬性來切換塊級元素和行內元素。
爲了兼容IE，能用的display類型只有block、inline、none。IE6和IE7不支持display:inline-block，但它可觸發hasLayout。但IE8和FF支持的。
display:inline-block特性：行內的塊級元素，即可設置長寬，不單獨佔一行，它的寬度不會佔滿父元素。（IE6、7下，只能對行內元素實現display:inline-block，若是塊級元素則不行）
position:relative和position:absolute都可改變元素在文檔流中的位置，設置它們可讓元素激活left、right、top、bottom和z-index屬性（默認情況下，這些屬性未激活，設置了也無效）。
position:absolute：完全脫離文檔流。偏離的是相對於自己最近的一個設置了position:relative或position:absolute的祖先元素。若祖先元素沒有設置，那就相對於body元素。
position:relative：沒有脫離文檔流，偏離的是相對於原來在文檔流中的位置。
float也能改變文檔流。不同的是，float不能像relative或absolute那樣，通過left、right、bottom、top屬性精確控制元素的座標，但它仍然讓元素在z-index:0層排列。只能通過float:left或right來控制元素在同層裏“左浮”和“右浮”，float會改變正常的文檔流排列，影響到周圍元素。
absolute和float會隱式改變display類型（none除外），只要設置了都會讓元素以display:inline-block方式顯示，可設置長寬，默認寬度不佔滿父元素。即使顯式設置display:inline或block都無效。relative不會隱式改變display類型。
只需關心自己內部的樣式，將佈局的控制交給父元素！
z軸在元素設置position爲absolute或relative後被激活，其大小由z-index設置，z-index越大，元素位置越靠上；
html標籤，後出現的標籤浮於先出現的標籤之上。
瀏覽器解析頁面時，會先判斷元素的類型。若是窗口類型，會優先於非窗口類型的元素，顯示在頁面最頂端。若同屬非窗口類型，纔會去判斷z-index的大小。
select元素在IE6下以窗口形式顯示的（IE6 bug）：解決方法是用iframe遮住select！
IE6對png的透明度支持不好：本該是透明的地方，在IE6下會顯示爲淺藍色。可用IE下私有的濾鏡功能來解決。
（8）避免Js衝突
對全局變量進行有效控制：用匿名函數將腳步包起來，讓變量的作用域控制在匿名函數內；如：
(function() {
var a="aa";
})();
網頁中js從功能上分爲：
框架部分（包括定義全局變量、定義命名空間方法等）：框架部分的代碼每個頁面都相同。
應用部分：
window的onload事件要求網頁內所有的元素全部加載完畢後纔會觸發。
IE下透明是通過濾鏡實現，FF下透明是通過css的opacity屬性實現。
在IE下，event對象是作爲window的屬性作用於全局作用域的；而在FF下，event對象是作爲事件的參數而存在的。
事件的對象在IE下通過srcElement屬性訪問；在FF下，通過event對象的target屬性訪問。
阻止事件冒泡在IE下通過設置event對象的cancelBubble屬性爲true實現；在FF下，通過調用event對象的stopPropagation方法實現。
要讓某個DOM節點監聽事件，最簡單的方法是使用onXXX方法（但不能疊加，只能覆蓋）——>IE下用attachEvent（this指向window），FF下用addEventListener（this指向當前對象）方法代替onXXX監聽事件，支持監聽處理函數的疊加，而不是覆蓋！
domnode.onXXX將直接調用的函數裏的this指向domnode；
在IE中，delete是保留字；
class是js的保留字。在獲取html標籤的class屬性時，要改用className。
對於常規屬性，可使用node.XXX方式讀取；對於自定義屬性，可使用node.getAttribute("XXX")讀取。屬性值都是字符串類型的。
Ajax只支持字符串和xml這兩種格式的返回數據。
（9）js面向對象編程
在js中，用函數來充當類。函數作爲類時，通常用new來實例化。
當聲明一個類時，其實同時生成了一個對應的原型。若構造函數和原型定義了同名的屬性或方法，構造函數中的屬性或方法覆蓋原型中的同名的屬性或方法。
注：this無論出現在構造函數中，還是出現在原型中，指向的都是實例對象！
在內存中，一個類的原型只有一個！寫在原型中的方法一定是公有的，且無法訪問私有屬性。
作爲函數的function，this指向的是window對象；作爲類構造函數的function，this指向的是實例對象。
在js中，公有還是私有是通過作用域實現的！私有屬性的作用域只在類的構造函數中！如：
function Animal(name) {
this.name = name; //公有屬性
var age = 20; //私有屬性
var move = function() { //私有方法
}
}
2、PS
（1）記錄問題及使用的解決方案。
（2）服務器端壓縮：
若使用Apache，應安裝mod_gzip或mod_deflate，這些模塊會檢測瀏覽器是否能處理這種文件，若可以，就發送壓縮版本。
（3）IE6中，width屬性是內容、padding、border的寬度總和。
解決方法：不給元素添加具有指定寬度的padding，而將padding或margin添加到元素的父元素或子元素。
（4）可使用display屬性改變生成的框的類型。不佔用文檔中的空間。
（5）前期構思很重要！
根據用戶需求分析，考慮好框架，包括規範的制定、公共組件的設計和複雜功能的技術方案等。
（6）表單域用fieldset標籤包起來，用legend標籤說明表單的用途。每個input標籤對應的說明文本用label標籤，通過爲input設置id屬性，在label標籤中設置“for=id”來讓說明文本與相應的input關聯起來！
（7）表格標題要用caption，表頭要用thead包圍，主體部分用tbody包圍，尾部要用tfoot包圍，表頭和一般單元格要區分開，表頭用th，一般單元格用td。
（8）IE6下，若對元素設置了浮動，同時又設置了margin-left或margin-right，margin的值會加倍。解決此bug方法：display:inline。
（9）讓浮動元素的父容器能根據浮動元素的高度而自適應高度，可以：
a、直接從父容器清除浮動元素的浮動；
b、讓浮動元素後面緊跟一個用於清除浮動的空標籤。（破壞了語義）
（10）模塊化CSS——面向對象思維，模塊化可代碼高度重用。
如何劃分模塊：單一職責；
樣式和功能相對獨立（即與其它模塊沒有重複的地方）且穩定的部分可視爲模塊！每個模塊都要完整包含自己區域的內容。
將相似的部分提取出來，進一步拆分成更小的模塊！
模塊與模塊之間儘量不要包含相同的部分，若有相同部分，應將它們提取出來，拆分成一個獨立的模塊。
模塊應在保證數量儘可能少的原則下，做到儘可能簡單以提高重用性。
一個類只具有一個職責——面向對象思維！
組合的思路是將一個複雜的類分成易產生變化的部分和相對穩定的部分。將容易變化的部分拆分出去，每一種可能的變化設計成一個個單獨的類，相對穩定的部分設計成一個主體類——遵循“單一職責”原則，易變化的類的實例賦值給主體類作爲一個屬性，實現類的組合。
id屬性只能掛一個，class屬性可掛多個，用空格分隔；
（11）CSS在IE下的解析很奇怪，對於一些怪異的問題往往大部分都和IE下一個屬性相關——hasLayout。
hasLayout是IE專有的一個屬性，用於CSS的解析引擎，出現的一些bug原因可能與hasLayout沒有被自動觸發有關。
可手動觸發hasLayout屬性解決bug——使用“zoom:1”可觸發hasLayout。使用overflow:hidden也可以觸發hasLayout屬性。
極少數情況下，特別是使用DHTML時，使用"zoom:1"也會無效。此時需要使用“position:relative”來觸發hasLayout。
hasLayout是用於輔助塊級元素的盒模型解析的，它是用於塊級元素的。若用於行級元素，會引發一些特殊效果。
（12）文本、圖片等行內元素水平居中：給父元素設置text-align:center。
（13）確定寬度的塊級元素的水平居中：
設置margin-left:auto和margin-right:auto來實現。即margin:0 auto;
（14）不確定寬度的塊級元素的水平居中：
（15）table不是塊級元素，僅設置margin-left:auto和margin-right:auto就可以實現table水平居中。
（16）父元素高度不確定的文本、圖片，塊級元素的豎直居中：給父容器設置相同上下內邊距實現。
（17）父元素高度確定的單行文本的豎直居中：
通過給父元素設置line-height實現。line-height的值和父元素的高度值相同。
（18）父元素高度確定的多行文本、圖片，塊級元素的豎直居中：
css中用於豎直居中的屬性vertical-align，但只有當父元素爲td或th時，此屬性纔會生效。
td標籤默認情況下隱式設置了vertical-align的值爲middle。
（19）增加一個清除浮動，讓父容器知道高度。請注意，清除浮動的容器中有一個空格。 解決firefox中div高度不自增的問題。
（20）