HTML5在線測驗10題，很多人看到題目都有點懵

TML5技術對于產(chǎn)品經(jīng)理來說真的很炫，很酷，對于編程者來說，這都是心血設計啊。以下H5測驗提供了與HTML5框架相關的多選題（MCQ）。如果自認為自己學到了點東西，那么自己測試一下吧。

Q1- 以下哪個瀏覽器在最新版本中支持HTML5？

A- 蘋果野生動物園

B- Google Chrome

C- 以上兩種。

D- 以上都沒有。

Q 2- 以下哪個標記代表用于在HTML5中導航的文檔的一部分？

A- 頁腳

B- 導航

C節(jié)

D- 對話框

Q 3- 以下哪個輸入控件僅接受Web Form 2.0中的數(shù)值？

A-周

B時間

C號

D-范圍

Q 4- 以下哪個標記為用戶提供HTML5中可以輸入的內(nèi)容？

A- 輸出

B- 占位符

C- 自動對焦

D- 必需

Q5- 會話存儲數(shù)據(jù)在HTML5中被刪除？

A- 在會話終止后，會話存儲數(shù)據(jù)將被瀏覽器刪除。

B- 如果要清除所有設置，您需要調(diào)用localStorage.clear（）方法。

C- 以上兩種。

D- 以上都沒有。

Q 6- HTML5中的“音頻”標簽中有哪些是真實的？

A- 支持常用的音頻格式ogg，mp3和wav。

B- 您可以使用<source>標簽來指定媒體以及媒體類型和許多其他屬性。

C- 音頻元素允許多個源元素和瀏覽器將使用第一個識別的格式。

D- 以上所有。

Q 7- 以下屬性用于分組項目？

A- 項目

B- itemprop

C- 項目檢查

D- 項目組

Q 8- 當窗口失去焦點時，以下哪個屬性觸發(fā)事件？

A- onbeforeload

B- onblur

C- onlostfocus

D- 失物招領

Q 9- 當元素被拖動到有效的放置目標上時，以下屬性中的哪一個觸發(fā)事件？

A- ondragleave

B- ondrag

C-ondragover

D- ondragstart

Q 10- 當文檔脫機時，以下屬性中的哪一個觸發(fā)事件？

A-載入的元數(shù)據(jù)

B- onloadstart

C- 消息

D- onoffline

十道題的答案，建議大家先看題，最后在看答案：

答案：C 說明：以上瀏覽器均支持HTML5。

答案：B 說明：'nav'標簽表示用于導航的文檔的一部分。

答案：C 說明：'number'輸入控件只接受數(shù)值。step屬性指定精度，默認為1。

答案：B 說明：HTML5引入了一個名為placeholder的新屬性。<input>和<textarea>元素上的此屬性為用戶提供了可在字段中輸入的內(nèi)容。占位符文本不能包含回車符或換行符。

答案：A 說明:在會話終止后，會話存儲數(shù)據(jù)將被瀏覽器刪除。

答案：D 說明:所有上述選項都是正確的。

答案：B 說明:itemprop - 用于分組項目。

答案：B 說明:onblur - 當窗口失去焦點時觸發(fā)事件。

答案：C 說明:ondragover - 當元素被拖動到有效的放置目標上時觸發(fā)事件。

答案：D說明:onoffline - 當文檔脫機時觸發(fā)事件。

最后想問問10道題都答對的有幾個呢？歡迎下方留言和學技巧一起探討學習H5技術。

TML稱為超文本標記語言，是一種標識性的語言。在前端開發(fā)中離不開HTML，支持不同數(shù)據(jù)格式的文件鑲?cè)耄岸斯こ處熢诿嬖囘^程中涉及到一些基礎知識，常見的前端HTML5面試題有哪些呢？

本文，千鋒武漢Web前端培訓小編分享一些HTML5面試題及答案。準備參加web前端面試的小伙伴們來看一看吧，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

1、什么是 HTML5？

HTML5是HTML(超文本標記語言)的最新版本。它是一種為萬維網(wǎng)構建和顯示內(nèi)容的語言，萬維網(wǎng)是互聯(lián)網(wǎng)的核心技術。WHATWG(Web超文本應用技術工作組)另一次W3C個人聚會認為，W3C沒有認真考慮當前方言的現(xiàn)實改進需求，它已經(jīng)開始處理HTML-HTML5的新確定。因此，HTML5是HTML 4.01和XHTML 1.0的另一種改編，它集中于Web應用程序設計者的必要性上，并且還傾向于在當前細節(jié)中發(fā)現(xiàn)的問題。

具體而言，HTML5包含許多新的句法特征。新元素，如<section>, <article>, <header>和<nav>，是文檔語義實質(zhì)的重要組成部分。它們還包含<section>, <article>, <header>和<canvas>標記，以及SVG內(nèi)容的集成。這些組件旨在簡化合并和處理網(wǎng)絡上的交互式媒體和圖形內(nèi)容，而無需訴諸限制性模塊和API。少數(shù)成分和性狀已被排出。一些組件，例如，<video>, <audio>和<menu>已經(jīng)被更改、重新定義或標準化。API和DOM不再被重新考慮，而是HTML5規(guī)范的基本部分。

2、什么是<!DOCTYPE >？是否需要在HTML5中使用？

<!DOCTYPE>是關于頁面寫入了什么版本的HTML的指令。<!DOCTYPE>標記沒有結束標記，它不區(qū)分大小寫。<!DOCTYPE>聲明必須是HTML5文檔中的第一行，在標記之前。如HTML 4.01，全部<!DOCTYPE>聲明需要引用文檔類型定義(DTD)，因為HTML 4.01是基于標準通用標記語言(SGML)的。而HTML5并不基于SGML，因此不需要對文檔類型定義(DTD)的引用。

3、HTML5有哪些的新特性？

HTML5中最有趣的新特性：

* 二維畫圖中的<canvas>元素

* 媒體播放的<video> 和<audio>元素

* 支持本地存儲

* 新的內(nèi)容特定元素，如<section>，<article>，<footer>，<header>，<nav>，<menu>

4、HTML5的優(yōu)勢有哪些？

一些網(wǎng)絡研究的前5名似乎提供了以下HTML5特性;

* 相關性

* 標記/代碼簡潔

* 語義清晰

* 簡明的表單和網(wǎng)絡應用程序

* 緩存式離線應用程序

5、Canvas是什么？怎樣寫Canvas？

Canvas是HTML5的一個元素，它使用JavaScript在網(wǎng)頁上繪制圖形。Canvas是一個矩形區(qū)域。它的每一個像素都可以由HTML5語言來控制。使用Canvas繪制路徑、框、圓、字符和添加圖像有幾種方法。如果要在我們的HTML文檔中添加Canvas標簽，我們需要ID、寬度和高度。下面是如何將基本Canvas標簽寫入HTML文檔的示例。

6、HTML5地理定位是什么？如何使用？

HTML5 地理定位用于定位用戶的位置HTML5 地理定位API用于獲取用戶的地理位置。由于這會侵犯用戶隱私，除非用戶批準，否則該位置不可用。使用 getCurrentPosition() 方法獲取用戶的位置。下面的示例是返回用戶位置的緯度和經(jīng)度的簡單地理定位示例：

7、使用HTML5需要遵守哪些規(guī)則？

* 新的特性應該基于HTML、CSS、DOM和JavaScript

* 減少對外部插件的需求(如Flash)

* 更好的錯誤處理

* 更多的替換腳本的標記

* HTML5應與設備無關

* 開發(fā)過程必須可視化

8、HTML5中的Session storage存儲對象是什么？如何創(chuàng)建和訪問？

Session storage 存儲對象存儲一個會話的數(shù)據(jù)。當用戶關閉瀏覽器窗口時，數(shù)據(jù)將被刪除。如下所示，我們可以在這里創(chuàng)建“blogName”作為會話并訪問Session storage<script type="text/javascript"> sessionStorage.blogName="OnlineInterviewQuestions"; document.write(sessionStorage.name); </script>

9、Html5應用程序緩存和Html瀏覽器緩存有什么區(qū)別？

新的HTML5規(guī)范允許瀏覽器在連接客戶端時預取一些或全部網(wǎng)站資產(chǎn)，如HTML文件、圖像、CSS、JavaScript等。對于獲取此內(nèi)容，用戶以前沒有必要訪問此內(nèi)容。換句話說，應用程序緩存可以預取完全未被訪問的頁面，從而在常規(guī)瀏覽器緩存中不可用。預取文件可以加速站點的性能，盡管您最初使用帶寬下載這些文件。

10、簡要描述下最新的HTML5標準中的API是什么？

下面是HTML 5標準提供的新API列表。* Canvas ：Canvas 由HTML代碼中定義的具有高度和寬度屬性的可繪制區(qū)域組成。JavaScript代碼可以通過一組完整的繪圖函數(shù)訪問該區(qū)域，這與其他常見的2DAPI類似，因此允許動態(tài)生成圖形。Canvas 的一些預期用途包括構建圖形、動畫、游戲和圖像合成。

* 定時媒體回放

* 離線存儲數(shù)據(jù)庫

* 文檔編輯

* 拖放

* 跨文檔消息傳遞

* 瀏覽器歷史管理

* MIME類型和協(xié)議處理程序注冊

11、LocalStorage本地存儲在HTML5中有什么用途？

LocalStores 本地存儲就是一個輕量級的sqllite數(shù)據(jù)庫。可以在客戶端本地存儲數(shù)據(jù)，用于在斷開網(wǎng)絡連接的情況下讀取本地緩存cookies，LocalStores可以將數(shù)據(jù)長期保存在客戶端，直至人工清除為止，接下來演示下實例：

1、使用localStorage對象保存數(shù)據(jù)：

localStorage.setItem(key , value)

2、使用localStorage獲取保存的數(shù)據(jù)：

localStorage.getItem(key)

3、清除localStorage保存的數(shù)據(jù)：

localStorage.removeItem(key)

4、清除全部localStorage對象保存的數(shù)據(jù)：

localStorage.clear( )

12、你能列出HTML5中新的輸入類型屬性嗎？

search：用于搜索域，比如站點搜索或 Google 搜索，域顯示為常規(guī)的文本域。

url ：用于應該包含 URL 地址的輸入域在提交表單時，會自動驗證 url 域的值。

email：用于應該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值。

datetime：選取時間、日、月、年(UTC 時間)

date：選取日、月、年

month：選取月、年

week：選取周和年

time：選取時間(小時和分鐘)

datetime-local：選取時間、日、月、年(本地時間)

number：用于應該包含數(shù)值的輸入域，您還能夠設定對所接受的數(shù)字的限定。

range：用于應該包含一定范圍內(nèi)數(shù)字值的輸入域，類型顯示為滑動條。

以上千鋒武漢Web前端培訓小編僅介紹了部分Web前端HTML面試題及答案，如果想要在眾多競爭者中脫穎而出，除了專業(yè)技能還需要掌握一些求職面試的技巧，在面試過程中爭取更多的主動權。關注“武漢千鋒”微信公眾號，會定期為大家分享最新Web前端面試題、發(fā)展趨勢、學習資料，助力大家學好Web前端。

如果你也想快速學好Web前端，可以來千鋒武漢Web前端培訓，更可以申請兩周免費試聽課程，讓你親身實地感受高品質(zhì)面授教學。

千鋒武漢Web前端培訓課程以實戰(zhàn)項目驅(qū)動教學，結合時下流行技術，加入大數(shù)據(jù)可視化內(nèi)容，同時深化了PHP+MySQL開發(fā)內(nèi)容，精準匹配企業(yè)線下及未來需求，除了培養(yǎng)學員的開發(fā)技術，著力培養(yǎng)學員的大前端視角與全棧思維，深度貫穿前端后端開發(fā)，緊貼主流企業(yè)一線需求，助力千鋒學員畢業(yè)即高薪就業(yè)。

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區(qū)別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節(jié)

nav：定義只包含導航鏈接的章節(jié)

header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內(nèi)容關聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁；

d. 便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

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

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

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

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

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

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標準的網(wǎng)頁，

Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設計的網(wǎng)頁。

7、HTML與XHTML——二者有什么區(qū)別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失

h. sessionStorage 的數(shù)據(jù)在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；

9、iframe的優(yōu)缺點？

優(yōu)點：

a. 解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產(chǎn)生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區(qū)別？

在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

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

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網(wǎng)絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

在線咨詢

上一篇：SpringSecurity（一）源碼分析及認證流程
下一篇：請避免犯這9個常見的 CSS “壞習慣”

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商