引言
HTML 5 一直是非常 热门 的 话题 ，因此此 系列 文章 主要从一些基本功能 开始 讲起， 逐步 深入 了解 HT ML 5的新概念。
&nbs p;
首先了解一些基本的 术 语和概念。
Reading Book s Watching movies play ing g am es SGML, HTML, XM L三者之间的区别 Doc类型 是什么 HTML5 有什么新特点新优势。 学习HTML5
在开始之前首先来区分SGMC，HTML,XML 三者的概念。
SGML 即 Standard Globalized Markup Language 是用来定义标准的标记语言， 简单 的说，就是定义文档的元语言。
HTML 是基于SGML 的超链接语言，可以用于创建Web页面。在DTD 内部定义了标签的规则，DTD就是使用SGML 语言创建的。
XML 是从SGML 衍生而来的，它主要处理 互联网 方面的需求，HTML 有很多限制，XML 是SGML 的子集，可用于表示数据。
Doc 类型
创建HTML 页面时会自动生成以下代码：
这句代码简单的介绍了HTML 版本号，有了Docty PE ，就引入了对应的DTD（定义了HTML文档的组织结构），在页面中添加的所有标签才会是合法的，简单的说DTD 就是定义HTML的语法规则。
即使在没有引入DTD的情况下，很多浏览器也可以识别HTML元素，因为它们自身包含对HTML 元素的定义，这就是为什么很多开发人员没有感受到DTD 的存在。
HTML5 与之前的版本区别
HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种 全新 的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言。
HTML5 的Doctype 非常简单：
HTML5 新特性
1. 理解新的页面结构语义
HTML 旧版本并没有标准的文档定义规则，比如如何定义文档Header或Footer等，很多人都在使用p来修饰一些 CSS ，常常会导致不一致性。
HTML5 定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。
注意： 这些标签不提供特殊的渲染功能，仅仅使的HTML 文档结构更具有意义。
Lab2_ 新的输入属性
新类型值
之前为了获得不同的UI 元素，如DatePicker,range Picker,color Picker等，会使用不同的类库。
HTML5 为输入元素引入了 新属性 [type]，看以下示例：
Number
Range
Color
Date
Time
Datetime-local
DateTime (Also include time zone)
Month
Week
下面列举一些有用的属性：
Autofocus 该属性表示在页面加载时，可初始化 焦点 。… Birth Month …
上面代码实现了，当页面加载时，鼠标聚焦于&ldquo ;m yMonthElement]控件，[autofocus] 则绑定到多控件。Placeholder 新的输入控件
实验3——了解HTML5 Datalist 控件
DataList是HTML5中的新标签，能够在输入框中，实现自动完成功能。
可通过3个步骤实现：
1. 创建DataList
2. 创建输入控件，绑定List
3. 运行测试
实验 4 输出元素
HTML5 中引入标准的语义[Output]元素
@H_372_ 304 @ + = 3
实验 5,6,7-学习HTML5 验证功能
验证是开发应用最 重要 的功能，之前都会使用 jq uery 验证等功能，在新版的HTML5中提供了验证支持。
Lab5—使用输入元素的type属性，实现验证功能：
| E-m ai l: URL: Telephone Number Demo: Range Demo: Color Demo | Date Demo Time Demo DateTime Local Demo Month Demo Week Demo
|
2. 运行测试
实验6-使用自定义验证属性实现验证
1. 创建输入控件
Email User Name Age
输出：
实验7——自定义验证
通过处理oninvalid 事件完成自定义HTML5 验证功能。
1. 创建输入控件，并绑定验证属性，添加自定义 错误提示 。
Email Email Missing Invalid email User Name Username not matching w IT h pattern Age Age must be be between 10 and 50 Invalid Age
2. 添加style 标签，创建CSS 来隐藏错误信息
.invalid { display: none; } 3. 点击提交按钮，隐藏错误信息
4. 当输入控件包含非法值时触发
5. 创建Event Handler JavaScript函数
function OnInvalidEmail() { event.p rev entDefault(); VAR element = event.srcElement; var validity = element.validity; if (validity.valueMissing) { $(& # 39;.MissingEmailSpan').show(); } else if (validity.typeMismatch) { $('.InvalidEmailSpan').show(); } } event. PR eventDefault(); 会组织默认行为的发生，将错误信息置顶
event.srcElement；获取包含非法值的控件，如上的Email textbox;
element.validity; 包含控件的验证信息，如valueMissing，typeMismatch，badInput等。
6. 运行
实验8——HTML5的缓存技术
如下是简答的缓存Demo
1.创建新的ASP.NET Web 应用
2. 添加Style.css,在Block 中添加以下类：
.DivStyle { background-color:silver; } 3. 创建manifest 文本文件：
CACHE MANIFEST # ver 1 CACHE: /Styles/Style.css
4. 创建需要缓存的文件
<%@ page="" language="C#" autoeventwireup="true" codefile="MyPage.aspx.cs" inherits="MyPage">Hi, Execution count is 1
5. 运行
6. 设置离线，查看结果
7. 刷新页面
8 修改MyPage.aspx 文件，修改Myp
Hi, Execution count is 2
9. 运行程序
10. 修改manifest 文件
CACHE MANIFEST # ver 3 CACHE: /Styles/Style.css
11 再次刷新网页
引言
HTML5 一直是非常热门的话题，因此此系列文章主要从一些基本功能开始讲起，逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
Reading books Watching movies Playing games 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 的子集，可用于表示数据。
Doc 类型
创建HTML 页面时会自动生成以下代码：
这句代码简单的介绍了HTML 版本号，有了Doctype，就引入了对应的DTD（定义了HTML文档的组织结构），在页面中添加的所有标签才会是合法的，简单的说DTD 就是定义HTML的语法规则。
即使在没有引入DTD的情况下，很多浏览器也可以识别HTML元素，因为它们自身包含对HTML 元素的定义，这就是为什么很多开发人员没有感受到DTD 的存在。
HTML5 与之前的版本区别
HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言。
HTML5 的Doctype 非常简单：
HTML5 新特性
1. 理解新的页面结构语义
HTML 旧版本并没有标准的文档定义规则，比如如何定义文档Header或Footer等，很多人都在使用p来修饰一些CSS ，常常会导致不一致性。
HTML5 定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。
注意： 这些标签不提供特殊的渲染功能，仅仅使的HTML 文档结构更具有意义。
Lab2_ 新的输入属性
新类型值
之前为了获得不同的UI 元素，如DatePicker,range Picker,color Picker等，会使用不同的类库。
HTML5 为输入元素引入了新属性[type]，看以下示例：
Number
Range
Color
Date
Time
Datetime-local
DateTime (Also include time zone)
Month
Week
下面列举一些有用的属性：
Autofocus 该属性表示在页面加载时，可初始化焦点。… Birth Month …
上面代码实现了，当页面加载时，鼠标聚焦于[MyMonthElement]控件，[autofocus] 则绑定到多控件。Placeholder 新的输入控件
实验3——了解HTML5 Datalist 控件
DataList是HTML5中的新标签，能够在输入框中，实现自动完成功能。
可通过3个步骤实现：
1. 创建DataList
2. 创建输入控件，绑定List
3. 运行测试
实验 4 输出元素
HTML5 中引入标准的语义[Output]元素
+ = 3
实验 5,6,7-学习HTML5 验证功能
验证是开发应用最重要的功能，之前都会使用JQuery 验证等功能，在新版的HTML5中提供了验证支持。
Lab5—使用输入元素的type属性，实现验证功能：
| E-mail: URL: Telephone Number Demo: Range Demo: Color Demo | Date Demo Time Demo DateTime Local Demo Month Demo Week Demo
|
2. 运行测试
实验6-使用自定义验证属性实现验证
1. 创建输入控件
Email User Name Age
输出：
实验7——自定义验证
通过处理oninvalid 事件完成自定义HTML5 验证功能。
1. 创建输入控件，并绑定验证属性，添加自定义错误提示。
Email Email Missing Invalid email User Name Username not matching with pattern Age Age must be be between 10 and 50 Invalid Age
2. 添加style 标签，创建CSS 来隐藏错误信息
.invalid { display: none; } 3. 点击提交按钮，隐藏错误信息
4. 当输入控件包含非法值时触发
5. 创建Event Handler JavaScript函数
function OnInvalidEmail() { event.preventDefault(); var element = event.srcElement; var validity = element.validity; if (validity.valueMissing) { $('.MissingEmailSpan').show(); } else if (validity.typeMismatch) { $('.InvalidEmailSpan').show(); } } event.preventDefault(); 会组织默认行为的发生，将错误信息置顶
event.srcElement；获取包含非法值的控件，如上的Email textbox;
element.validity; 包含控件的验证信息，如valueMissing，typeMismatch，badInput等。
6. 运行
实验8——HTML5的缓存技术
如下是简答的缓存Demo
1.创建新的ASP.NET Web 应用
2. 添加Style.css,在Block 中添加以下类：
.DivStyle { background-color:silver; } 3. 创建manifest 文本文件：
CACHE MANIFEST # ver 1 CACHE: /Styles/Style.css
4. 创建需要缓存的文件
<%@ page="" language="C#" autoeventwireup="true" codefile="MyPage.aspx.cs" inherits="MyPage">Hi, Execution count is 1
5. 运行
6. 设置离线，查看结果
7. 刷新页面
8 修改MyPage.aspx 文件，修改Myp
Hi, Execution count is 2
9. 运行程序
10. 修改manifest 文件
CACHE MANIFEST # ver 3 CACHE: /Styles/Style.css
11 再次刷新网页
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-三天学会HTML5 之第一天 全部内容，希望文章能够帮你解决 html5教程-三天学会HTML5 之第一天 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-三天学会HTML5 之第一天的详细内容...