引言
HTML5 一直是非常熱門的話題,是以此系列文章主要從一些基本功能開始講起,逐漸深入了解HTML5的新概念。
首先了解一些基本的術語和概念。
SGML, HTML,XML三者之間的差別
Doc類型是什麼
HTML5 有什麼新特點新優勢。
學習HTML5
在開始之前首先來區分SGMC,HTML,XML 三者的概念。
SGML 即 Standard Globalized Markup Language 是用來定義标準的标記語言,簡單的說,就是定義文檔的元語言。
HTML 是基于SGML 的超連結語言,可以用于建立Web頁面。在DTD 内部定義了标簽的規則,DTD就是使用SGML 語言建立的。
XML 是從SGML 衍生而來的,它主要處理網際網路方面的需求,HTML 有很多限制,XML 是SGML 的子集,可用于表示資料。
建立HTML 頁面時會自動生成以下代碼:
這句代碼簡單的介紹了HTML 版本号,有了Doctype,就引入了對應的DTD(定義了HTML文檔的組織結構),在頁面中添加的所有标簽才會是合法的,簡單的說DTD 就是定義HTML的文法規則。
即使在沒有引入DTD的情況下,很多浏覽器也可以識别HTML元素,因為它們自身包含對HTML 元素的定義,這就是為什麼很多開發人員沒有感受到DTD 的存在。
HTML5不是基于SGML 語言的,是以不需要DTD ,它是一種全新的标記語言,有自己的解析規則,HTML5的文法規則與之前版本有很大的差别,可以稱的上是一種全新的語言。
HTML5 的Doctype 非常簡單:

HTML 舊版本并沒有标準的文檔定義規則,比如如何定義文檔Header或Footer等,很多人都在使用div來修飾一些CSS ,常常會導緻不一緻性。
HTML5 定義标準tag如Header,Footer,nav,FlipCaption等。這些标簽可使得标記語言更有意義。
注意: 這些标簽不提供特殊的渲染功能,僅僅使的HTML 文檔結構更具有意義。
新類型值
之前為了獲得不同的UI 元素,如DatePicker,range Picker,color Picker等,會使用不同的類庫。
HTML5 為輸入元素引入了新屬性“type”,看以下示例:
Range
Color
Date
Time
Datetime-local
DateTime (Also include time zone)
Month
Week
下面列舉一些有用的屬性:
Autofocus 該屬性表示在頁面加載時,可初始化焦點。
Placeholder 新的輸入控件
2. 建立輸入控件,綁定List
3. 運作測試
HTML5 中引入标準的語義“Output”元素
驗證是開發應用最重要的功能,之前都會使用JQuery 驗證等功能,在新版的HTML5中提供了驗證支援。
Lab5—使用輸入元素的type屬性,實作驗證功能:
2. 運作測試
2. 添加style 标簽,建立CSS 來隐藏錯誤資訊
3. 點選送出按鈕,隐藏錯誤資訊
4. 當輸入控件包含非法值時觸發
5. 建立Event Handler JavaScript函數
6. 運作
如下是簡答的緩存Demo
1.建立新的ASP.NET Web 應用
2. 添加Style.css,在Block 中添加以下類:
3. 建立manifest 文本檔案:
4. 建立需要緩存的檔案
5. 運作
6. 設定離線,檢視結果
7. 重新整理頁面
8 修改MyPage.aspx 檔案,修改Mydiv
9. 運作程式
10. 修改manifest 檔案
11 再次重新整理網頁