html5.docx

ondragstart="drag（event）"width="336"height="69"/>

10.HTML5画布

HTML5的canvas元素使用JavaScript在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

画布标签canvas

代码示例

varc=document.getElementById（"myCanvas"）;

varcxt=c.getContext（"2d"）;

cxt.fillStyle="#FF0000";

cxt.fillRect（0,0,150,75）;

11.HTML5SVG

Html5支持内联SVG。

SVG指可伸缩矢量图形（ScalableVectorGraphics）

SVG用于定义用于网络的基于矢量的图形

SVG使用XML格式定义图形

SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

SVG是万维网联盟的标准

SVG的优势：

SVG图像可通过文本编辑器来创建和修改

SVG图像可被搜索、索引、脚本化或压缩

SVG是可伸缩的

SVG图像可在任何的分辨率下被高质量地打印

SVG可在图像质量不下降的情况下被放大

代码示例：

DOCTYPEhtml>

//www.w3.org/2000/svg"version="1.1"height="190">

style="fill:

lime;stroke:

purple;stroke-width:

5;fill-rule:

evenodd;"/>

12.HTML5地理定位

HTML5Geolocation（地理定位）用于定位用户的位置。

代码示例：

13.HTML5WEB存储

Web存储用于在客户端存储数据。

HTML5提供了两种在客户端存储数据的新方法：

localStorage-没有时间限制的数据存储

sessionStorage-针对一个session的数据存储

之前，这些都是由cookie完成的。

但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。

在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。

它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5使用JavaScript来存储和访问数据。

localStorage方法

localStorage方法存储的数据没有时间限制。

第二天、第二周或下一年之后，数据依然可用。

如何创建和访问localStorage：

代码示例：

localStorage.lastname="Smith";

document.write（localStorage.lastname）;

sessionStorage方法

sessionStorage方法针对一个session进行数据存储。

当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个sessionStorage：

代码示例：

sessionStorage.lastname="Smith";

document.write（sessionStorage.lastname）;

14.HTML5应用缓存

使用HTML5，通过创建cachemanifest文件，可以轻松地创建web应用的离线版本。

应用缓存的优势：

离线浏览-用户可在应用离线时使用它们

速度-已缓存资源加载得更快

减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。

15.HTML5表单

HTML5增加了一些新的表单输入类型，新的输入类型提供了更好的输入验证和控制。

9.1表单类型

新的表单输入类型有：

Emailurlnumberrange

Datepicker（datemonthweektimedatetime）

Searchcolor

代码示例：

E-mail:

Homepage:

Points:

Date:

9.2表单元素

元素规定输入域的选项列表。

列表是通过datalist内的option元素创建的。

如需把datalist绑定到输入域，请用输入域的list属性引用datalist的id：

代码示例：

Webpage:

//www.W3S"/>

9.3表单属性

新的form属性：

autocomplete

novalidate

新的input属性

autocomplete

autofocus

form

formoverrides（formaction,formenctype,formmethod,formnovalidate,formtarget）

height和width

list

min,max和step

multiple

pattern（regexp）

placeholder

required

9.3.1autocomplete

autocomplete属性规定form或input域应该拥有自动完成功能。

代码示例：

Firstname:

Lastname:

E-mail:

9.3.2autofocus

autofocus属性规定在页面加载时，域自动地获得焦点。

autofocus属性适用于所有标签的类型。

示例代码：

Username:

9.3.3form

form属性规定输入域所属的一个或多个表单。

form属性适用于所有标签的类型。

Firstname:

Lastname:

9.3.4表单重写属性

表单重写属性（formoverrideattributes）允许您重写form元素的某些属性设定。

formaction-重写表单的action属性

formenctype-重写表单的enctype属性

formmethod-重写表单的method属性

formnovalidate-重写表单的novalidate属性

formtarget-重写表单的target属性

示例代码：

E-mail:

list属性规定输入域的datalist。

datalist是输入域的选项列表。

list属性适用于以下类型的标签：

text,search,url,telephone,email,datepickers,number,range以及color。

Webpage:

9.3.5表单约束

min、max和step属性用于为包含数字或日期的input类型规定限定（约束）。

max属性规定输入域所允许的最大值。

min属性规定输入域所允许的最小值。

step属性为输入域规定合法的数字间隔（如果step="3"，则合法的数是-3,0,3,6等）。

注释：

min、max和step属性适用于以下类型的标签：

datepickers、number以及range。

Points:

9.3.6multiple

multiple属性规定输入域中可选择多个值。

multiple属性适用于以下类型的标签：

email和file。

Selectimages:

9.3.7novalidate

novalidate属性规定在提交表单时不应该验证form或input域。

novalidate属性适用于

以及以下类型的标签：

text,search,url,telephone,email,password,datepickers,range以及color

E-mail:

9.3.8pattern

pattern属性规定用于验证input域的模式（pattern）。

模式（pattern）是正则表达式。

您可以在我们的JavaScript教程中学习到有关正则表达式的内容。

注释：

pattern属性适用于以下类型的标签：

text,search,url,telephone,email以及password。

Countrycode:

pattern="[A-z]{3}"title="Threelettercountrycode"/>

9.3.9placeholder

placeholder属性提供一种提示（hint），描述输入域所期待的值。

注释：

placeholder属性适用于以下类型的标签：

text,search,url,telephone,email以及password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失

9.3.10required

req