天天看點

三天學會HTML5 之第一天HTML5 新特性

引言

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 非常簡單:

三天學會HTML5 之第一天HTML5 新特性

HTML 舊版本并沒有标準的文檔定義規則,比如如何定義文檔Header或Footer等,很多人都在使用div來修飾一些CSS ,常常會導緻不一緻性。

三天學會HTML5 之第一天HTML5 新特性

HTML5 定義标準tag如Header,Footer,nav,FlipCaption等。這些标簽可使得标記語言更有意義。

注意: 這些标簽不提供特殊的渲染功能,僅僅使的HTML 文檔結構更具有意義。

三天學會HTML5 之第一天HTML5 新特性

新類型值

之前為了獲得不同的UI 元素,如DatePicker,range Picker,color Picker等,會使用不同的類庫。

HTML5 為輸入元素引入了新屬性“type”,看以下示例:

三天學會HTML5 之第一天HTML5 新特性

Range

三天學會HTML5 之第一天HTML5 新特性

Color

三天學會HTML5 之第一天HTML5 新特性

Date

三天學會HTML5 之第一天HTML5 新特性

Time

三天學會HTML5 之第一天HTML5 新特性

Datetime-local

三天學會HTML5 之第一天HTML5 新特性

DateTime (Also include time zone)

三天學會HTML5 之第一天HTML5 新特性

Month

三天學會HTML5 之第一天HTML5 新特性

Week

三天學會HTML5 之第一天HTML5 新特性

下面列舉一些有用的屬性:

Autofocus 該屬性表示在頁面加載時,可初始化焦點。

Placeholder 新的輸入控件

三天學會HTML5 之第一天HTML5 新特性

2. 建立輸入控件,綁定List

3. 運作測試

三天學會HTML5 之第一天HTML5 新特性

HTML5 中引入标準的語義“Output”元素

驗證是開發應用最重要的功能,之前都會使用JQuery 驗證等功能,在新版的HTML5中提供了驗證支援。

Lab5—使用輸入元素的type屬性,實作驗證功能:

2. 運作測試

三天學會HTML5 之第一天HTML5 新特性
三天學會HTML5 之第一天HTML5 新特性

2.  添加style 标簽,建立CSS 來隐藏錯誤資訊

3. 點選送出按鈕,隐藏錯誤資訊

4. 當輸入控件包含非法值時觸發

5. 建立Event Handler JavaScript函數

6. 運作

三天學會HTML5 之第一天HTML5 新特性

如下是簡答的緩存Demo

1.建立新的ASP.NET Web 應用

2. 添加Style.css,在Block 中添加以下類:

3. 建立manifest 文本檔案:

4. 建立需要緩存的檔案

5. 運作

三天學會HTML5 之第一天HTML5 新特性

6. 設定離線,檢視結果

三天學會HTML5 之第一天HTML5 新特性

7. 重新整理頁面

8 修改MyPage.aspx 檔案,修改Mydiv

9. 運作程式

10. 修改manifest 檔案

11 再次重新整理網頁

繼續閱讀