web前端面試題分享（一）

以下這些都是我自己在面試時遇見過的問題，有需要的話可以參考參考。

1. HTML5 有哪些新特性？

聲明方式，HTML4 規定了三種聲明方式，分别是：嚴格模式、過渡模式 和 架構集模式；而HTML5因為不是SGML的子集，隻需要<!DOCTYPE>就可以了。

語義化更好的内容标簽：header、footer、article、section等

音頻、視訊

新增了很多表單控件：color、date、datetime、email、month、number、search、tel、url等

本地存儲：localStorage、sessionStorage

畫布/Canvas

地理/Geolocation

拖拽釋放

Web Workers

1. html5有哪些新特性、移除了哪些？

新增的可以參考上一個問題

移除了純表現的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u和對可能性産負面影響的元素： frame 、 frameset 、 noframes

1. 如何處理 HTML5 新标簽的浏覽器相容問題？

IE8/IE7/IE6 支援通過 document.createElement 方法産生的标簽，可以利用這一特性讓這些浏覽器支援 HTML5 新标簽；

document.createElement(‘header’);

直接循環方式建立标簽：

var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(’, ');

var i= e.length;

while (i–){

document.createElement(e[i])

}

CSS 樣式設定預設樣式：

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{

display: block;

}

1. 如何區分 HTML 和 HTML5?

簡化的文法

HTML5canvas标簽替代 Flash

HTML5 新增 header 和 footer标簽

HTML5 新增 section和 article 标簽

HTML5 新增 menu 和 figure标簽

HTML5 新增 audio 和 video 标簽

全新的表單

HTML5 删除 b 和 font标簽

HTML5 删除了 frame, center, big 标簽

1. HTML5 為什麼隻需要寫 <!DOCTYPE>?

核心點：HTML5 不基于 SGML，是以不需要引用 DTD。

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因為 HTML 4.01 基于 SGML。

DTD 規定了标記語言的規則，這樣浏覽器才能正确地呈現内容。

1. 頁面導入樣式時，使用 link 和 @import有什麼差別？

link 屬于 HTML 标簽，而 @import 是 CSS 提供的；

頁面被加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載；

import 隻在 IE5 以上才能識别，而 link 是 HTML 标簽，無相容問題；

link 方式的樣式的權重 高于 @import 的權重。

1. 行内元素有哪些？塊級元素有哪些？空（void）元素有哪些？

行内元素有： a b span img input select strong

塊級元素有： div ul ol li dl dt dd h1 h2 h3 h4… p

空元素： br,hr img input link meta

行内元素不可以設定寬高，不獨占一行

塊級元素可以設定寬高，獨占一行

1. 請描述一下 cookies 、sessionStorage 和 localStorage的差別？

localStorage 存儲持久資料，浏覽器關閉後資料不丢失除了主動删除資料

sessionStorage 資料在目前浏覽器窗⼝關閉後自動删除

cookie 設定的 cookie 過期時間之前一直有效，即使窗⼝或浏覽器關閉

1. Label 的作用是什麼？是怎麼用的？

當使用者選擇該标簽時，浏覽器就會自動将焦點轉到和标簽相關的表單控件上。

<!--label 标簽的 for 屬性應當與相關元素的 id 屬性相同-->
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
</form>
           

1. iframe 的優缺點

iframe 會阻塞首頁面的 Onload 事件；

iframe 和首頁面共享連接配接池，而浏覽器對相同域的連接配接有限制，是以會影響頁面的并行加載。

使用 iframe 之前需要考慮這兩個缺點。如果需要使用 iframe，最好是通過 javascript 動态給 iframe 添加 src 屬性值，這樣可以可以繞開以上兩個問題。

1. display:none和visibility:hidden的差別？

display:none；隐藏後的元素不占據任何空間，引起渲染與回流，影響性能。

visibility:hidden；隐藏的元素空間依舊存在；無渲染與回流。

1. box-sizing；border-box是怎麼回事？

-webkit-box-sizing: border-box; 則div 設定的寬高将包含 邊框及 padding；

注意：這個答案不一定準确，經供參考！！！

1. 介紹一下标準的CSS的盒模型？低版本IE的盒模型有什麼不同的？

盒模型： 内容(content)、填充( padding )、邊界( margin )、 邊框( border )；

區 别： IE 的content 部分把 border 和 padding 計算了進去;