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

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

A- 蘋果野生動物園

B- Google Chrome

C- 以上兩種。

D- 以上都沒有。

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

A- 頁腳

B- 導航

C節

D- 對話框

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

A-周

B時間

C號

D-范圍

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

A- 輸出

B- 占位符

C- 自動對焦

D- 必需

Q5- 會話存儲數據在HTML5中被刪除？

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

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

C- 以上兩種。

D- 以上都沒有。

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

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

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

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

D- 以上所有。

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

A- 項目

B- itemprop

C- 項目檢查

D- 項目組

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

A- onbeforeload

B- onblur

C- onlostfocus

D- 失物招領

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

A- ondragleave

B- ondrag

C-ondragover

D- ondragstart

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

A-載入的元數據

B- onloadstart

C- 消息

D- onoffline

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

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

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

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

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

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

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

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

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

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

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

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

機、平板燈手持設備的增多，網站要順應變化，就必須要做響應式開發，響應式網站最大的特點在于可以在不同設備下呈現不同的布局，是基于html5+css3技術，目前越來越多的網站開始采用了響應式設計，而下面15款工具可以方便測試你的html5響應式效果。

Responsinator

http://www.responsinator.com/

Responsinator提供了大家在不同設備viewport下查看網站效果的特性，提供了iphone，android，ipad，kindle及其多種設備上的預覽效果，你可以方便的看到需要支持的設備的響應式設計效果圖。

Responsive.is

http://responsive.is/

responsive提供了5種設備下的預覽效果展示

Kuapingce

http://www.kuapingce.com/

跨屏測 取自“跨屏”+“評測”，結合在一起取名 跨屏測，網址是跨屏測的拼音 ，創建于2015年12月。它是國內首個致力于跨屏幕響應式測試的工具類的產品，目的是為了幫助你查看你的網站的跨屏幕（響應式）效果，跨屏測收集了主流屏幕的尺寸大小，方便你快速了解網站在不同設備下的樣子。

Responsive Web Design Testing Tool

http://mattkersley.com/responsive/

類似responsivator，但是界面更簡單

Responsivepx

http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars

允許你用拖動的方式來修改窗口大小，模擬不同的設備屏幕

screenqueri.es

http://screenqueri.es/

它支持localhost本地方式測試你的應用或者網站。

Aptus

https://itunes.apple.com/gb/app/aptus/id510487565?mt=12

一個工具類的瀏覽器，可以幫助你測試響應式設計

Bricss

http://www.benjaminkeen.com/open ... design-bookmarklet/

一個幫助你測試響應式的書簽，你可以方便的整合到你的瀏覽器里

Izilla Media Query Debugger

http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

這個js可以幫助你添加偽元素到body元素上用來偵測寬高 ，當然你也可以使用他們提供的bookmark：http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

Screenfly

http://quirktools.com/screenfly/

支持4種設備的在線響應式設計測試工具，并且還提供相關開發的設計圖和文檔。

ViewPort Resizer

http://lab.maltewassermann.com/viewport-resizer/

另外一個書簽式的工具

Jresizer

http://www.toddmotto.com/jresize ... ponsive-development

一個jQuery的響應式開發工具插件，幫助你創建響應式的窗口，方便你的開發和設計流程

Resize My Browser

http://resizemybrowser.com/

一個簡單的幫助你創建指定寬高新開窗口的web工具

juicer

http://juicecreative.co.uk/juicer/website/index.php

一個在線的展示響應式的工具，支持iphone，android等設備的顯示，帶有實物圖。

ish

http://bradfrostweb.com/demo/ish/

一個比較新的在線查看響應式效果的web工具，支持不同尺寸的展示。

原文地址：http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059