對Web標準的理解：
web標準是由一系列標準組合而成的，頁面有三個部分組成：結構，表現和行為。因而web標準即由結構化標準語言主要有 xml和xhtml，表現標準語言css，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。

其中行為標準語言DOM是Document Object Model文檔對象模型的縮寫。DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。
ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言（JAVAScript）。

BOM:

bom的對象是window對象，所有全局對象，函數，變量都自動成為window的屬性，
有：screen對象，location對象，navigator對象，history對象，方法有：
window.alert("Qqq") prompt confirm 彈出框，window可以省略不寫；
屬性有：document 也是 window 對象的屬性之一：

Window 尺寸
有三種方法能夠確定瀏覽器窗口的尺寸。
對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內部高度(包括滾動條)
window.innerWidth - 瀏覽器窗口的內部寬度(包括滾動條)
對於 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

location對象

location.href-- 返回或設置當前文檔的URL
location.search -- 返回URL中的查詢字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)後面的內容?id=5&name=dreamdu
location.hash -- 返回URL#後面的內容，如果沒有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
ocation.pathname -- 返回URL的域名後的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的協議部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的內容http:
location.assign -- 設置當前文檔的URL
location.replace() -- 設置當前文檔的URL，並且在history對象的地址列表中移除這個URL location.replace(url);
location.reload() -- 重載當前頁面

history對象

history.go() -- 前進或後退指定的頁面數 history.go(num);
history.back() -- 後退一頁
history.forward() -- 前進一頁

navigator對象

navigator.userAgent -- 返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
navigator.cookieEnabled -- 返回瀏覽器是否支持(啟用)cookie

HTML DOM (文檔對象模型)
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

查找 HTML 元素：
通過 id 找到 HTML 元素
通過標簽名找到 HTML 元素
通過類名找到 HTML 元素

var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

改變 HTML 輸出流 document.write()
改變 HTML 內容 document.getElementById(id).innerHTML=新的 HTML
改變 HTML 屬性 document.getElementById(id).attribute=新屬性值
改變 HTML 樣式 document.getElementById(id).style.property=新樣式
HTML 事件屬性 <h1 onclick="changetext(this)">點擊文本!</h1>
使用 HTML DOM 來分配事件 document.getElementById("myBtn").onclick=function(){displayDate()};

創建新的 HTML 元素：
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);

刪除已有的 HTML 元素：
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

40、float的div閉合的問題：

例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裏的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;)
這段代碼在IE中毫無問題，問題出在其他瀏覽器中。原因是NOTfloatC並非float標簽，必須將float標簽 閉合。

解決：

在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要註意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會 產生異常。並且將clear這種樣式定義為為如下即可：.clear{ clear:both;}

41、選框、復選框與後面的文字對不齊 問題：

解決：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}

不足之處：設置padding後高度和寬帶都會增加

42、邊框重疊說明 說明：

為 table、td 都指定了邊框後，然後使用border-collapse:collapse讓邊框重疊，可以看出在發生重疊時，Firefox 是用 td 覆蓋 table 的，而 IE 是用 table 覆蓋 td 的。使用時候需要註意。

43、設置td padding的說明：

設置td的padding以後高度和寬帶都會增加,padding-left和padding-right的效果都一樣增加了td的寬帶，但是padding-top和padding-bottom的效果不一樣。最好不要使用td的ding-top和padding-bottom

44、使一個層垂直居中於瀏覽器中 說明：

使用百分比絕對定位,與外補丁負值的技巧,負值的大小為其自身寬度高度除以二

div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

45、行內屬性標簽，設置display:block後采用float布局，又有橫行的margin的情況，IE6間距bug，IE6裏的間距比超過設置的間距

解決：在display:block;後面加入display:inline;display:table;

備註：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

46、float的div閉合;清除浮動;自適應高度;

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >這裏的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;) 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之間加上 < #div class=”clear”>這個div一定要註意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。並且將clear這種樣式定義為為如下即可： .clear{ clear:both;}

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper裏面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性，用zoom:1;可以做到，這樣就達到了兼容。 例如某一個wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一個float left而寬度是100%的DIV解決之

④萬能float 閉合(非常重要!) 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設置：.hackbox{ display:table; //將對象作為塊元素級的表格顯示}

三、csshack的使用

CSS Hack大致有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，

1、CSS類內部Hack，使用了漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，最後用“_”將IE7、IE6區分。

復制代碼
.bb{
height:32px;
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
/*一個用於展示的class為bb的div標簽*/
< div class ="bb"></ div >
復制代碼

2、HTML頭部引用(if IE)Hack

只在IE下生效

<!--[if IE]>

這段文字只在IE瀏覽器顯示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

這段文字只在IE6瀏覽器顯示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

這段文字只在IE6以上(包括)版本IE瀏覽器顯示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

這段文字在非IE8瀏覽器顯示

<![endif]-->

非IE瀏覽器生效

<!--[if !IE]>

這段文字只在非IE瀏覽器顯示

<![endif]-->

3、選擇器Hack

選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

比如：

*html *前綴只對IE6生效*

+html *+前綴只對IE7生效

@media screen\9{...}只對IE6/7生效

@media \0screen {body { background: red; }}只對IE8有效
屬性

元素操作等等