內(nèi)容

• 介紹
• SGML（標準通用標記語言）和HTML（超文本標記語言），XML（可擴展標記語言）和HTML的之間有什么關系？
• 什么是HTML5？
• 為什么HTML5里面我們不需要DTD（Document Type Definition文檔類型定義）？
• 如果我不放入 標簽，HTML5還會工作么？
• 哪些瀏覽器支持HTML5？
• HTML5的頁面結構同HTML4或者更前的HTML有什么區(qū)別？
• HTML5中的datalist是什么？
• HTML5中哪些是不同的新的表單元素類型？
• HTML5中什么是輸出元素？
• 什么是SVG（Scalable Vector Graphics可縮放矢量圖形）？
• 我們能看到使用HTML5的SVG的簡單例子么？
• HTML5中canvas是什么？
• 我們?nèi)绾问褂肅anvas來畫一條簡單的線？
• Canvas和SVG圖形之間的區(qū)別是什么？
• 如何使用Canvas和HTML5中的SVG去畫一個矩形？
• CSS（cascading style sheets級聯(lián)樣式表）中的選擇器是什么？
• 如何使用ID值來應用一個CSS樣式？
• CSS中使用列布局是什么？
• 你能解釋一下CSS的盒子模型么？
• 你能解釋一些CSS3中的文本效果么？
• 什么是Web Workers？為什么我們需要他們？
• Web Worker線程的限制是什么？
• 我們?nèi)绾卧贘avaScript中創(chuàng)建一個worker線程？
• 如何中止Web Worker?
• 為什么我們需要HTML5的服務發(fā)送事件？
• HTML5中的本地存儲概念是什么？
• 我們?nèi)绾螐谋镜卮鎯χ刑砑雍鸵瞥龜?shù)據(jù)？
• 本地存儲的生命周期是什么？
• 本地存儲和cookies（儲存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么？
• 什么是事務存儲？我們?nèi)绾蝿?chuàng)建一個事務存儲？
• 本地存儲和事務存儲之間的區(qū)別是什么？
• 什么是WebSQL？
• WebSQL 是HTML5的一個規(guī)范嗎？
• 我們?nèi)绾问褂肳ebSQL？
• HTML5中的應用緩存是什么？
• HTML5中我們?nèi)绾螌崿F(xiàn)應用緩存？
• 我們?nèi)绾嗡⑿聻g覽器的應用緩存？
• 應用緩存中的回退是什么？
• 應用緩存中的網(wǎng)絡是什么？

介紹

我是一個ASP.NET MVC的開發(fā)者，最近在我找工作的時候被問到很多與HTML5相關的問題和新特性。所以以下40個重要的問題將幫助你復習HTML5相關的知識。

這些問題不是你得到工作的高效解決方案，但是可以在你想快速復習相關主題的時候有所幫助。

快樂地找工作。

SGML（標準通用標記語言）和HTML（超文本標記語言），XML（可擴展標記語言）和HTML的之間有什么關系？

SGML（標準通用標記語言）是一個標準，告訴我們怎么去指定文檔標記。他是只描述文檔標記應該是怎么樣的元語言，HTML是被用SGML描述的標記語言。

因此利用SGML創(chuàng)建了HTML參照和必須共同遵守的DTD，你會經(jīng)常在HTML頁面的頭部發(fā)現(xiàn)“DOCTYPE”屬性，用來定義用于解析目標DTD

現(xiàn)在解析SGML是一件痛苦的事情，所以創(chuàng)建了XML使事情更好。XML使用了SGML，例如：在SGML中你必須使用起始和結束標簽，但是在XML你可以有自動關閉的結束標簽。

XHTML創(chuàng)建于XML，他被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML DTD

總之，SGML是所有類型的父類，較舊的HTML利用SGML，HTML4.0使用派生自XML的XHTML

什么是HTML5？

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

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

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

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

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

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

哪些瀏覽器支持HTML5？

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

HTML5的頁面結構同HTML4或者更前的HTML有什么區(qū)別？

一個典型的WEB頁面包含頭部，腳部，導航，中心區(qū)域，側邊欄?，F(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內(nèi)容，我們可能要使用DIV標簽。

但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結構的HTML5元素的更多細節(jié)：

• ：代表HTML的頭部數(shù)據(jù)
• ：自包含的內(nèi)容
• ：使用內(nèi)部article去定義區(qū)域或者把分組內(nèi)容放到區(qū)域里

HTML5中的datalist是什么？

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

以下是DataList功能的HTML代碼：

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

這里有10個重要的新的表單元素在HTML5中被介紹

1. Color
2. Date
3. Datetime-local
4. Email
5. Time
6. Url
7. Range
8. Telephone
9. Number
10. Search

讓我們一步一步了解這10個元素

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

如果你想顯示日歷對話框

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

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

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

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

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

想讓文本框作為搜索引擎

想只能輸入時間

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

HTML5中什么是輸出元素？

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

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

   +
   =
  

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

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

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

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

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

下面是HTML5代碼

HTML5中canvas是什么？

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

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

• 定義Canvas區(qū)域
• 獲取訪問canvas上下文區(qū)域
• 繪制圖形

定義Canvas區(qū)域

定義Canvas區(qū)域你需要使用下面的HTML代碼，這定義了你能進行繪圖的區(qū)域

獲取畫布區(qū)域的訪問

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

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

繪制圖形

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

ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();

以下是完整的代碼

原文地址：http://www.techug.com/40-important-html-5-interview-questions-with-answers