1.說說你對語義化的理解？
1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
2，有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
3，方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
2.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
1， 宣告位於文件中的最前面，處於 標籤之前。告知瀏覽器以何種模式來渲染文件。
2，嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。
3，在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4，DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
3.你知道多少種Doctype文件型別？

1， 該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
2，HTML 4.01 規定了三種文件型別：Strict、Transitional 以及 Frameset。
3，XHTML 1.0 規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
4，Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
4.HTML與XHTML——二者有什麼區別
區別：
1，所有的標記都必須要有一個相應的結束標記
2，所有標籤的元素和屬性的名字都必須使用小寫
3，所有的XML標記都必須合理巢狀
4，所有的屬性必須用引號”“括起來
5，把所有<和&特殊符號用編碼表示
6，給所有屬性賦一個值
7，不要在註釋內容中使“–”
8，圖片必須有說明文字
5.常見相容性問題？
1，png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段指令碼處理。
2，瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
3，IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
4，浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）
這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——display:inline;將其轉化為行內屬性。(這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除區域性。
首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.
IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
怪異模式問題：漏寫DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD宣告的好習慣。現在可以使用html5推薦的寫法：
上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
ie6對png圖片格式支援不好(引用一段指令碼處理)
6.解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在所有浮動標籤後面新增一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。
2.使用overflow。
給包含浮動元素的父標籤新增css屬性 overflow:auto; zoom:1; zoom:1用於相容IE6。
3.使用after偽物件清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定 height:0，否則該元素會比實際高出若干畫素；
7.浮動元素引起的問題和解決辦法？
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增clearfix樣式：
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動的幾種方法：
1，額外標籤法，

（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）
2，使用after偽類
8.IE 8以下版本的瀏覽器中的盒模型有什麼不同？
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框；
9.DOM操作——怎樣新增、移除、移動、複製、建立和查詢節點？
（1）建立新節點
1，createDocumentFragment() //建立一個DOM片段
2，createElement() //建立一個具體的元素
3，createTextNode() //建立一個文字節點
（2）新增、移除、替換、插入
1，appendChild()
2，removeChild()
3，replaceChild()
4，insertBefore() //在已有的子節點前插入一個新的子節點
（3）查詢
1，getElementsByTagName() //通過標籤名稱
2，getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
3，getElementById() //通過元素Id，唯一性
10.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
1，HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
2，新增元素
①拖拽釋放(Drag and drop) API
②語義化更好的內容標籤（header,nav,footer,aside,article,section）
③音訊、視訊API(audio,video)
④畫布(Canvas) API
⑤地理(Geolocation) API
⑥本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
⑦sessionStorage 的資料在瀏覽器關閉後自動刪除；
⑧表單控制元件，calendar、date、time、email、url、search
⑨新的技術webworker, websocket, Geolocation
3，移除的元素
①純表現的元素：basefont，big，center，font, s，strike，tt，u；
②對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式：