Web前端開發(fā)培訓(xùn)之20 個重要的HTML5面試題及答案

更新時間:2017-06-09 來源:黑馬程序員web前端開發(fā)培訓(xùn)學(xué)院瀏覽量:

我是一個ASP.NET MVC的開發(fā)者，最近在我找工作的時候被問到很多與HTML5相關(guān)的問題和新特性。所以以下面試可能遇到的重要問題，這些問題將幫助你復(fù)習(xí)HTML5相關(guān)的知識。這些問題不是你得到工作的高效解決方案，但是可以在你想快速復(fù)習(xí)相關(guān)主題的時候有所幫助，快樂地找工作。

1、什么是HTML5？

HTML5是最新的HTML標(biāo)準(zhǔn)，他的主要目標(biāo)是提供所有內(nèi)容而不需要任何的像flash，silverlight等的額外插件，這些內(nèi)容來自動畫，視頻，富GUI等。

HTML5是萬維網(wǎng)聯(lián)盟（W3C）和網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組（WHATWG）之間合作輸出的。

2、為什么HTML5里面我們不需要DTD（文檔類型定義（Document Type Definition）？

HTML5沒有使用SGML或者XHTML，他是一個全新的東西，因此你不需要參考DTD，對于HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔。

3、如果我不放入，HTML5還會工作么？

不會，瀏覽器將不能識別他是HTML文檔，同時HTML5的標(biāo)簽將不能正常工作

4、哪些瀏覽器支持HTML5？

幾乎所有的瀏覽器Safari，Chrome，F(xiàn)irefox，Opera，IE都支持HTML5

5、HTML5的頁面結(jié)構(gòu)同HTML4或者更前的HTML有什么區(qū)別？

一個典型的WEB頁面包含頭部，腳部，導(dǎo)航，中心區(qū)域，側(cè)邊欄。現(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內(nèi)容，我們可能要使用DIV標(biāo)簽。
但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結(jié)構(gòu)的HTML5元素的更多細(xì)節(jié)：
<header>：代表HTML的頭部數(shù)據(jù)
<footer>：頁面的腳部區(qū)域
<nav>：頁面導(dǎo)航元素
<article>：自包含的內(nèi)容
<section>：使用內(nèi)部article去定義區(qū)域或者把分組內(nèi)容放到區(qū)域里
<aside>：代表頁面的側(cè)邊欄內(nèi)容

6、HTML5中的datalist是什么？

HTML5中的Datalist元素有助于提供文本框自動完成特性，如下圖所示：

以下是DataList功能的HTML代碼：

7、HTML5中什么是不同的新的表單元素類型？

這里有10個重要的新的表單元素在HTML5中被介紹：Color、Date、Datetime-local、Email、Time、Url、Range、Telephone、Number、Search，讓我們一步一步了解這10個元素。

如果你想顯示顏色選擇對話框

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="color"` `name="favcolor">`

如果你想顯示日歷對話框

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="date"` `name="bday">`

如果你想顯示含有本地時間的日歷

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="datetime-local"` `name="bdaytime">`

如果你想創(chuàng)建一個含有email校驗的HTML文本框，我們可以設(shè)置類型為“email”

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="email"` `name="email">`

對于URL驗證設(shè)置類型為”url”，如下圖顯示的HTML代碼

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="url"` `name="sitename">`

如果你想用文本展示數(shù)字范圍，你可以設(shè)置類型為“number”

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="number"` `name="quantity"` `min="1"` `max="5">`

如果你想顯示范圍控制，你可以使用類型”range”

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="range"` `min="0"` `max="10"` `step="2"` `value="6">`

想讓文本框作為搜索引擎

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="search"` `name="googleengine">`

想只能輸入時間

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="time"` `name="usr_time">`

如果你想使用文本框接受電話號碼

[HTML] 純文本查看 復(fù)制代碼

1	`<input` `type="tel"` `name="mytel">`

8、HTML5中什么是輸出元素？

當(dāng)你需要計算兩個輸入的和值到一個標(biāo)簽中的時候你需要輸出元素。例如你有兩個文本框（如下圖），你想將來自這兩個輸入框中的數(shù)字求和并放到標(biāo)簽中。

下面是如何在HTML5中使用輸出元素的代碼

為了簡單起見，你也可以使用“valueAsNumber”來代替“parseInt”。你同樣能在output元素中使用“for”使其更加可讀

9、什么是SVG（可縮放矢量圖形（Scalable Vector Graphics）？

SVG（可縮放矢量圖形（Scalable Vector Graphics））表示可縮放矢量圖形。他是基于文本的圖形語言，使用文本，線條，點等來進(jìn)行圖像繪制，這使得他輕便，顯示更加迅速。

10、我們能看到使用HTML5的SVG的簡單例子么？

比方說，我們希望使用HTML5 SVG去顯示以下簡單的線條

下面是HTML5代碼

11、HTML5中canvas是什么？

Canvas是HTML中你可以繪制圖形的區(qū)域。

12、我們?nèi)绾问褂肅anvas來畫一條簡單的線？

定義Canvas區(qū)域、獲取訪問canvas上下文區(qū)域、繪制圖形
定義Canvas區(qū)域
定義Canvas區(qū)域你需要使用下面的HTML代碼，這定義了你能進(jìn)行繪圖的區(qū)域

[HTML] 純文本查看 復(fù)制代碼

1	`<canvas` `id="mycanvas"` `width="600"` `height="500"></canvas>`

獲取畫布區(qū)域的訪問
在畫布上進(jìn)行繪圖我們首先需要獲取上下文區(qū)域的關(guān)聯(lián)，下面是獲取畫布區(qū)域的代碼。

[HTML] 純文本查看 復(fù)制代碼

1	`var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");`

繪制圖形
現(xiàn)在一旦你獲取了訪問上下文，我們就可以開始在上下文中繪制了。首先調(diào)用“move”方法并從一個點開始，使用線條方法繪制線條然后使用stroke方法結(jié)束。

以下是完整的代碼

你可以得到以下輸出

13、Canvas和SVG圖形的區(qū)別是什么？

Note：-如果你看了之前的兩個的問題，Canvas和SVG都可以在瀏覽器上繪制圖形。因此在這個問題中，面試官想知道你在什么時候選用哪種方式。

SVG	Canvas
這個就好像繪制和記憶，換句話說任何使用SVG繪制的形狀都能被記憶和操作，瀏覽器可以再次顯示	Canvas就像繪制和忘記，一旦繪制完成你不能訪問像素和操作它
SVG對于創(chuàng)建圖形例如CAD軟件是良好的，一旦東西繪制，用戶就想去操作它	Canvas在繪制和忘卻的場景例如動畫和游戲是良好的
因為為了之后的操作，需要記錄坐標(biāo)，所以比較緩慢	因為沒有記住以后事情的意向，所以更快
我們可以用繪制對象的相關(guān)事件處理	我們不能使用繪制對象的相關(guān)事件處理，因為我們沒有他們的參考
分辨率無關(guān)	分辨率相關(guān)

14、如何使用Canvas和HTML5中的SVG去畫一個矩形？

HTML5使用SVG繪制矩形的代碼

HTML5使用Canvas繪制矩形的代碼

15、CSS（級聯(lián)樣式表（cascading style sheets））中的選擇器是什么？

選擇器在你想應(yīng)用一個樣式的時候，幫助你去選擇元素。舉例，下面是簡單的被命名為”instro”的樣式，他適用于HTML元素顯示紅色背景

應(yīng)用上面的”intro”樣式給div，我們可以使用”class”選擇器，如下圖所示

16HTML5中我們?nèi)绾螌崿F(xiàn)應(yīng)用緩存？

首先我們需要指定”manifest”文件，“manifest”文件幫助你定義你的緩存如何工作。以下是”mainfest”文件的結(jié)構(gòu)

所有manifest文件都以“CACHE MANIFEST”語句開始.

#（散列標(biāo)簽）有助于提供緩存文件的版本.

CACHE 命令指出哪些文件需要被緩存.

Mainfest文件的內(nèi)容類型應(yīng)是“text/cache-manifest”.

以下是如何在ASP.NET C#使用manifest緩存

創(chuàng)建一個緩存manifest文件以后，接下來的事情實在HTML頁面中提供mainfest連接，如下所示：

當(dāng)以上文件第一次運行，他會添加到瀏覽器應(yīng)用緩存中，在服務(wù)器宕機(jī)時，頁面從應(yīng)用緩存中獲取。

17、我們?nèi)绾问褂肳ebSQL？

第一步我們需要做的是使用如下所示的“OpenDatabase”方法打開數(shù)據(jù)庫，第一個參數(shù)是數(shù)據(jù)庫的名字，接下來是版本，然后是簡單原文標(biāo)題，最后是數(shù)據(jù)庫大??；

為了執(zhí)行SQL，我們需要使用“transaction”方法，并調(diào)用”executeSql”方法來使用SQL

萬一你要使用“select”查詢你會得到數(shù)據(jù)”result”集合，我們可以通過循環(huán)展示到HTML的用戶界面

18、什么是事務(wù)存儲？我們?nèi)绾蝿?chuàng)建一個事務(wù)存儲？

會話存儲和本地存儲類似，但是數(shù)據(jù)在會話中有效，簡而言之?dāng)?shù)據(jù)在你關(guān)閉瀏覽器的時候就被刪除了。

為了創(chuàng)建一個會話存儲你需要使用“sessionStorage.variablename.”在以下的代碼我們創(chuàng)建了一個名為”clickcount”的變量；

如果你刷新瀏覽器則數(shù)目增加，但是如果你關(guān)閉瀏覽器，“clickcount”變量又會從0開始。

19本地存儲和cookies（儲存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么？

	Cookies	Local storage
客戶端/服務(wù)端	客戶端和服務(wù)端都能訪問數(shù)據(jù)。Cookie的數(shù)據(jù)通過每一個請求發(fā)送到服務(wù)端	只有本地瀏覽器端可訪問數(shù)據(jù)，服務(wù)器不能訪問本地存儲直到故意通過POST或者GET的通道發(fā)送到服務(wù)器
大小	每個cookie有4095byte	每個域5MB
過期	Cookies有有效期，所以在過期之后cookie和cookie數(shù)據(jù)會被刪除	沒有過期數(shù)據(jù)，無論最后用戶從瀏覽器刪除或者使用Javascript程序刪除，我們都需要刪除