前端面試題集(3)

1.CSS3有哪些新特性

  1. CSS3實現圓角(border-radius),陰影(box-shadow),
  1. 對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
    3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
  2. 增加了更多的CSS選擇器 多背景 rgba
  3. 在CSS3中唯一引入的偽元素是 ::selection.
  4. 媒體查詢,多欄布局
  5. 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 長期存儲數據,瀏覽器關閉后數據不丟失;
  7. sessionStorage 的數據在瀏覽器關閉后自動刪除
  8. 表單控件,calendar、date、time、email、url、search
  9. 新的技術webworker, websocket, Geolocation
    移除的元素:
  10. 純表現的元素:basefont,big,center,font, s,strike,tt,u;
  11. 對可用性產生負面影響的元素:frame,frameset,noframes;
    支持HTML5新標簽:
  12. IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽,可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽,瀏覽器支持新標簽后,還需要添加標簽默認的樣式(當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架):

如何區分:
DOCTYPE聲明新增的結構元素、功能元素
本地存儲(Local Storage )和cookies(儲存在用戶本地終端上的數據)之間的區別是什么?
Cookies:服務器和客戶端都可以訪問;大小只有4KB左右;有有效期,過期后將會刪除;
本地存儲:只有本地瀏覽器端可訪問數據,服務器不能訪問本地存儲直到故意通過POST或者GET的通道發送到服務器;每個域5MB;沒有過期數據,它將保留直到用戶從瀏覽器清除或者使用Javascript代碼移除

3.事件綁定和普通事件有什么區別

普通添加事件的方法:
var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
執行上面的代碼只會alert 2
事件綁定方式添加事件:
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);
執行上面的代碼會先alert 1 再 alert 2
普通添加事件的方法不支持添加多個事件,最下面的事件會覆蓋上面的,而事件綁定(addEventListener)方式添加事件可以添加多個。
addEventListener不兼容低版本IE
普通事件無法取消
addEventLisntener還支持事件冒泡+事件捕獲

4.IE和DOM事件流的區別

1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題

5.IE和標準下有哪些兼容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

6.如何阻止事件冒泡和事件默認行為

//阻止事件冒泡
if(typeof ev.stopPropagation=='function') { //標準的
ev.stopPropagation();
} else { //非標準IE
window.event.cancelBubble = true;
}
//阻止事件默認行為
return false

7.window.onload 和document ready的區別

window.onload 是在dom文檔樹加載完和所有文件加載完之后執行一個函數document.ready原生中沒有這個方法,jquery中有 $().ready(function),在dom文檔樹加載完之后執行一個函數(注意,這里面的文檔樹加載完不代表全部文件加載完)。
$(document).ready要比window.onload先執行
window.onload只能出來一次,$(document).ready可以出現多次

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區別? (1)、<...
    clark124閱讀 3,540評論 1 19
  • HTML+CSS 1.對WEB標準以及W3C的理解與認識 標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使...
    aymincoder閱讀 5,096評論 2 188
  • 本章轉載自新浪博客網友:blog.sina.com.cn/s/blog_7f5571aa0102w2tv.html...
    czboy閱讀 1,474評論 0 11
  • 今天面試回來,稍微整理下今天被問到的題目,呀,回答的是亂七八糟,最后百度整理下,以供以后學習。 1,vue 中事件...
    AlisaMfz閱讀 482評論 0 0
  • 故事開始于那個星光滿天的夜晚……… 我坐在幽暗昏豁的小屋里,淡黃色的燈光下映出盤坐在炕上的老干媽,她瘦瘦的臉上有雙...
    我是小白花仙兒閱讀 645評論 0 0