引言

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 的子集，可用于表示数据。

     

    Doc 类型

    创建HTML 页面时会自动生成以下代码：

     

• •  

    这句代码简单的介绍了HTML 版本号，有了Doctype，就引入了对应的DTD（定义了HTML文档的组织结构），在页面中添加的所有标签才会是合法的，简单的说DTD 就是定义HTML的语法规则。

    即使在没有引入DTD的情况下，很多浏览器也可以识别HTML元素，因为它们自身包含对HTML 元素的定义，这就是为什么很多开发人员没有感受到DTD 的存在。

    HTML5 与之前的版本区别

    HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言。

    HTML5 的Doctype 非常简单：

• • HTML5 新特性

    

     

    1. 理解新的页面结构语义

    HTML 旧版本并没有标准的文档定义规则，比如如何定义文档Header或Footer等，很多人都在使用div来修饰一些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

            
                 
             Reading books    
             Watching movies    
             Playing games
            

     

• • 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 来隐藏错误信息

• • 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 1CACHE:/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 文件，修改Mydiv

            
                 Hi, Execution count is 2
            

• • 9. 运行程序

    10. 修改manifest 文件

    CACHE MANIFEST# ver 3CACHE:/Styles/Style.css

     

• 11 再次刷新网页