天天看点

三天学会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 再次刷新网页

继续阅读