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