1、什么是web標准？
WEB標准不是某一個標准，而是一系列標准的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為 （Behavior）。
對應的標准也分三方面：結構化標准語言主要包括XHTML和XML，表現標准語言主要包括CSS，行為標准主要包括對象模型（如 W3C DOM）、ECMAScript等。這些標准大部分由W3C起草和發布，也有一些是其他標准組織制訂的標准，比如ECMA（European Computer Manufacturers Association）的ECMAScript標准。
2、XHTML與HTML有什么區別？你覺得應該使用哪一個，並說出理由。
XHTML1.0和HTML4.01之間的主要差異是它遵守XML編碼約定。
標簽不能重疊,可以嵌套
標簽與屬性都要小寫
標簽都要有始有終,要么以</p>形式結束,要么以<br />形式結束
每個屬性都要有屬性值,並且屬性值要在雙引號中
別用name用id
3、請解釋一下DOCTYPE的作用，有DOCTYPE和沒有DOCTYPE有什么區別？
DOCTYPE聲明是指HTML文檔開頭處的一行或兩行代碼，它描述使用哪個DTD（文檔類型定義）。DTD是一組機器可讀的規則，它們定義XML或 HTML的特定版本中允許有什么，不允許有什么。在解析網頁時，瀏覽器將使用這些規則檢查頁面的有效性並且采取相應的措施。瀏覽器通過分析頁面的 DOCTYPE聲明來了解要使用哪個DTD，由此知道要使用HTML的哪個版本。
DOCTYPE當前有兩種風格，嚴格（strict）和過渡（transitional）。
嚴格版本禁止使用廢棄的元素，從而把內容和表現分隔開。
過渡的目的是幫助開發人員從老版本遷移到新版本，仍然允許使用已經廢棄的元素。
4、嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
當瀏覽器廠商開始創建與標准兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標准模式和混雜模式。
在標准模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。
混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標准模式 呈現。對於HTML4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標准模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標准 模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
根據DOCTYPE是否存在選擇呈現模式，被稱為DOCTYPE切換或DOCTYPE偵測。
DOCTYPE切換是瀏覽器用來區分遺留文檔和符合標准的文檔的手段。無論是否編寫了有效的CSS，如果選擇了錯誤的DOCTYPE，那么頁面就將以混雜 模式呈現，其行為就可能會有錯誤或不可預測。因此一定要在每個頁面上包含形式完整的DOCTYPE聲明，並且在使用HTML時選擇嚴格的DTD。
5、各種CSS樣式的簡寫。如padding，border，font等。
使用縮寫可以減少CSS文件的大小，並且更加易於閱讀。以下主要介紹CSS的主要縮寫規則，內容涉及到顏色、盒尺寸、邊框、背景、字體、列表等方面的內容。
（1）顏色
16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;
（2）盒尺寸
通常有下面四種書寫方法:
property:value1; 表示所有邊都是一個值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left 方便的記憶方法是順時針，上右下左。
具體應用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
（3）邊框(border)
邊框的屬性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句：border:1px solid #000;
語法是 border:width style color;
（4）背景(Backgrounds)
背景的屬性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是 background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：
color: transparent image: none repeat: repeat attachment: scroll position: 0% 0%
（5）字體(fonts)
字體的屬性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。
（6）列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;,
list的屬性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為一句：list-style:square inside url(image.gif);
（7）內邊距（padding）
padding簡寫一般如下：
padding:1px2px3px4px;
等效於：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
順序：top|right|bottom|left
不論是邊框寬度，還是邊框顏色、邊距等，只要CSS樣式涉及四邊，順序通通都是“上右下左”（順時針方向）
padding簡寫的其它幾種方式：
(1)如果四邊的值省略一個，只寫三個：
padding:1px2px3px;
則等效於：
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;（省略的“左”值等於“右”）
(2)如果四邊的值省略兩個：
padding:1px2px;
則等效於：
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;（省略的“下”值等於“上”）
(3)如果只有一個值：
padding:1px;
則等效於：
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
6、img的alt與title有何異同？
使用title屬性提供非本質的額外信息。大部分的可視化瀏覽器在鼠標懸浮在特定元素上時顯示title文字為提示信息（tool tip）。
使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶。替換文字是用來替代圖像而不是提供額外說明文字的。
7、strong與em的異同？
em 是句意強調，加與不加會引起語義變化。
strong 是重要性強調，和局部還是全局無關，局部強調用strong也可以，strong強調的是重要性，不會改變句意。並且在瀏覽器中，em 默認用斜體表示，strong 用粗體表示。
8、清除浮動的方法，各有什么特點？
（1）使用額外標簽
使用額外標簽，這也是W3C推薦的方法。這種方法就是在內容的末尾增加一個空的標簽，典型的做法就是使用類似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
這種辦法通過增加一個HTML元素迫使外部容器撐開。不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。
（2）使用overflow屬性
把overflow值設置為hidden或者auto同樣可以清理浮動
這種方法不需要添加額外的標記。但是使用overflow的時候一定要小心，因為它會影響瀏覽器的表現。另外，在Internet Explorer 6中單純地設置overflow為hidden或者auto並不能有效清除浮動（閉合浮動元素），還要指定“#outer”的一個維度，即要么給它指定一個寬度，要么指定一個高度：
#outer {
overflow:auto;
width:100%;
}
注意：如果你要在IE5/Mac上使用這種方法清除浮動（閉合浮動元素）的話，你就必須設定overflow的屬性為值為hidden。
（3）使用after偽對象/偽類
使用after偽類和內容聲明在指定的現在內容末尾添加新的內容。經常的做法就是添加一個“點”，因為它比較小不太引人注意。然后我們再利用它來清除浮動（閉合浮動元素），並隱藏這個內容：
1 #outer:after{ 2 content:"."; 3 height:0; 4 visibility:hidden; 5 display:block; 6 clear:both; 7 }
但奇怪的是Windows中的Internet Explorer 6及以下版本並不支持CSS 2.1中的after偽類而Mac中的Internet Explorer卻可以正常使用，所以我們還要單獨針對Win/IE進行處理。在區分Win和Mac中Internet Explorer的諸多方法中，最常用就是Holly招數。Holly招數的原理是這樣的，CSS代碼
- /* 這段代碼只有IE/Win可以看見 \*/
- CSS 規則
- /* 結束Hack */
上面的代碼中有兩行注釋，其中第一行結束時出現了反斜杠（\），在Mac的Internet Explorer中會認為注釋並沒有結束，於是繼續向下直到第一個完事的“*/”出現，這中間的所有字符都被當作是注釋，而IE/Win卻也只會把第一行 和第三行看作是注釋，中間的為有效代碼。所以這樣就區分出來了不同平台上的IE了。
正是基於以上原理，在windows的IE 6上的清理浮動，可以使用如下代碼：
1 #outer { 2 display:inline-block; 3 } 4 /* Holly Hack Begine \*/ 5 * html #outer { 6 height:1%; 7 } 8 #outer { 9 display:block; 10 } 11 /* End Hack */
（4）浮動外部元素，float-in-float
這種方法很簡單，就是把“#outer”元素也進行浮動（向左或者向右）。
但是這種方法帶來的別外一個問題就是和“#outer”相鄰的下一個元素會受到“#outer”的影響位置會產生變化，所以使用這種方法一定要小 心。有選擇把頁面中的所有元素都浮動起來，最后使用一個適當的有意義的元素（比如頁腳）進行清理浮動，這有助於減少不必要的標記，但是過多的浮動會增加布 局的難度。
這四種方式的比較與選擇：
四種方法中使用哪種最好呢？首先，不推薦使用after偽類，對比其它三種方法，holly招數有點太煩瑣，不好掌握，我上面講到的holly招數中並不僅僅是IE/Win上有問題，當出現:hover時還會有其它問題，所以我們又加上了inline-block等屬性，也就是說這種方法存在更多的不確定性。推薦對代碼有“潔癖”並且技術較高的人使用。
那么其它三種方法其實都可以考慮。
- 不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；
- 而對於使用額外標簽清除浮動（閉合浮動元素），是W3C推薦的做法。至於使用<br />元素還是空<div></div>可以根據自己的喜好來選（當然你也可以使用其它塊級元素）。不過要注意的 是，<br />本身是有表現的，它會多出一個換行出來，所以要設定它的heigh為0，以隱藏它的表現。所以大多數情況下使用空<div>比較合 適。
- float-in-float，也是一個很好的選擇，把你要進行清理浮動的元素外層再加上一層<div>並設置屬性fload:left即可，不過要注意相鄰元素的變化。
參考：http://www.cnblogs.com/yuzhongwusan/archive/2008/06/18/1224383.html