HTML5应用

---

HTML5简介

HTML5 是下一代的 HTML。
HTML5新特征

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如
  calendar、date、time、email、url、search

HTML5 的一些规则：

• 新特性应该基于 HTML、CSS、DOM 以及JavaScript。
• 减少对外部插件的需求（比如 Flash）
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5 应该独立于设备
• 开发进程应对公众透明

浏览器支持
最新版本的 Safari、Chrome、Firefox 、 Opera、都会支持 HTML5的特性。

HTML5客户端验证

HTML5为表单空间新增了几个输入校验属性，可以代替此前JavaScript的功能

实验：完成一个图书查询的验证。

验证要求

输入格式：

• 图书名称 ：应为6-12个字符；
• 图书ISBN：“3个数字-1个数字-3个数字-5个数字”，示例 123-1-123-12345；
• 图书价格选择：最小值为20，最大值为150，间隔步长为5（间隔步长：每次调节，数字变化5）；
• 作者邮箱：验证邮箱格式是否规范；
• 图书详情：验证输入的URL格式是否正确

代码示例

	




	


HTML5表单验证
	

    
图书查询

  
	

    

      
图书名称：
      

        
*6-12个字符！
    
    

      
图书ISBN：
     
     
		 

		
例如：123-1-123-12345
    
    

      
图书价格：
		
      

    
    

      
作者邮箱：
      

    
    

      
图书详情：
      

		
    
    

         

    
	 
 

运行效果：

代码详解

《form》标签

定义和用法：

标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。

action属性：

提交表单时，向何处发送表单数据。例如：

• 绝对 URL - 指向其他站点，向其他站点发送表单数据（比如 src=“www.example.com/example.htm”）
• 相对URL - 指向站点内的文件，向站点内的文件发送表单数据（比如 src=“example.htm”）

method属性：

可设置或返回用于表单提交的 HTTP 方法。

method="post"
method="get"

GET和POST之间的主要区别如下：

• get是从服务器上获取数据，post是向服务器传送数据。

• 在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。

• 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

• GET方式提交的数据最多只能有1024字节，而POST则没有此限制。

• 安全性问题。正如在（2）中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。

  更多HTML5中的新属性

输入框验证

图书名称验证：

• type="text"设置一个文本属性的输入框
• required： 定义该输入框为必填框，否则无法提交
• pattern="[\w]{6,12}"：属性为正则表达式，通过你设定的正则表达式，来判断你输入框输入的值是否符合你的要求，如果不符合，则浏览器会弹出提示信息；
• title="*6-12个字符！"：属性为输入框提示，将鼠标悬停在输入框、输入的值不符合正则表达式所规定的的要求时，浏览器会弹出你所要提示的信息

图书ISBN验证：

• pattern="[\d]{3}[- ][\d][- ][\d]{3}[- ][\d]{5}"：要注意正则表达式格式的书写：
  在引号“”下像\d \w \S之类的元字符必须写在一个单独的中括号【】里（自己实验得来，如有错误，请指正）
• “-”此符号在【】里的输入格式为：“-” +一个空格
  图书价格设置：

• min、max的值为价格输入框的最小值和最大值，step为选择步长，也就是每增加或减少一次，数值变化为5.
• 这三种属性只对数值类型、日期类型、元素有效；

图书邮箱、URL（链接）验证：

这两个时属于HTML5中新增的Input类型，直接引用即可

HTML5 新的 Input 属性

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

代码示例

  
    

      
颜色选择器：
      

    
    

      
日期选择器：
      

    
    

      
时间选择器：
      

    
    

      
UTC日期、时间选择器：
      

    
    

      
本地日期、时间选择器：
      

    
    

      
第几周：
      

    
    

      
月份选择器：
      

    
    

      
E-mail输入框：
      

    
    

      
电话输入框：
      

    
    

      
URL输入框：
      

    
    

      
数字输入框：
      

    
    

      
拖动条：
      

    
    

      
搜索框：
      

    
	

            

    
  

运行效果

更多HTML5新增表单属性

Canvas画布

什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

	var canvas = document.getElementById('rect');// 获取canvas元素对应的DOM对象
	var crc2D = canvas.getContext('2d');// 获取CanvasRenderingContext2D对象
	crc2D.fillStyle = '#D3E2F5';// 设置填充颜色
	crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
	crc2D.fillStyle = '#A8C6ED';// 设置填充颜色
	crc2D.fillRect(80 ,40 , 120 , 60);// 填充一个矩形
	crc2D.strokeRect(220 , 20 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.strokeRect(280 ,40 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#0ff";// 设置线条颜色
	crc2D.lineWidth=10;// 设置线条宽度
	crc2D.lineJoin = "round";////设置线条交汇时边角为圆角
	crc2D.strokeRect(30 ,120 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#f0f";// 设置线条颜色
	crc2D.lineJoin = "bevel";// //设置线条交汇时边角为斜角
	crc2D.strokeRect(120 , 150 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.lineJoin = "miter";// //设置线条交汇时边角为尖角
	crc2D.strokeRect(220 , 130 , 120 , 60);// 绘制一个矩形边框
```

JavaScript 使用 id 来寻找 canvas 元素：

var canvas = document.getElementById('rect');// 获取canvas元素对应的DOM对象

然后，创建 context 对象：

var crc2D = canvas.getContext('2d');// 获取CanvasRenderingContext2D对象

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

crc2D.fillStyle = '#D3E2F5';// 设置填充颜色
	crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
	crc2D.fillStyle = '#A8C6ED';// 设置填充颜色
	crc2D.fillRect(80 ,40 , 120 , 60);// 填充一个矩形

理解坐标

crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
上面的 fillRect 方法拥有参数 (10 ,10 , 120 , 60)。
意思是：在画布上绘制 120x60 的矩形，从左上角开始 (10,10)。

代码示例

 绘制矩形 
 

运行效果