一些html5和css3的一些常見面試題
最近總結了一些有關於html5和css3的一些常見面試題,希望對正在找工作的你有所幫助。還有歡迎大家補充~~~
一、HTML5 CSS3
<1>.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
<2>.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 長期存儲數據,瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除
7. 表單控件,calendar、date、time、email、url、search
8. 新的技術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聲明新增的結構元素、功能元素
<3>.描述一下cookies,sessionStorage和localStorage的區別?
sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的(4095-4097個字節之間),並且每次你請求一個新的頁面的時候Cookie都會被發送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域調用。
除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行交互,作為HTTP規範的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數據而生。
<4>.如何在 HTML5 頁面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標準方式,支持的格式包括 MP3、Wav 和 Ogg:
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does‘nt support audio embedding feature.
</audio>
<5>.如何在 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和css3的一些常見面試題