現在的網頁設計，一般採用內容與表現相分離，即網頁的組成包含：內容（html）+ 樣式(css) + 指令碼(js) 。
瀏覽器解析原理
伺服器接收到html->解析html結構建dom樹->解析css構建渲染樹->為渲染樹生成布局->繪製渲染樹；在構建dom樹的同時，如果有js，同時呼叫js引擎解析。
html檔案，在html檔案的開頭處一般會包含文件型別。常用過渡型別，支援html4.0的標籤。其他文件型別有嚴格型別（strict）和框架（frameset）。
乙個html檔案，包含head和body兩部分。外部檔案(css和js)的引用、定義，以及網頁的title，都是在head裡定義的。body部分，則是網頁展示的內容。
html檔案的head部分，包含文件編碼、css和js的定義或引用：
文件編碼，html引用檔案（如css）的編碼必須和本文件編碼一致，否則可能出現亂碼。
css和js的定義或引用
可以直接在head中定義css和js**塊，也可以通過引用的方式引用外部的css和js檔案，引用多個檔案用「，」分隔。引用外部檔案是現在通用的方式，可以保證整個**風格的一致性和重用，利於樣式和指令碼的維護；可以減少網頁的**量，增加網頁的瀏覽速度。
css的引用
js的引用
html標籤
標籤有成對的標籤和單個標籤。
html元素是通過使用 html 標籤進行定義的，所有的標籤定義在內，html標籤在頁面中必須是結束的，如果標籤沒有閉合，造成的後果就是頁面樣式錯亂。
html對標籤的大小寫不敏感，但是xhtml規範中，標籤要求必須小寫。
html文件的body，是使用者在瀏覽器中可見的部分。
一般的**整體可以分為上中下結構，即：頭部、中間主體、底部。那麼我們在body中可以用三個div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、詢問（footer）。
對比**布局，用div＋css布局構建的網頁以夠簡化**，加快顯示速度。
css介紹
html頁面css樣式的定義方式有：
外部樣式 ，css單獨寫到乙個css檔案內，然後在源**中以link方式鏈結。
內部樣式 ，它是以和結尾，寫在源**的head標籤內。
行內樣式 ，在標籤內以style標記的為行內樣式，行內樣式只針對標籤內的元素有效。
匯入樣式 ，以@import url標記所鏈結的外部樣式表，它一般常用在另乙個樣式表內部。
乙個元素有多重樣式，即外部樣式、內部樣式和內聯樣式同時應用於同乙個元素的情況，優先順序如下：外部樣式《內部樣式《內聯樣式。
css語法，由三部分構成，選擇器、屬性、屬性值。
selector
選擇器，可以是id、class或標籤；屬性和屬性值是用來定義這個物件的某乙個特性
選擇器包含id、class、標籤。id只能在頁面中對應乙個元素，就像我們的身份證號一樣，每個人的都不一樣；class為類，可以對應多個元素。
選擇器有優先順序
1.內聯樣式表的權值最高 1000；
2.id 選擇器的權值為 100；
3.class 類選擇器的權值為 10；
4.html 標籤選擇器的權值為 1；
id優先順序高於class，class優先順序高於標籤，後面的樣式覆蓋前面的，指定的高於繼承，行內樣式高於內部或外部樣式。
css盒模型
css盒子模式都具備的屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)。
css bug 通常表現為布局異常、屬性異常、文字溢位。布局異常，主要是指樣式的錯位，元素顯示的位置不正確；屬性異常，主要是指樣式屬性不匹配，屬性錯誤或丟失，可通過firebug檢視屬性驗證；文字溢位，是指文字或，在超出預定的畫素範圍顯示，可通過更多的文字內容或者大畫素來校驗。
前端bug的定位
相容性bug，在不同的瀏覽器下，表現為不同的現象，對於此型別的bug，測試人員可以先排除是否只有ie6下才有樣式錯位現象，如果不是ie6下才有的，則瀏覽器的說明，盡量避免ie6，減少對ued同學的引導。
如果乙個bug在兩個不同的瀏覽器下都表現為同乙個現象，則該bug就是非相容性引發的bug，在提交bug的時候，最好註明是所有瀏覽器，利於ued定位。
原始碼檢視判斷，如寶貝詳情頁面的sku資訊顯示丟失，通過firebug檢視html，可以看到sku對應的控制項裡沒有資料來源，檢視源**，找到sku對應的地方，也沒有sku的資訊，則表明是伺服器端沒有向前端輸出資料，這個bug是屬於開發的bug。
html標籤不閉合導致的頁面樣式錯亂，可通過firebug檢視html的標籤閉合情況。
頁面元素樣式丟失，可通過firebug檢視html的元素屬性資訊。
html css和js中的注釋
一 html的注釋方法內容 包含在 之間的內容將會被瀏覽器忽略，且不會顯示在使用者瀏覽的最終介面中。注釋的部分雖然瀏覽器在執行時會忽略，但在瀏覽器中檢視源 時仍然可以看到 二 css的注釋方法 在單獨的css樣式表檔案中也採用此方法注釋 三 js的注釋方法 在js中寫 的作用和原因如下 j ascr...
HTML CSS 和 JS框架之Bootstrap
bootstrap 是最受歡迎的 html css 和 js 框架，用於開發響應式布局 移動裝置優先的 web 專案。使用方法一 這裡有一些多餘的檔案需要刪除，方便我們今後更快的找到匯入的框架檔案，裡面三個資料夾分別留這些就行了 將bootstrap 3.3.7 dist資料夾複製到專案目錄下，就可...
js事件的分類和介紹
1 常用window事件 window.onload onscroll.function load事件 unload事件 頁面載入時生效 scroll事件 頁面滾動時生效 2 常用滑鼠事件 box.onclick onmouseover.function click事件 單擊 dbclick事件 雙...