首頁技術(shù)文章正文

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都可以在瀏覽器上繪制圖形。因此在這個問題中,面試官想知道你在什么時候選用哪種方式。
SVGCanvas
這個就好像繪制和記憶,換句話說任何使用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ū)別是什么?
CookiesLocal 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程序刪除,我們都需要刪除

20、我們?nèi)绾卧贘avaScript中創(chuàng)建一個worker線程?
創(chuàng)建一個worker線程,我們需要通過Javascript文件名創(chuàng)建worker對象
我們需要使用“PostMessage”發(fā)送信息給worker對象,下面是相同的代碼。
當(dāng)worker線程發(fā)送數(shù)據(jù)的時候,我們在調(diào)用結(jié)束的時候,通過”onMessage”事件獲取


這個繁重的循環(huán)在“MyHeavyProcess.js”的Javascript文件中,以下代碼,當(dāng)Javascript文件想發(fā)送信息,他使用”postmessage”,同時任何來自發(fā)送者的信息都在“onmessage”事件中接收到。





本文版權(quán)歸傳黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/ 
分享到:
在線咨詢 我要報名
和我們在線交談!