最近總結(jié)了一些有關(guān)于html5和css3的一些常見(jiàn)面試題，希望對(duì)正在找工作的你有所幫助。
還有歡迎大家補(bǔ)充~~~
一、HTML5 CSS3
CSS3有哪些新特性？
1. CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），
2. 對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜
4. 增加了更多的CSS選擇器 多背景 rgba
5. 在CSS3中唯一引入的偽元素是 ::selection.
6. 媒體查詢，多欄布局
7. border-image
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
新特性：
1. 拖拽釋放(Drag and drop) API
2. 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
3. 音頻、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
7. sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
8. 表單控件，calendar、date、time、email、url、search
9. 新的技術(shù)webworker, websocket, Geolocation
移除的元素：
1. 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
2. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
1. IE8/IE7/IE6支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
<!--[if lt IE 9]>
<script> src='http://html5shim.googlecode.com/svn/trunk/html5.js'</script>
<![endif]-->
如何區(qū)分：
DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素
本地存儲(chǔ)（Local Storage ）和cookies（儲(chǔ)存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么？
Cookies:服務(wù)器和客戶端都可以訪問(wèn)；大小只有4KB左右；有有效期，過(guò)期后將會(huì)刪除；
本地存儲(chǔ)：只有本地瀏覽器端可訪問(wèn)數(shù)據(jù)，服務(wù)器不能訪問(wèn)本地存儲(chǔ)直到故意通過(guò)POST或者GET的通道發(fā)送到服務(wù)器；每個(gè)域5MB；沒(méi)有過(guò)期數(shù)據(jù)，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
什么是響應(yīng)式設(shè)計(jì)？
它是關(guān)于網(wǎng)頁(yè)制作的過(guò)程中讓不同的設(shè)備有不同的尺寸和不同的功能。響應(yīng)式設(shè)計(jì)是讓所有的人能在這些設(shè)備上讓網(wǎng)站運(yùn)行正常
新的 HTML5 文檔類型和字符集是？
答：HTML5文檔類型：<!doctype html>
HTML5使用的編碼<meta charset=”UTF-8”>
HTML5 Canvas 元素有什么用？
答：Canvas 元素用于在網(wǎng)頁(yè)上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在 HTML 上進(jìn)行圖形操作。
HTML5 存儲(chǔ)類型有什么區(qū)別？
答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
用H5 CSS3解決下導(dǎo)航欄最后一項(xiàng)掉下來(lái)的問(wèn)題
CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。
請(qǐng)用CSS實(shí)現(xiàn)：一個(gè)矩形內(nèi)容，有投影，有圓角，hover狀態(tài)慢慢變透明。
css屬性的熟練程度和實(shí)踐經(jīng)驗(yàn)
描述下CSS3里實(shí)現(xiàn)元素動(dòng)畫的方法
動(dòng)畫相關(guān)屬性的熟悉程度
html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，地理定位等功能的增加。
* 繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
CSS3實(shí)現(xiàn)圓角，陰影，對(duì)文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術(shù)webworker, websockt, Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src='http://html5shim.googlecode.com/svn/trunk/html5.js'</script>
<![endif]-->
你怎么來(lái)實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?
* 首先劃分成頭部、body、腳部；。。。。。
* 實(shí)現(xiàn)效果圖是最基本的工作，精確到2px；
與設(shè)計(jì)師，產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與
做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶體驗(yàn)
處理hack，兼容、寫出優(yōu)美的代碼格式
針對(duì)服務(wù)器的優(yōu)化、擁抱 HTML5。
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
“優(yōu)雅降級(jí)”觀點(diǎn)
“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。
在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。
“漸進(jìn)增強(qiáng)”觀點(diǎn)
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問(wèn)題了?，F(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁(yè)效果相對(duì)高版本現(xiàn)代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會(huì)如何說(shuō)服他？
為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效？
CDN緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約cookie帶寬
節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度
防止不必要的安全問(wèn)題
請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
（無(wú)標(biāo)準(zhǔn)答案）網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，開(kāi)發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開(kāi)發(fā)難度，開(kāi)發(fā)成本，SEO也會(huì)更好做，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問(wèn)題，最終提高網(wǎng)站易用性。
請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
知道css有個(gè)content屬性嗎？有什么作用？有什么應(yīng)用？
知道。css的content屬性專門應(yīng)用在 before/after 偽元素上，用來(lái)插入生成內(nèi)容。最常見(jiàn)的應(yīng)用是利用偽類清除浮動(dòng)。
//一種常見(jiàn)利用偽類清除浮動(dòng)的代碼
.clearfix:after {
content:'.'; //這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after偽元素通過(guò) content 在元素的后面生成了內(nèi)容為一個(gè)點(diǎn)的塊級(jí)素，再利用clear:both清除浮動(dòng)。
那么問(wèn)題繼續(xù)還有，知道css計(jì)數(shù)器（序列數(shù)字字符自動(dòng)遞增）嗎？如何通過(guò)css content屬性實(shí)現(xiàn)css計(jì)數(shù)器？
答案：css計(jì)數(shù)器是通過(guò)設(shè)置counter-reset 、counter-increment 兩個(gè)屬性 、及 counter()/counters()一個(gè)方法配合after / before 偽類實(shí)現(xiàn)。
如何在 HTML5 頁(yè)面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標(biāo)準(zhǔn)方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls>
<source src='jamshed.mp3' type='audio/mpeg'>
Your browser does'nt support audio embedding feature.
</audio>
如何在 HTML5 頁(yè)面中嵌入視頻？
和音頻一樣，HTML5 定義了嵌入視頻的標(biāo)準(zhǔn)方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width='450' height='340' controls>
<source src='jamshed.mp4' type='video/mp4'>
Your browser does'nt support video embedding feature.
</video>
HTML5 引入什么新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。
(寫)描述一段語(yǔ)義的html代碼吧。
（HTML5中新增加的很多標(biāo)簽（如：<article>、<nav>、<header>和<footer>等）
就是基于語(yǔ)義化設(shè)計(jì)原則）
< div id='header'>
< h1>標(biāo)題< /h1>
< h2>專注Web前端技術(shù)< /h2>
< /div>
語(yǔ)義 HTML 具有以下特性：
文字包裹在元素中，用以反映內(nèi)容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來(lái)源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語(yǔ)義用途以外的其他目的。例如：
<h1>包含標(biāo)題，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本縮進(jìn)。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標(biāo)記。
類或 ID 中不引用顏色或位置。
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage區(qū)別
sessionStorage和localStorage的存儲(chǔ)空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
* 繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websockt, Geolocation
* 移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
* IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：
* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src='http://html5shim.googlecode.com/svn/trunk/html5.js'</script>
<![endif]-->
如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
語(yǔ)義化的理解？
用正確的標(biāo)簽做正確的事情！
html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。
搜索引擎的爬蟲依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
HTML5的離線儲(chǔ)存？
localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
寫出HTML5的文檔聲明方式
<DOCYPE html>
HTML5和CSS3的新標(biāo)簽
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,
border-color, transform...;
自己對(duì)標(biāo)簽語(yǔ)義化的理解
在我看來(lái)，語(yǔ)義化就是比如說(shuō)一個(gè)段落， 那么我們就應(yīng)該用 <p>標(biāo)簽來(lái)修飾，標(biāo)題就應(yīng)該用 <h?>標(biāo)簽等。符合文檔語(yǔ)義的標(biāo)簽。
