HTML5

HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法（严格意义上说，这么叫并不合适，但是已经这么叫开了，就将错就错了）。

  :

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：

:用于绘画的 canvas 元素。

:用于媒介回放的 video 和 audio 元素

:对本地离线存储的更好的支持。

:新的特殊内容元素，比如 article、footer、header、nav、section。

:新的表单控件，比如 calendar、date、time、email、url、search。

一.HTML5 的改进

新元素

新属性

完全支持 CSS3

Video 和 Audio

2D/3D 制图

本地存储

本地 SQL 数据

Web 应用

http:/ /

二.HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。

HTML5 <video>

HTML5 <audio>

三.HTML5 应用

使用 HTML5 你可以简单地开发应用

本地数据存储

访问本地文件

本地 SQL 数据

缓存引用

Javascript 工作者

XHTMLHttpRequest 2

四.HTML5 图形

使用 HTML5 你可以简单的绘制图形:

使用 <canvas> 元素。

使用内联 SVG。

使用 CSS3 2D 转换、CSS3 3D 转换。

五.HTML5 使用 CSS3

新选择器

新属性

动画

2D/3D 转换

圆角

阴影效果

可下载的字体

  :

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

1.header,2. section,3. footer,4. aside,5. nav,6. main,7. article,8. figure 

  ：

HTML5 新元素

<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。

新多媒体元素：

<audio>，定义音频内容。

<video>定义视频（video 或者 movie）。

<source>，定义多媒体资源 <video> 和 <audio>。

<embed>，定义嵌入的内容，比如插件。

<track>，为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素：

<datalist>，定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<keygen>，规定用于表单的密钥对生成器字段。

<output>，定义不同类型的输出，比如脚本的输出。

新的语义和结构元素：

HTML5提供了新的元素来创建更好的页面结构。

<article>，定义页面独立的内容区域。

<aside>，定义页面的侧边栏内容。

<bdi>，允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command>，定义命令按钮，比如单选按钮、复选框或按钮

<details>，用于描述文档或文档某个部分的细节

<dialog>，定义对话框，比如提示框

<summary>，标签包含 details 元素的标题

<figure>，规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption>，定义 <figure> 元素的标题

<footer>，定义 section 或 document 的页脚。

<header>，定义了文档的头部区域

<mark>，定义带有记号的文本。

<meter>，定义度量衡。仅用于已知最大和最小值的度量。

<nav>，定义导航链接的部分。

<progress>，定义任何类型的任务的进度。

<ruby>，定义 ruby 注释（中文注音或字符）。

<rt>，定义字符（中文注音或字符）的解释或发音。

<rp>，在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<section>，定义文档中的节（section、区段）。

<time>，定义日期或时间。

<wbr>，规定在文本中的何处适合添加换行符。

  ：

HTML5 Canvas(画布)：

<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。

<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas>标签定义图形，只是图形容器，比如图表和其他图像，您必须使用脚本来绘制图形。

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

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制，注意: 默认情况下 <canvas> 元素没有边框和内容。

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。

Javascript中的<fillRect(填充)(上下,左右,宽度,高度)。

实例解析:

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

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

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

Canvas 坐标：

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas 路径：

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条的 "开始坐标"。

lineTo(x,y) 定义线条的 "结束坐标"。

stroke()，绘制线条。

  ：

在canvas中绘制圆形, 我们将使用以下方法:

beginPath()，绘制圆形。

arc(x,y,r,start,stop)(左右，上下，大小，开始点，停止点)

 ：

Canvas - 文本：

使用 canvas 绘制文本，重要的属性和方法如下：

font，定义字体。

fillText(text,x,y)，在 canvas 上绘制实心的文本。

strokeText(text,x,y)，在 canvas 上绘制空心的文本(描边的)。

  ：

Canvas - 渐变：

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1)，创建线条渐变。

createRadialGradient(x,y,r,x1,y1,r1)，创建一个径向/圆渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

  ：

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)。

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

  ：

HTML5 内联 SVG

HTML5 支持内联 SVG。

一.什么是SVG？：

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。

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

SVG 使用 XML 格式定义图形。

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

SVG 是万维网联盟的标准。

二.SVG优势：

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

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

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

SVG 是可伸缩的。

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

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

三.SVG 与 Canvas两者间的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

  ：

HTML5 MathML(数学标记语言)

HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。

MathML是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写 "数学符号" 和 "公式" 的置标语言。

  ：

HTML5 拖放（Drag(拖拽) 和 Drop(放下)）

拖放（Drag 和 drop）是 HTML5 标准的组成部分

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

首先，为了使元素可拖动，把 draggable 属性设置为 true 。

ondragover 事件规定在何处放置被拖动的数据。

  ：

HTML5 Geolocation（地理定位）

用于定位用户的位置。

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

请使用 getCurrentPosition()，方法来获得用户的位置。

getCurrentPosition()，方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。

Permission denied，用户不允许地理定位。

Position unavailable，无法获取当前位置。

Timeout，操作超时。

给定位置的信息：

更新本地信息。

显示用户周围的兴趣点。

交互式车载导航系统 (GPS)。

getCurrentPosition() 方法 - 返回数据：

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

   属性                      描述

coords.latitude，十进制数的纬度。

coords.longitude，十进制数的经度。

coords.accuracy，位置精度。

coords.altitude，海拔，海平面以上以米计。

coords.altitudeAccuracy，位置的海拔精度。

coords.heading，方向，从正北开始以度计。

coords.speed，速度，以米/每秒计。

timestamp，响应的日期/时间。

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch()，停止 watchPosition() 方法。

  ：

HTML5 Video(视频)

很多站点都会使用到视频. HTML5 提供了展示视频的标准。

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video> 元素提供了 播放、暂停和音量控件来控制视频，同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

  ：

HTML5 Audio(音频)

HTML5 提供了播放音频文件的标准。

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

  ：

HTML5 新的 Input 类型：

color，类型用在input字段主要用于选取颜色。

date，类型允许你从一个日期选择器选择一个日期。

datetime，类型允许你选择一个日期（UTC 时间）。

atetime-local，类型允许你选择一个日期和时间 (无时区)。

email，类型用于应该包含 e-mail 地址的输入域。

month，类型允许你选择一个月份。

number，类型用于应该包含数值的输入域,您还能够设定对所接受的数字的限定1-5。

range，类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。

search，类型用于搜索域，比如站点搜索或 Google 搜索。

tel，定义输入电话号码字段。

time，类型允许你选择一个时间。

url，类型用于应该包含 URL 地址的输入域。

week，类型允许你选择周和年。

  ：

HTML5 表单元素:

<datalist>，元素规定输入域的选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<keygen>，元素的作用是提供一种验证用户的可靠方法，规定用于表单的密钥对生成器字段加密。

<output>，元素用于不同类型的输出，比如计算或脚本输出。

HTML5 新的表单属性:

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

autocomplete，属性有可能在 form元素中是开启的，而在input元素中是关闭的

novalidate，属性是一个 boolean(布尔) 属性.

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

autofocus，属性是一个 boolean 属性.

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

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

The formaction，属性用于描述表单提交的URL地址

The formaction，属性会覆盖<form> 元素中的action属性

注意: The formaction 属性用于 type="submit" 和 type="image"

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

主要: 该属性与 type="submit" 和 type="image" 配合使用。

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的 method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与type="submit" 和 type="image"配合使用.

 height 和 width 属性只适用于 image 类型的<input> 标签 图标

 list 属性规定输入域的 datalist。datalist 是输入域的选项列表

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

 multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签：email 和 file:

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password

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

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值。

  ：

HTML5中新的语义元素：

语义= 意义，语义元素 = 有意义的元素。

<section>，标签定义文档中的节（section、区段）。章节、页眉、页脚或文档中的其他部分

<article>，标签定义独立的内容

<nav>，标签定义导航链接的部分，<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 其元素中。

<aside>，标签定义页面主区域内容之外的内容（比如侧边栏），<aside>标签的内容应与主区域的内容相关。

<header>元素描述了文档的头部区域，<header>元素主要用于定义内容的介绍展示区域。

<footer> 元素描述了文档的底部区域，<footer> 元素应该包含它的包含元素，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

<figure>标签规定独立的流内容（图像、图表、照片、代码等等），<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题，<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

  ：

HTML5 Web 存储：

HTML5 web 存储，一个比cookie更好的本地存储方式。

客户端存储数据的两个对象为：

localStorage，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

sessionStorage 方法针对一个 session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

网站列表程序实现以下功能：

可以输入网站名，网址，以网站名作为key存入localStorage

根据网站名，查找网址

列出当前已保存的所有网站

HTML5 Web SQL 数据库：

Web SQL 数据库 API 并不是HTML规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的 SQL 查询

HTML5 应用程序缓存：

应用程序缓存为应用带来三个优势：

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

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

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

  ：

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

1. 数据库名称

2. 版本号

3. 描述文本

4. 数据库大小

5. 创建回调

第五个参数，创建回调会在创建数据库后被调用。

  ：

HTML5 应用程序缓存

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

什么是应用程序缓存（Application Cache）？：

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

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

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

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

  ：

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？：

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

  ：

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

Server-Sent 事件 - 单向消息传递：

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。