1.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉![emoticon]()
2.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態
給iframe添加src屬性值，這樣可以繞開以上兩個問題。
3.如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
4.如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
5.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型。
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
（3）區 別： IE的content部分把 border 和 padding計算了進去。
6.CSS優先級算法如何計算？
優先級就近原則，同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important比內聯優先級高(style)
7.爲什麼要使用CSS sprites
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，
“background-position”的組合進行背景定位，這樣可以減少很多圖片請求的開銷，
因爲請求耗時比較長；請求雖然可以併發，但是如果請求太多會給服務器增加很大的壓力。
8.display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔佈局中仍保留原來的空間。
9.position的absolute與fixed區別
absolute浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素
fixed浮動定位是相對於瀏覽器視窗的
10.IE 8以下版本的瀏覽器中的盒模型有什麼不同？
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
11. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)內核：Trident，Gecko，Presto，Webkit。
12. 說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 以下）
(Q1)行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，
margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接着一個斷行。
(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;
13.清除浮動有哪些方式？比較好的方式是哪一種？
(Q1)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義僞類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(Q2)比較好的是第3種方式，好多網站都這麼用。
14.box-sizing常用的屬性有哪些？分別有什麼作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
15.Doctype作用？標準模式與兼容模式各有什麼區別?
(Q1)<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。
在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。
16.HTML5 爲什麼只需要寫 <!DOCTYPE HTML>？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲
（讓瀏覽器按照它們應該的方式來運行）。而HTML4.01基於SGML,所以需要對DTD進行引用，
才能告知瀏覽器文檔所使用的文檔類型。
17.頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；
而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
18.介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），
以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，
所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
19.html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
（Q1） HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(Q2)IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
20.簡述一下你對HTML語義化的理解？
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
21.XHTML和HTML有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
22.什麼是語義化的HTML?
直觀的認識標籤 對於搜索引擎的抓取有好處，用正確的標籤做正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，
利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
23.常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，
FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]Webkit內核：Safari,Chrome等。
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式：
25.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
26.如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式
27.HTML5 爲什麼只需要寫 !DOCTYPE HTML？
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲
（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,所以需要對DTD進行引用，
才能告知瀏覽器文檔所使用的文檔類型。
28.Doctype作用？標準模式與兼容模式各有什麼區別?
!DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,
模擬老式瀏覽器的行爲以防止站點無法工作。
29.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規範（html/Xhtml）一般爲 嚴格 過度 基於框架的html文檔。
加入XMl聲明可觸發，解析方式更改爲IE5.5 擁有IE5.5的Bug。
30.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
31.如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式
32.CSS實現垂直水平居中
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
33.display有哪些值？說明他們的作用。
block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 缺省值。象行內元素類型一樣顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block 默認寬度爲內容寬度，可以設置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作爲塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值。
34.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div,p,h1,form,ul,li;
行內元素 : span>,a,label,input,img,strong,em;
CSS盒模型:內容，border ,margin，padding
35.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時加載
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
36.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高
37.CSS清除浮動的幾種方法（至少兩種）
使用帶clear屬性的空元素
使用CSS的overflow屬性；
使用CSS的:after僞元素；
使用鄰接元素處理；
38.CSS居中（包括水平居中和垂直居中）
內聯元素居中方案
水平居中設置：
1.行內元素
設置 text-align:center；
2.Flex佈局
設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)
垂直居中設置：
1.父元素高度確定的單行文本（內聯元素）
設置 height = line-height；
2.父元素高度確定的多行文本（內聯元素）
a:插入 table （插入方法和水平居中一樣），然後設置 vertical-align:middle；
b:先設置 display:table-cell 再設置 vertical-align:middle；
塊級元素居中方案
水平居中設置：
1.定寬塊狀元素
設置 左右 margin 值爲 auto；
2.不定寬塊狀元素
a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設置 margin 的值爲 auto；
b:給該元素設置 displa:inine 方法；
c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；
垂直居中設置：
使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
39.在書寫高效 CSS 時會有哪些問題需要考慮？
reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。
規範命名。尤其對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先級”。
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
2.iframe有那些缺點？
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態
給iframe添加src屬性值，這樣可以繞開以上兩個問題。
3.如何實現瀏覽器內多個標籤頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信。
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
4.如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
5.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型。
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
（3）區 別： IE的content部分把 border 和 padding計算了進去。
6.CSS優先級算法如何計算？
優先級就近原則，同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important比內聯優先級高(style)
7.爲什麼要使用CSS sprites
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，
“background-position”的組合進行背景定位，這樣可以減少很多圖片請求的開銷，
因爲請求耗時比較長；請求雖然可以併發，但是如果請求太多會給服務器增加很大的壓力。
8.display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden 隱藏對應的元素，但是在文檔佈局中仍保留原來的空間。
9.position的absolute與fixed區別
absolute浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素
fixed浮動定位是相對於瀏覽器視窗的
10.IE 8以下版本的瀏覽器中的盒模型有什麼不同？
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
11. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)內核：Trident，Gecko，Presto，Webkit。
12. 說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 以下）
(Q1)行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，
margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接着一個斷行。
(Q2)兼容性：display:inline-block;*display:inline;*zoom:1;
13.清除浮動有哪些方式？比較好的方式是哪一種？
(Q1)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義僞類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(Q2)比較好的是第3種方式，好多網站都這麼用。
14.box-sizing常用的屬性有哪些？分別有什麼作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
15.Doctype作用？標準模式與兼容模式各有什麼區別?
(Q1)<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。
在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。
16.HTML5 爲什麼只需要寫 <!DOCTYPE HTML>？
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲
（讓瀏覽器按照它們應該的方式來運行）。而HTML4.01基於SGML,所以需要對DTD進行引用，
才能告知瀏覽器文檔所使用的文檔類型。
17.頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；
而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
18.介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），
以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，
所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
19.html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
（Q1） HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(Q2)IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
20.簡述一下你對HTML語義化的理解？
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
21.XHTML和HTML有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
22.什麼是語義化的HTML?
直觀的認識標籤 對於搜索引擎的抓取有好處，用正確的標籤做正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，
利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
23.常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，
FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]Webkit內核：Safari,Chrome等。
[ Chrome的：Blink（WebKit的分支）]
24.HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式：
25.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
26.如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式
27.HTML5 爲什麼只需要寫 !DOCTYPE HTML？
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲
（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML,所以需要對DTD進行引用，
才能告知瀏覽器文檔所使用的文檔類型。
28.Doctype作用？標準模式與兼容模式各有什麼區別?
!DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,
模擬老式瀏覽器的行爲以防止站點無法工作。
29.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規範（html/Xhtml）一般爲 嚴格 過度 基於框架的html文檔。
加入XMl聲明可觸發，解析方式更改爲IE5.5 擁有IE5.5的Bug。
30.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
31.如何實現瀏覽器內多個標籤頁之間的通信?
調用localstorge、cookies等本地存儲方式
32.CSS實現垂直水平居中
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
33.display有哪些值？說明他們的作用。
block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 缺省值。象行內元素類型一樣顯示。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block 默認寬度爲內容寬度，可以設置寬高，同行顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作爲塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值。
34.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div,p,h1,form,ul,li;
行內元素 : span>,a,label,input,img,strong,em;
CSS盒模型:內容，border ,margin，padding
35.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時加載
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
36.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先級高
37.CSS清除浮動的幾種方法（至少兩種）
使用帶clear屬性的空元素
使用CSS的overflow屬性；
使用CSS的:after僞元素；
使用鄰接元素處理；
38.CSS居中（包括水平居中和垂直居中）
內聯元素居中方案
水平居中設置：
1.行內元素
設置 text-align:center；
2.Flex佈局
設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)
垂直居中設置：
1.父元素高度確定的單行文本（內聯元素）
設置 height = line-height；
2.父元素高度確定的多行文本（內聯元素）
a:插入 table （插入方法和水平居中一樣），然後設置 vertical-align:middle；
b:先設置 display:table-cell 再設置 vertical-align:middle；
塊級元素居中方案
水平居中設置：
1.定寬塊狀元素
設置 左右 margin 值爲 auto；
2.不定寬塊狀元素
a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設置 margin 的值爲 auto；
b:給該元素設置 displa:inine 方法；
c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；
垂直居中設置：
使用position:absolute（fixed）,設置left、top、margin-left、margin-top的屬性;
利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
利用display:table-cell屬性使內容垂直居中;
使用css3的新屬性transform:translate(x,y)屬性;
使用:before元素;
39.在書寫高效 CSS 時會有哪些問題需要考慮？
reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。
規範命名。尤其對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先級”。