三天学会HTML5 之第一天
引言
HTML5 一直是非常热门的话题，因此此系列文章主要从一些基本功能开始讲起，逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
Reading BooksWatching moviesplaying 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 类型@H_126_45@
创建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”元素
@H_236_304@ + = 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 再次刷新网页
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3. 点击提交按钮，隐藏错误信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Week
-
-
-
-
- Date
-
-
-
-
-
-
-
引言
HTML5 一直是非常热门的话题，因此此系列文章主要从一些基本功能开始讲起，逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
Reading booksWatching moviesPlaying 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 再次刷新网页
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 3. 点击提交按钮，隐藏错误信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Week
-
-
-
-
- Date
-
-
-
-
-
-
-
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 三天学会HTML5 之第一天
本文地址： https://pptw.com/jishu/587105.html