摘要：首先，巧妙的使用這一標(biāo)記，將游覽器從所有情況中分離出來。接著，再次使用將和分離開來，這樣已經(jīng)獨立識別。元素不能用作語義用途以外的其他目的。

Html

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

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

拖拽釋放(Drag and drop) API

語義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section)

音頻、視頻API(audio,video)

畫布(Canvas) API

地理(Geolocation) API

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

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

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

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

4.showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

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

新的技術(shù)webworker, websocket, Geolocation

移除的元素

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes;

HTML5新標(biāo)簽兼容：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，

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

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

首先利用條件注釋判斷是不是IE9之前版本，如果是就執(zhí)行js。先把所有新標(biāo)簽寫入e數(shù)組中，然后遍歷整個數(shù)組，并創(chuàng)建副本。

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

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

如何區(qū)分： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素

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

Ie(Ie內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari：webkit內(nèi)核

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

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

兼容性問題：

png24位的圖片在iE6瀏覽器上出現(xiàn)背景

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

瀏覽器默認(rèn)的margin和padding不同

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

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

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

這種情況之下 IE6 會產(chǎn)生20px的距離

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

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

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

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

.bb{

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

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

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

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

}

IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性

解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性

IE下，event對象有 x、y 屬性，但是沒有 pageX、pageY屬性; Firefox下，event對象有 pageX、pageY 屬性，但是沒有 x、y 屬性

解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

Chrome 中文界面下默認(rèn)會將小于 12px 的文本強制按照 12px 顯示

解決方法：可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決

超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了

解決方法：改變CSS屬性的排列順序 L-V-H-A

a:link {}

a:visited {}

a:hover {}

a:active {}

怪異模式問題：漏寫 DTD 聲明，F(xiàn)irefox 仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在 IE 中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫 DTD 聲明的好習(xí)慣。現(xiàn)在可以使用html5 推薦的寫法：`

上下margin重合問題：ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。

解決方法：養(yǎng)成良好的代碼編寫習(xí)慣，同時采用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中新增加的很多標(biāo)簽(如：

、

、

和

等)就是基于語義化設(shè)計原則)

< div id="header">

< h1>標(biāo)題< /h1>

< h2>專注Web前端技術(shù)< /h2>

< /div>

語義 HTML 具有以下特性：

文字包裹在元素中，用以反映內(nèi)容。例如：

段落包含在

元素中。

順序表包含在

元素中。

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

元素中。

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

包含標(biāo)題，但并非用于放大文本。

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

空白段落元素 (

) 并非用于跳行。

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

不使用 或

等格式標(biāo)記。

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

5.99%的網(wǎng)站都需要被重構(gòu)是那本書上寫的?

網(wǎng)站重構(gòu)：應(yīng)用web標(biāo)準(zhǔn)進行設(shè)計(第2版)

6.什么叫優(yōu)雅降級和漸進增強?

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

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

區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的、能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。

7.頁面重構(gòu)怎么操作?

編寫 CSS、讓頁面結(jié)構(gòu)更合理化，提升用戶體驗，實現(xiàn)良好的頁面效果和提升性能。

頁面重構(gòu)就是根據(jù)原有頁面內(nèi)容和結(jié)構(gòu)的基礎(chǔ)上，通過div+css寫出符合web標(biāo)準(zhǔn)的頁面結(jié)構(gòu)。

具體實現(xiàn)要達(dá)到以下三點：

結(jié)構(gòu)完整，可通過標(biāo)準(zhǔn)驗證

標(biāo)簽語義化，結(jié)構(gòu)合理

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

8.語義化的理解?

直觀的認(rèn)識標(biāo)簽，對于搜索引擎的抓取有好處

html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析;

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

搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO。

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

9.HTML5的離線儲存?

localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

10.Document.write和innerHTML的區(qū)別

document.write是重寫整個document, 寫入內(nèi)容是字符串的html

innerHTML是HTMLElement的屬性，是一個元素的內(nèi)部html內(nèi)容

document.write只能重繪整個頁面

innerHTML可以重繪頁面的一部分

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

;innerHTML是DOM屬性,設(shè)置或返回調(diào)用元素開始結(jié)束標(biāo)簽之間的HTML元素。

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

當(dāng)文檔加載時調(diào)用document.write直接向頁面輸出內(nèi)容，文檔加載結(jié)束后調(diào)用document.write輸出內(nèi)容會重寫整個頁面。通常按照兩種的方式使用 write()

方法：一是在使用該方在文檔中輸出 HTML，二是在調(diào)用該方法的的窗口之外的窗口、框架中產(chǎn)生新文檔(務(wù)必使用close關(guān)閉文檔)。

在讀模式下，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點對應(yīng)的HTML標(biāo)記，在寫模式下，innerHTML會根據(jù)指定的值創(chuàng)建新的DOM樹替換調(diào)用元素原先的所有子節(jié)點。

3、兩者都可動態(tài)包含外部資源如JavaScript文件

通過document.write插入