初识html5

表1 video元素的属性
对于video所支持的视频格式， 主要有3种：OGG，MPEG4和 WebM。
表2 audio标签的属性
新增<audio>使得浏览器不需要插件即可 播放音频
<audio controls>
<source src=“exampl e/克罗地亚狂想 曲.mp3”/>
</audio>
。
wk.baidu.com
Web存储
本地存储的数据内容不会自动发送 到服务器端，特别是Local Storage只 在本地使用，不会与服务器端发生交互， 减少了用户带宽的消耗。
离线数据存储
众所周知，Web的应用非常强大， 但是它存在一个致命的缺陷就是严重 依赖网络，没有网络的web就如离开 水的鱼儿活不下去。虽然现在网络无 处不在，但是网络信号的好坏却各不 相同。我们常常遇到掉线的情况，很 多时候掉线会带来严重的后果，那么 有什么办法能解决这个难题呢?
HTML5的表单新特性
1）新增或改进控件 2)内建表单校验功能 3）表单结构更灵活
Web存储
之前的Web应用将客户数据存储在 cookie里面，如今的Web应用已经有了 更大的需求，小存储容量的cookie已经 不能满足人们的需求。而HTML5的 Web Storage提供了更大的存储空间， 可以达到5M-10M 的存储容量。
HTML5音频、视频
之前，网页丰富的动态界面和交互 元素都要依赖插件来实现。
HTML 5新增的视频<Video> 、 音频< Audio>元素，使得这一切变 得简单，我们在观看视频、音频时不 再依赖第三方插件，直接点击播放器 就可以得到我们想要的内容。
HTML5音频、视频
通过对于video和audio标签的使 用，HTML5实现了不需要使用第三 方插件，就可以实现视频和音频的直 接播放，摆脱了长久以来Web网页 对于Flash的依赖。在HTML5 页面 上，音频和视频可以自由嵌入，不需 要对个别素材采取特殊的处理方式。
HTML5优点：
➢HTML5标准及其相关技术均免 费开放，规范并且易于推广
➢免去了安装插件的必要，减少了 用户的麻烦，提高了安全性
存在的问题：
➢移动浏览器会制约HTML5的应 用
➢HTML5的跨平台开发和移动设 备兼容性之间存在矛盾问题
未来发展趋势
HTML5规范开发完成时， 将成为主流。HTML5所展现 的魅力使得其必将力挫群雄， 独占鳌头！
画布元素——<canvas>
作为HTML标签，<canvas>仅包含 两个属性：height和width，前者定义 画布的高度，后者定义画布的宽度。
<canvas>是一个新的HTML元素， 这个元素可以被Script语言(通常是 JavaScript)用来绘制图形。例如可以用 它来画图、合成图象、或做简单的动画。 这个HTML元素是为了客户端矢量图形 而设计的。
初识HTML 5
HTML5:
1. 让你看视频不用装Flashplayer，浏览器 不再频繁崩溃，笔记本和手机更省电；
2. 让你在浏览器里玩愤怒的小鸟;
3. 让你上大众点评不用搜索，而是直接点 “附近”;
4. 让你不打字直接用语音输入文字。
......
HTML简介
HTML是一种超文本语言，它 不需要进行编译，直接由浏览 器执行。
</video>
应用：新浪新闻，腾讯新闻，搜狐新闻，爱奇艺等等。
表单增强。HTML5为表单提供了几个新的属性、
input 类型和标签。
新的属性
•required •autofocus •pattern •list •autocomplete •Placeholder •form
•规定必须在提交之前填写输入域（即不能为空） •规定在页面加载时,域自动地获得焦点 •规定用于验证input域的正则表达式 •规定输入域的datalist •规定form 或input 域应该拥有自动完成功能 •提供一种提示（hint） •规定输入域所属的一个或多个表单
HTML5中的API
HTML5加入的API可以轻松地实现非 常酷炫和强大的效果，于此同时，代码 量大幅减少。例如<Canvas>标签 <video>标签<audio>标签⋯ 这些API 让Web增加了更加强大的表现力．这也 是HTML5与HTML4最根本的区别之一。
画布元素——<canvas>
传统的显示图形或图片的方式
被取消的标签列表：<acronym>、<applet>、
<basefont>、<big>、<center>、<dir>、 <font>、<frame>、<s>、<isindex>、 <noframes>、<frameset> 、<strike>、 <tt>、<u>和<xmp>
2 ）新增了新的标签用来更加细致的描 述页面、文档结构。
在服务器端先画好图片，再把图片发 到浏览器中，或用第三方插件显示的方 式。很明显，传统的方式浪费了网络资 源，降低了响应效率。
画布元素——<canvas>
HTML5添加了新的标记Canvas后
新的Canvas API为开发者提供了大 量的有关动态图形、图表、图像和动画 的API。开发人员可以直接使用 JavaScript来处理画布中的内容，针对 用户操作实时渲染图形 。
画布元素——<canvas>
HTML5添加了新的标记Canvas来实现网 页绘图画布功能具有创建、管理和消灭像素 的能力，这使HTML5有了很强的表现力， 利用它，可以用来绘制矩形，圆形等基本的 图形，甚至可以绘制复杂的动画以及文本文 字，并直接渲染在浏览器上。
画布元素——<canvas>
HTML5对它的定义是“它是依 赖分辨率的位图画布，可以在 canvas上面绘制任意图形，甚 至加载照片。”
还有：
formaction -重写表单的action 属性 formenctype -重写表单的enctype 属性 formmethod -重写表单的method 属性 formnovalidate -重写表单的novalidate 属性 formtarget -重写表单的target 属性
等等
input类型
HTML5
HTML5提供了各种切割和划分页面 的手段，允许你创建的切割组件不仅能 用来逻辑地组织站点，还能够赋予网站 聚合的能力。
主要特征：
简化了以前的HTML格式和脚本； 取消了插件
特性
1)取消了一些过时的HTML 4标签，其 中包括已被CSS取代的纯粹用作显示效 果的标签，如<font>和<center>，以 及一些透过DOM的网络行为。
HTML5通过对input标记的type属性 的扩展新增了大量Web2.0时代的控 件。
新的标签
•<datalist> •<keygen> •<output> 比如计算或脚本输出 •<meter> •<progress>
•定义输入域的选项列表 •密钥生成器 •用于不同类型的输出，
•定义度量 •定义运行中的进度或进程
离线数据存储
HTML5强大的功能就是离线应用， 将应用数据缓存到本地浏览器中，掉线 时一样可以浏览网页。
基于HTMI 5的Web应用在客户端将数据 保存在一个本地数据存储中，通过DOM状 态判断当网络连接断开时，程序访问本地的 数据存储，在离线状态下也能对客户端数据 进行修改、可视化、搜索或排序等复杂的数 据操作；当恢复网络连接时再同步本地数据 与服务器端数据。
WEB绘图——<canvas>
➢ 基于javascript的2D绘图
➢ 基于WebGL的3D绘图
WEB绘图——<canvas>
对于canvas．主要有以下几个特征：
1)canvas只能是个矩形。 2)canvas使用JavaScfipt在Web上绘制各 种图形。 3)canvas中的每个像素都可控。 4)canvas拥有多种绘制方法。 5)canvas不需插件。
新增<audio>使得浏览器不需要插件即可播
放音频
<video width=“320”height=“240”controls preload=“none”poster=“videoframe.jpg”> <source src=“example/html5/2.mp4”type=“video/mp4”/>
Web存储
HTML5提供了两种在客户端存储数据的新方 法：
➢ localStorage 永久保存数据 ➢Session Storage 临时存储数据
在HTML5中，数据只有在请求时传递。 对于不同的网站，数据存储于不同的区域， 并且一个网站只能访问其自身的数据， HTML5使用JavaScript来存储和访问数据。
HTML5 新的功能应用:
➢绘图； ➢无插件的音频、视频支持；
➢本地数据存储； ➢离线数据存储；
HTML5中的API
新一代Web技术通过引入新的标签和 网页应用API(应用程序编程接口)，能够 在网页上运行大型应用程序。同时，新 一代Web技术还引入了地理位置、离线 缓存等新型API，以进一步丰富网页应 用程序的功能拓展。
使用这些元素，作者可以让文档页面更 加具有语义，更加易读，也可以让搜索引擎 更好的理解页面的内容和各个部分之间的关 系，应用API也能更容易、更准确细微的访问 文档对象。
新增的标签列表：<article>、
<section>、<aside>、<hgroup>、 <header>、<footer>、<nav>、<time>、 <mark>、<figure>和<figcaption>