前端面試的H5問題有哪些

前端面試的H5問題匯總：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了乳源免費建站歡迎大家使用！

1.HTML5 為什么只需要寫 !DOCTYPE HTML？

答案解析：

HTML5不基于SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運行）而HTML4.01基于SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

2、行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

答案解析：

行內(nèi)元素：a b span img input select strong

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

空元素：br hr img link meta

3、頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

答案解析：

1）link屬于XHTML標簽，而@import是css提供的；

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

3）@import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；

4）link方式的樣式的權(quán)重高于@import的權(quán)重。

4、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

答案解析：

新特性，新增元素：

1）內(nèi)容元素：article、footer、header、nav、section

2）表單控件：calendar、date、time、email、url、search

3）控件元素：webworker，websockt，Geolocation

移除元素：

1）顯現(xiàn)層元素：basefont，big，center，font，s，strike，tt，u

2）性能較差元素：frame，frameset，noframes

處理兼容問題有兩種方式：

1）IE6/IE7/IE8支持通過document方法產(chǎn)生的標簽，利用這一特性讓這些瀏覽器支持HTML5新標簽。

2）使用是html5shim框架

另外，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標志的一個重要因素，此外，還可以根據(jù)新增的結(jié)構(gòu)，功能元素來加以區(qū)分。

5、如何區(qū)分 HTML 和 HTML5？

答案解析：

1）在文檔類型聲明上不同：

HTML是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。

2）在結(jié)構(gòu)語義上不同：

HTML：沒有體現(xiàn)結(jié)構(gòu)語義化的標簽，通常都是這樣來命名的div id="header"/div，這樣表示網(wǎng)站的頭部。

HTML5：在語義上卻有很大的優(yōu)勢。提供了一些新的標簽，比如：headerarticlefooter

6、簡述一下你對HTML語義化的理解？

答案解析：

1）用正確的標簽做正確的事情；

2）html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析；

3）即使在沒有樣式css情況下也以一種文檔格式顯示，并且是容易閱讀的；

4）搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO；

5）使于都源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

7、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

答案解析：

localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

8、iframe有那些缺點？

答案解析：

1）在網(wǎng)頁中使用框架結(jié)構(gòu)最大的弊病是搜索引擎的“蜘蛛”程序無法解讀這種頁面；

2）框架結(jié)構(gòu)有時會讓人感到迷惑，頁面很混亂；

9、Doctype作用? 嚴格模式與混雜模式如何區(qū)分？它們有何意義?

答案解析：

1）!Doctype聲明位于文檔中的最前面，處于html標簽之前。告知瀏覽器的解析器，用什么文檔類型規(guī)范來解析這個文檔。

2）嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行。

3）在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

4）DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。

10、常見兼容性問題？

1）png24位的圖片在IE6瀏覽器上出現(xiàn)背景；

解決方案是：做成PNG8；

2）瀏覽器默認的 margin 和 padding 不同。

解決方案是：加一個全局的*{margin:0;padding:0;}來統(tǒng)一。

3）IE6雙邊距bug：塊屬性標簽float后，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設(shè)置的大。浮動IE產(chǎn)生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產(chǎn)生200px的距離。

解決方法：加上_display：inline，使浮動忽略

4）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； Firefox下，只能使用getAttribute()獲取自定義屬性。

解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。

5）IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性，但是沒有x，y屬性；

解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

6）Chrome中文界面下默認會將小于 12px 的文本強制按照 12px 顯示

解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決

7）超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active ；

解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }

11、如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信？

答案解析：

調(diào)用localstorge、cookies等本地存儲方式

12、webSocket如何兼容低瀏覽器？

答案解析：

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長輪詢的 XHR

13、支持HTML5新標簽

答案解析：

1）IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式；

2）當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

!--[if lt IE 9]

script src=""/script

![endif]--

14、如何區(qū)分：DOCTYPE 聲明\新增的結(jié)構(gòu)元素\功能元素，語義化的理解？

答案解析：

1）用正確的標簽做正確的事情；

2）html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；

3）在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的；

4）搜索引擎的爬蟲依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重，利用 SEO ；

5）使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

15、介紹一下 CSS 的盒子模型？

答案解析：

1）有兩種，IE 盒子模型、標準 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；

2）盒模型：內(nèi)容（content）、填充（padding）、邊界（margin）、邊框（border）。

16、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3 新增偽類有哪些？

答案解析：

1）id 選擇器（#myid）

2）類選擇器（.myclassname）

3）標簽選擇器（div，h1，p）

4）相鄰選擇器（h1 + p）

5）子選擇器（ul li）

6）后代選擇器（li a）

7）通配符選擇器（* ）

8）屬性選擇器（ a[rel = "external"]）

9）偽類選擇器（a: hover, li: nth - child）

17、可繼承的樣式： font-size font-family color, UL LI DL DD DT

18、不可繼承的樣式：border padding margin width height

19、優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準

20、載入樣式以最后載入的定位為準;

解析答案：優(yōu)先級為: !important id class tag ； important 比 內(nèi)聯(lián)優(yōu)先級高

21、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 控制表單控件的禁用狀態(tài)；

:checked 單選框或復(fù)選框被選中。

22、如何居中div？ 如何居中一個浮動元素？

答案解析：

給div 設(shè)置一個寬度，然后添加 margin:0 auto 屬性；div{width:200px; margin:0 auto; }

23、居中一個浮動元素

答案解析：

確定容器的寬高 寬500 高300的層，設(shè)置層的外邊距

.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；頭：50%}

24、css3有哪些新特性？

答案解析：

CSS3 實現(xiàn)圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉(zhuǎn)（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn)，縮放，定位，傾斜

增加了更多的 css 選擇器 多背景 rgba

25、為什么要初始化 CSS 樣式

答案解析：

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法是：*{padding:0;margin:0} (不建議)

淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,

textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

26、display:inline-block 什么時候會顯示間隙？

答案解析：

移除空格，使用margin 負值、使用 font-size:0、letter-spacing 、word-spacing

27、使用 CSS 預(yù)處理器嗎？喜歡哪個？

答案解析：SASS

28、什么是盒子模型？

答案解析：

在網(wǎng)頁中，一個元素占有空間的大小由幾個部分構(gòu)成，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分占有的空間中，有的部分可以顯示相應(yīng)的內(nèi)容，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個部分一起構(gòu)成了css中元素的盒模型。

29、CSS實現(xiàn)垂直水平居中

答案解析：

一道經(jīng)典的問題，實現(xiàn)方法有很多種，以下是其中一種實現(xiàn)：

HTML結(jié)構(gòu)：

divclass="wrapper"

divclass="content"/div

/div

CSS：

.wrapper{position:relative;}

.content{

background-color:#6699FF;

width:200px;

height:200px;

position:absolute; //父元素需要相對定位

top:50%;

left:50%;

margin-top:-100px; //二分之一的height，width

margin-left:

-100px;

}

30、簡述一下src與href的區(qū)別

答案解析：

href 是指向網(wǎng)絡(luò)資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

31、簡述同步和異步的區(qū)別

答案解析：

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；

異步是指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)。當有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率。

32、px和em的區(qū)別

答案解析：

px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

33、瀏覽器的內(nèi)核分別是什么?

答案解析：

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari：webkit內(nèi)核

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))

HTML5頭部為什么只需要寫

首先，我不知道你說的要寫是什么意思，但是我猜測你說的是!Doctype html吧？

這個標簽是表明此網(wǎng)頁是html5格式，讓瀏覽器能以html5解析，否則就以兼容模式解析（html4以下）

前端面試會提問到哪些

在面試前端的過程中，有些問題是經(jīng)常會被提問到的

一、基礎(chǔ)篇

1. 在不使用第三個變量的情況下，如何調(diào)換a與b的值？

2. px與em的區(qū)別

3. 簡述一下盒模型

4. 頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

5. 簡述一下事件代理

二、HTML常見題目

01、Doctype作用？嚴格模式與混雜模式如何區(qū)分？它們有何意義？

02、HTML5為什么只需要寫？

03、行內(nèi)元素有哪些？塊級元素有哪些？空(void)元素有哪些？

04、頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

05、介紹一下你對瀏覽器內(nèi)核的理解？

06、常見的瀏覽器內(nèi)核有哪些？

07、html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？

08、如何區(qū)分HTML和HTML5？

09、簡述一下你對HTML語義化的理解？

10、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

三、CSS類的題目

01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？

02、CSS選擇符有哪些？哪些屬性可以繼承？

03、CSS優(yōu)先級算法如何計算？

04、CSS3新增偽類有哪些？

05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

06、display有哪些值？說明他們的作用。

07、position的值relative和absolute定位原點是？

08、CSS3有哪些新特性？

09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？

10、用純CSS創(chuàng)建一個三角形的原理是什么？

四、JavaScript類的題目

01、JavaScript中this是如何工作的

02、請解釋原型繼承的原理。

03、什么是閉包(closure)，如何使用它，為什么要使用它？

04、.call 和.apply的區(qū)別是什么？

05、請指出JavaScript 宿主對象(host objects) 和原生對象(native objects) 的區(qū)別？

06、請指出以下代碼的區(qū)別：function Person(){}、var person = Person()、var person = new Person()？

07、請解釋變量聲明提升(hoisting)。

08、什么是 “use strict”; ？ 使用它的好處和壞處分別是什么？

09、什么是事件循環(huán) (event loop)？

10、請解釋同步 (synchronous) 和異步 (asynchronous) 函數(shù)的區(qū)別。

五、開發(fā)及性能優(yōu)化類題目

01、如何規(guī)避javascript多人開發(fā)函數(shù)重名問題？

02、請說出三種減低頁面加載時間的方法.

03、說說你所了解到的Web攻擊技術(shù)。

04、說說你說了解的前端性能優(yōu)化方法？

05、前端開發(fā)中，如何優(yōu)化圖像？圖像格式的區(qū)別？

06、瀏覽器是如何渲染頁面的？

07、頁面重構(gòu)怎么操作？

08、什么叫優(yōu)雅降級和漸進增強？

09、前端需要注意哪些SEO？如何做SEO優(yōu)化？

10、平時如何管理你的項目？

HTML5頭部為什么只需要寫？

html5不基于SGML（標準通用置標語言）,因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運行）

而HTML4.01基于SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

HTML的文檔類型只需要寫個就行了嗎

1、!DOCTYPE html這個是html5的寫法。html5之前的寫法比較繁雜，種類也多。如果你計劃使用html5就用!DOCTYPE html，不用html5最好用其他寫法。

“!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""”。這是html4的其中一種寫法。還有老多了。

2、如果不寫html文檔類型，由瀏覽器自行選擇合適的文檔類型。正規(guī)項目里面都會寫html文檔類型，自己練習(xí)的話隨便了

分享題目：html5為什么只需要寫,HTML5為什么只需要寫?
文章網(wǎng)址：http://chinadenli.net/article22/dsephcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、建站公司、網(wǎng)站制作、虛擬主機、ChatGPT、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)