摘要：首先，巧妙的使用這一標記，將游覽器從所有情況中分離出來。元素不能用作語義用途以外的其他目的。空白段落元素并非用于跳行。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。

Html

1、Html5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區別HTML和HTML5?

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

拖拽釋放(Drag and drop) API

語義化更好的內容標簽（header,nav,footer,aside,article,section）

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

getCurrentPosition() 方法來獲得用戶的位置

1.檢測是否支持地理定位

2.如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。

3.如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象

4.showPosition() 函數獲得并顯示經度和緯度

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

sessionStorage的數據在瀏覽器關閉后自動刪除

表單控件，calendar、date、time、email、url、search

新的技術webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

HTML5新標簽兼容：

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

首先利用條件注釋判斷是不是IE9之前版本，如果是就執行js。先把所有新標簽寫入e數組中，然后遍歷整個數組，并創建副本。

該腳本已經托管在Google Project Hosting上，你可以直接外鏈這個腳本：

　另外，這段腳本需要放在頁面起始的部分，最好是head中，不要放在底部。這樣IE在解析頁面標簽之前就會先運行這段代碼。

如何區分： DOCTYPE聲明新增的結構元素功能元素

2.目前主流的瀏覽器內核有哪些，有哪些常見的兼容性問題

Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基于webkit，Google與Opera Software共同開發)

兼容性問題：

png24位的圖片在iE6瀏覽器上出現背景

解決方案：做成PNG8，也可以引用一段腳本處理.

瀏覽器默認的margin和padding不同

解決方案：加一個全局的 *{margin:0;padding:0;} 來統一。

IE6 雙邊距 bug：在 IE6 下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。

#box{ float:left; width:10px; margin:0 0 0 10px;}

這種情況之下 IE6 會產生20px的距離

解決方案：在float的標簽樣式控制中加入 display:inline; 將其轉化為行內屬性。( 這個符號只有 IE6 會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。

接著，再次使用 "+" 將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

.bb{

background-color:#f1ee18; /所有識別/

.background-color:#00deff9; /IE6、7、8識別/

+background-color:#a200ff; /IE6、7識別/

_background-color:#1e0bd1; /IE6識別/

}

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圖片格式支持不好

解決方案：引用一段腳本處理

3.怎么存儲和讀取localstorage

存值setItem localStorage.setItem("a","1"); //存儲的值為"1"

取值getItem var a3 = localStorage.getItem("a");//獲取a的值

http://www.cnblogs.com/yunkou...

4.描述一段語義的html代碼

（HTML5中新增加的很多標簽（如：

、

、

和

等）就是基于語義化設計原則）

< div id="header">

    < h1>標題< /h1>

            < h2>專注Web前端技術< /h2>

                    < /div>

                        語義 HTML 具有以下特性：

                        文字包裹在元素中，用以反映內容。例如：

                        段落包含在

                        元素中。

                        順序表包含在

                        元素中。

                        從其他來源引用的大型文字塊包含在

                        元素中。

                        HTML 元素不能用作語義用途以外的其他目的。例如：

                        包含標題，但并非用于放大文本。

                        包含大段引述，但并非用于文本縮進。

                        空白段落元素 (

                        ) 并非用于跳行。

                        文本并不直接包含任何樣式信息。例如：

                        不使用 或

                        等格式標記。

                        類或 ID 中不引用顏色或位置。

                        5.99%的網站都需要被重構是那本書上寫的？

                        網站重構：應用web標準進行設計（第2版）

                        6.什么叫優雅降級和漸進增強？

                        優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）

                        漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。）

                        區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的、能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。

                        7.頁面重構怎么操作？

                        編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。

                        頁面重構就是根據原有頁面內容和結構的基礎上，通過div+css寫出符合web標準的頁面結構。

                        具體實現要達到以下三點：

                        結構完整，可通過標準驗證

                        標簽語義化，結構合理

                        充分考慮到頁面在站點中的“作用和重要性”，并對其進行有針對性的優化

                        8.語義化的理解？

                        直觀的認識標簽，對于搜索引擎的抓取有好處

                        html語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；

                        在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。

                        搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 SEO。

                        使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

                        9.HTML5的離線儲存？

                        localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

                        sessionStorage 數據在瀏覽器關閉后自動刪除。

                        10.Document.write和innerHTML的區別

                        document.write是重寫整個document, 寫入內容是字符串的html

                        innerHTML是HTMLElement的屬性，是一個元素的內部html內容

                        document.write只能重繪整個頁面

                        innerHTML可以重繪頁面的一部分

                        1、write是DOM方法,向文檔寫入HTML表達式或JavaScript代碼，可列出多個參數，參數被順序添加到文檔中

                        ；innerHTML是DOM屬性,設置或返回調用元素開始結束標簽之間的HTML元素。

                        2、兩者都可向頁面輸出內容,innerHTML比document.write更靈活。

                        當文檔加載時調用document.write直接向頁面輸出內容，文檔加載結束后調用document.write輸出內容會重寫整個頁面。通常按照兩種的方式使用 write()

                        方法：一是在使用該方在文檔中輸出 HTML，二是在調用該方法的的窗口之外的窗口、框架中產生新文檔（務必使用close關閉文檔）。

                        在讀模式下，innerHTML屬性返回與調用元素的所有子節點對應的HTML標記，在寫模式下，innerHTML會根據指定的值創建新的DOM樹替換調用元素原先的所有子節點。

                        3、兩者都可動態包含外部資源如JavaScript文件

                        通過document.write插入