前端面试常考系列一
轉(zhuǎn)載自??前端面試常考系列一
一、簡述HTML5的優(yōu)點和缺點？
1、網(wǎng)絡(luò)標準統(tǒng)一、HTML5是由W3C推出的。
2、多設(shè)備、跨平臺?，移植性強。
3、自適應(yīng)網(wǎng)頁設(shè)計。
4、即時更新。
5、新增了幾個標簽，有助于開發(fā)人員定義重要的內(nèi)容；?
6、給站點帶來了視頻和音頻等多媒體元素；??
7、很好的替代Flash和Silverlight；
8、涉及到網(wǎng)站的抓取和索引時，對于SEO很友好；?
9、可大量應(yīng)用于移動應(yīng)用程序和游戲。?
1、聲音問題：HTML5的聲音制作存在很大問題。
2、安全問題：Firefox4的web socket和透明代理的實現(xiàn)存在嚴重的安全問題，web storage、web socket?等功能容易被黑客利用，導(dǎo)致用戶的信息和資料被竊取。?
3、完善性：各瀏覽器對一些特性的支持程度不一樣。?
4、技術(shù)門檻：HTML5簡化開發(fā)者工作的同時代表了有許多新的屬性和API需要開發(fā)者學習，提升了技術(shù)門檻。
5、性能：某些平臺上的引擎問題導(dǎo)致HTML5性能低下。?
6、瀏覽器兼容性：IE9以下瀏覽器幾乎全部不兼容。
二、簡單介紹一下瀏覽器的頁面由幾層組成，以及相應(yīng)功能是什么?
瀏覽器頁面由三層構(gòu)成，分別是結(jié)構(gòu)層、表示層和行為層。
結(jié)構(gòu)層（structural layer）由HTML或XHTML之類的標記語言負責創(chuàng)建，其功能是實現(xiàn)頁面的結(jié)構(gòu)。
表示層（presentation layer）由CSS負責創(chuàng)建，其功能是完成頁面的表現(xiàn)和風格。
網(wǎng)頁的行為層由JavaScript負責創(chuàng)建，其功能是實現(xiàn)一些客戶端的功能和相應(yīng)的業(yè)務(wù)。
三、Doctype的作用是什么??
<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用是為了告訴瀏覽器所聲明文件的類型。讓瀏覽器解析器知道解析文檔需要用什么規(guī)范。
四、嚴格模式與混雜模式是什么？如何區(qū)分？有何意義?
定義：嚴格模式：又稱標準模式，是指瀏覽器按照?W3C 標準解析代碼。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
1、嚴格 DTD ——嚴格模式：文檔包含嚴格的DOCTYPE，一般以嚴格模式呈現(xiàn)。
2、有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式。
3、DTD不存在或者格式不正確——混雜模式。
4、HTML5 沒有嚴格和混雜之分。
瀏覽器解析時到底使用嚴格模式還是混雜模式，由網(wǎng)頁中的?DTD 聲明決定。 DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示，忽略DTD聲明 ,網(wǎng)頁將會進入混雜模式。
?
五、簡單介紹一下HTML5，并說明一下其出現(xiàn)的原因
簡介：HTML5?是?HTML?最新版本，是2014年10月由萬維網(wǎng)聯(lián)盟（?W3C?）完成標準制定的一套技術(shù)組合，包括?HTML?、?CSS?和?JavaScript?。主要作用是為了減少網(wǎng)頁瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)的需求，并且提供更多能有效加強網(wǎng)絡(luò)應(yīng)用的標準集。最終目的是為了替換?1999?年所制定的?HTML 4.01和?XHTML 1.0?標準，希望能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時期，使網(wǎng)絡(luò)標準達到時代對于網(wǎng)絡(luò)的需求。
隨著時代的發(fā)展，HTML4已經(jīng)不能滿足日益發(fā)展的互聯(lián)網(wǎng)需要，為了增強瀏覽器功能?，廣泛的使用了Flash，導(dǎo)致了穩(wěn)定性和安全性較差，且不適合在移動端使用。在這種情況下，HTML5應(yīng)運而生，它增強了瀏覽器的原生功能，減少了?Web?應(yīng)用對插件的依賴，給開發(fā)帶來了方便，也帶來了更好的用戶體驗。
?
六、說一下你對于WEB標準以及W3C的理解與認識
1.Web標準規(guī)范要求，書寫標簽必須閉合、標簽小寫、不亂嵌套，可提高搜索機器人對網(wǎng)頁內(nèi)容的搜索幾率。
2.建議使用外鏈css和js腳本，從而達到結(jié)構(gòu)與行為、結(jié)構(gòu)與表現(xiàn)的分離，提高頁面的渲染速度，能更快地顯示頁面的內(nèi)容。
3.樣式與標簽的分離，更合理的語義化標簽，使內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件， 從而降低維護成本、改版更方便。
4.不需要變動頁面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站易用性，遵循w3c制定的Web標準，能夠使用戶瀏覽者更方便的閱讀，使網(wǎng)頁開發(fā)者之間更好的交流。
?
七、WebGL是什么？有什么優(yōu)點?
WebGL（全寫?Web Graphics Library?）是一種3D繪圖標準，這種繪圖技術(shù)標準允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。顯然，WebGL技術(shù)標準免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁面，甚至可以用來設(shè)計3D網(wǎng)頁游戲等等。
WebGL完美地解決了現(xiàn)有的Web交互式三維動畫的兩個問題：
第一，它通過HTML腳本本身實現(xiàn)?Web?交互式三維動畫的制作，無需任何瀏覽器插件支持?;
第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統(tǒng)一的、標準的、跨平臺的OpenGL接口實現(xiàn)的。
通俗說WebGL中canvas繪圖中的3D版本。因為原生的WebGL很復(fù)雜，我們經(jīng)常會使用一些三方的庫，如three.js等，這些庫多數(shù)用于HTML5游戲開發(fā)。
?
八、請你描述一下?cookies，sessionStorage 和 localStorage 的區(qū)別?
Cookie：在瀏覽器和服務(wù)器之間來回傳遞。
每個域名存儲量比較小（各瀏覽器不同，大致?4K?）
所有域名的存儲量有限制（各瀏覽器不同，大致?4K?）
有個數(shù)限制（各瀏覽器不同）
LocalStorage：僅在本地保存。
永久存儲
單個域名存儲量比較大（推薦?5MB?，各瀏覽器不同）
總體數(shù)量無限制
SessionStorage：僅在本地保存。
只在Session內(nèi)有效
存儲量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
?
九、說說你對HTML語義化的理解?
1.什么是HTML語義化？基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調(diào)（strong em）等等。根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)?:?為了裸奔時好看；
用戶體驗：例如title、?alt?用于解釋名詞或解釋圖片信息、?label?標簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
便于團隊開發(fā)和維護，語義化更具可讀性，是下一步網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用來在頁面中表示一套結(jié)構(gòu)完整且獨立的內(nèi)容部分
<aslde></aside> SM:主題的附屬信息(用途很廣，主要就是一個附屬內(nèi)容)，如果?article?里面為一篇文章的話，那么文章的作者以及信息內(nèi)容就是這篇文章的附屬內(nèi)容了。
<figure></figure>SM:媒體元素，比如一些視頻，圖片啊等等
<datalist></datalist>
SM:選項列表，與input元素配合使用，來定義input可能的值
<details></details>
SM:用于描述文檔或者文檔某個部分的細節(jié)~默認屬性為open~
ps:配合summary一起使用
?
十、你做的網(wǎng)頁在哪些瀏覽器測試過,這些瀏覽器的內(nèi)核分別是什么?
1、?IE: trident?內(nèi)核
2、?Firefox?：?gecko?內(nèi)核
3、?Safari、Chromewebkit:webkit?內(nèi)核
4、?Opera、Chrome:??Blink?內(nèi)核
十一、HTML5有哪些新特性、移除了哪些元素？
Html5新增了27個元素，廢棄了16個元素，根據(jù)現(xiàn)有的標準規(guī)范，把HTML5的元素按優(yōu)先級定義為結(jié)構(gòu)性屬性、級塊性元素、行內(nèi)語義性元素和交互性元素4大類。
結(jié)構(gòu)性元素主要負責web上下文結(jié)構(gòu)的定義
section：在web頁面應(yīng)用中，該元素也可以用于區(qū)域的章節(jié)描述。
header：頁面主體上的頭部，header元素往往在一對body元素中。
footer：頁面的底部（頁腳），通常會標出網(wǎng)站的相關(guān)信息。
nav：專門用于菜單導(dǎo)航、鏈接導(dǎo)航的元素，是?navigator?的縮寫。
article：用于表現(xiàn)一篇文章的主體內(nèi)容，一般為文字集中顯示的區(qū)域。
級塊性元素主要完成web頁面區(qū)域的劃分，確保內(nèi)容的有效分割。
aside：用于表達注記、貼士、側(cè)欄、摘要、插入的引用等作為補充主體的內(nèi)容。
figure：是對多個元素進行組合并展示的元素，通常與ficaption聯(lián)合使用。
code：表示一段代碼塊。
dialog：用于表達人與人之間的對話，該元素包含dt和dd這兩個組合元素，dt用于表示說話者，而dd用來表示說話內(nèi)容。
行內(nèi)語義性元素主要完成web頁面具體內(nèi)容的引用和描述，是豐富內(nèi)容展示的基礎(chǔ)。
meter：表示特定范圍內(nèi)的數(shù)值，可用于工資、數(shù)量、百分比等。
time：表示時間值。
progress：用來表示進度條，可通過對其max、min、step等屬性進行控制，完成對進度的表示和監(jiān)事。
video：視頻元素，用于支持和實現(xiàn)視頻文件的直接播放，支持緩沖預(yù)載和多種視頻媒體格式。
audio：音頻元素，用于支持和實現(xiàn)音頻文件的直接播放，支持緩沖預(yù)載和多種音頻媒體格式。
交互性元素主要用于功能性的內(nèi)容表達，會有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)，是各種事件的基礎(chǔ)。
details：用來表示一段具體的內(nèi)容，但是內(nèi)容默認可能不顯示，通過某種手段（如單擊）與legend交互才會顯示出來。
datagrid：用來控制客戶端數(shù)據(jù)與顯示，可以由動態(tài)腳本及時更新。
menu：主要用于交互菜單（曾被廢棄又被重新啟用的元素）。
command：用來處理命令按鈕。
?
十二、HTML5行內(nèi)元素有哪些,塊級元素有哪些, 空元素有哪些?
參考答案
(1)行內(nèi)元素
a -?錨點
* abbr -?縮寫
* acronym -?首字
* b -?粗體?(不推薦)
* bdo - bidi override
* big -?大字體
* br -?換行
* cite -?引用
* code -?計算機代碼?(在引用源碼的時候需要)
* dfn -?定義字段
* em -?強調(diào)
* font -?字體設(shè)定?(不推薦)
* i -?斜體
* img -?圖片
* input -?輸入框
* kbd -?定義鍵盤文本
* label -?表格標簽
* q -?短引用
* s -?中劃線?(不推薦)
* samp -?定義范例計算機代碼
* select -?項目選擇
* small -?小字體文本
* span -?常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
* strike -?中劃線
* strong -?粗體強調(diào)
* sub -?下標
* sup -?上標
* textarea -?多行文本輸入框
* tt -?電傳文本
* u -?下劃線
* var -?定義變量
(2)塊元素?(block element)
* address -?地址
* blockquote -?塊引用
* center - 居中對齊塊
* dir -?目錄列表
* div -?常用塊級容易，也是?css layout?的主要標簽
* dl -?定義列表
* fieldset - form控制組
* form -?交互表單
* h1 -?大標題
* h2 -?副標題
* h3 - 3級標題
* h4 - 4級標題
* h5 - 5級標題
* h6 - 6級標題
* hr -?水平分隔線
* isindex - input prompt
* menu -?菜單列表
* noframes - frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
* noscript - 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
* ol -?排序表單
* p -?段落
* pre -?格式化文本
* table -?表格
* ul -?非排序列表
可變元素
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
* applet - java applet
* button -?按鈕
* del -?刪除文本
* iframe - inline frame
* ins -?插入的文本
* map -?圖片區(qū)塊?(map)
* object - object對象
* script -?客戶端腳本
(3)空元素?(在HTML[1]元素中，沒有內(nèi)容的HTML元素被稱為空元素)
<br/> //換行
<hr> //分隔線
<input> //文本框等
<img> //圖片
<link> <meta>
總結(jié)
- 上一篇： 赛博朋克20772k需要什么配置？
- 下一篇： 2017年html5行业报告,云适配发布