淺談HTML CSS和JS的定義或引用

作者：紅淚 2011-03-29 13:45:55

現(xiàn)在的網(wǎng)頁設(shè)計(jì)，一般采用內(nèi)容與表現(xiàn)相分離，即網(wǎng)頁的組成包含：內(nèi)容（HTML）+ 樣式(CSS) + 腳本(JS) 。

瀏覽器解析原理

服務(wù)器接收到HTML->解析HTML結(jié)構(gòu)建DOM樹->解析CSS構(gòu)建渲染樹->為渲染樹生成布局->繪制渲染樹；在構(gòu)建DOM樹的同時(shí)，如果有JS，同時(shí)調(diào)用JS引擎解析。

CSS

HTML文件，在html文件的開頭處一般會(huì)包含文檔類型。常用過渡類型，支持html4.0的標(biāo)簽。其他文檔類型有嚴(yán)格類型（Strict）和框架（Frameset）。

一個(gè)HTML文件，包含head和body兩部分。外部文件(css和js)的引用、定義，以及網(wǎng)頁的title，都是在head里定義的。Body部分，則是網(wǎng)頁展示的內(nèi)容。

HTML文件的Head部分，包含文檔編碼、CSS和JS的定義或引用：

文檔編碼，html引用文件（如CSS）的編碼必須和本文檔編碼一致，否則可能出現(xiàn)亂碼。

CSS和JS的定義或引用

可以直接在head中定義CSS和JS代碼塊，也可以通過引用的方式引用外部的CSS和JS文件，引用多個(gè)文件用“，”分隔。引用外部文件是現(xiàn)在通用的方式，可以保證整個(gè)網(wǎng)站風(fēng)格的一致性和重用，利于樣式和腳本的維護(hù)；可以減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度。

CSS的引用

JS的引用

HTML標(biāo)簽

標(biāo)簽有成對(duì)的標(biāo)簽和單個(gè)標(biāo)簽。

HTML元素是通過使用 HTML 標(biāo)簽進(jìn)行定義的，所有的標(biāo)簽定義在內(nèi)，HTMl標(biāo)簽在頁面中必須是結(jié)束的，如果標(biāo)簽沒有閉合，造成的后果就是頁面樣式錯(cuò)亂。

HTML對(duì)標(biāo)簽的大小寫不敏感，但是XHTML規(guī)范中，標(biāo)簽要求必須小寫。

HTML文檔的body，是用戶在瀏覽器中可見的部分。

一般的網(wǎng)站整體可以分為上中下結(jié)構(gòu)，即：頭部、中間主體、底部。那么我們?cè)赽ody中可以用三個(gè)div塊來劃分，分別給它們起名為：頭部（header）、主體（maincontent）、詢問（footer）。

對(duì)比表格布局，用div＋css布局構(gòu)建的網(wǎng)頁以夠簡化代碼，加快顯示速度。

CSS介紹

Html頁面CSS樣式的定義方式有：

外部樣式，CSS單獨(dú)寫到一個(gè)CSS文件內(nèi)，然后在源代碼中以link方式鏈接。

內(nèi)部樣式，它是以和結(jié)尾，寫在源代碼的head標(biāo)簽內(nèi)。

行內(nèi)樣式，在標(biāo)簽內(nèi)以style標(biāo)記的為行內(nèi)樣式，行內(nèi)樣式只針對(duì)標(biāo)簽內(nèi)的元素有效。

導(dǎo)入樣式，以@import url標(biāo)記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內(nèi)部。

一個(gè)元素有多重樣式，即外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時(shí)應(yīng)用于同一個(gè)元素的情況，優(yōu)先級(jí)如下：外部樣式<內(nèi)部樣式<內(nèi)聯(lián)樣式。

CSS語法，由三部分構(gòu)成，選擇器、屬性、屬性值。

Selector { property: value }

選擇器，可以是ID、CLASS或標(biāo)簽；屬性和屬性值是用來定義這個(gè)物件的某一個(gè)特性

選擇器包含id、class、標(biāo)簽。id只能在頁面中對(duì)應(yīng)一個(gè)元素，就像我們的身份證號(hào)一樣，每個(gè)人的都不一樣；class為類，可以對(duì)應(yīng)多個(gè)元素。

選擇器有優(yōu)先級(jí)

1.內(nèi)聯(lián)樣式表的權(quán)值最高 1000；

2.ID 選擇器的權(quán)值為 100；

3.Class 類選擇器的權(quán)值為 10；

4.HTML 標(biāo)簽選擇器的權(quán)值為 1；

id優(yōu)先級(jí)高于class，class優(yōu)先級(jí)高于標(biāo)簽，后面的樣式覆蓋前面的，指定的高于繼承，行內(nèi)樣式高于內(nèi)部或外部樣式。

CSS盒模型

CSS盒子模式都具備的屬性：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)。

CSS Bug 通常表現(xiàn)為布局異常、屬性異常、文本溢出。布局異常，主要是指樣式的錯(cuò)位，元素顯示的位置不正確；屬性異常，主要是指樣式屬性不匹配，屬性錯(cuò)誤或丟失，可通過firebug查看屬性驗(yàn)證；文本溢出，是指文字或圖片，在超出預(yù)定的像素范圍顯示，可通過更多的文本內(nèi)容或者大像素圖片來校驗(yàn)。

前端bug的定位

兼容性bug，在不同的瀏覽器下，表現(xiàn)為不同的現(xiàn)象，對(duì)于此類型的bug，測(cè)試人員可以先排除是否只有ie6下才有樣式錯(cuò)位現(xiàn)象，如果不是ie6下才有的，則瀏覽器的說明，盡量避免ie6，減少對(duì)ued同學(xué)的引導(dǎo)。

如果一個(gè)bug在兩個(gè)不同的瀏覽器下都表現(xiàn)為同一個(gè)現(xiàn)象，則該bug就是非兼容性引發(fā)的bug，在提交bug的時(shí)候，最好注明是所有瀏覽器，利于ued定位。

源碼查看判斷，如寶貝詳情頁面的sku信息顯示丟失，通過firebug查看html，可以看到sku對(duì)應(yīng)的控件里沒有數(shù)據(jù)源，查看源代碼，找到sku對(duì)應(yīng)的地方，也沒有sku的信息，則表明是服務(wù)器端沒有向前端輸出數(shù)據(jù)，這個(gè)bug是屬于開發(fā)的bug。

HTML標(biāo)簽不閉合導(dǎo)致的頁面樣式錯(cuò)亂，可通過firebug查看html的標(biāo)簽閉合情況。

頁面元素樣式丟失，可通過firebug查看html的元素屬性信息。

原文鏈接：http://qa.taobao.com/?p=11972

【編輯推薦】