前端html和css面試題
阿新 • • 發佈：2018-11-07
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等。
[ 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值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先順序”。
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等。
[ 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值要特別注意。
抽取可重用的部件，注意層疊樣式表的“優先順序”。