HTML5学习笔记

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

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


浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

*HTML5 视频格式*
HTML5 规定了一种通过 video 元素来包含视频的标准方法。当前，video 元素支持三种视频格式：Ogg,MPEG4,WebM
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的，control 属性供添加播放、暂停和音量控件。

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video> 标签的属性：
<video controls="controls" autoplay="autoplay" />
autoplay    属性规定一旦视频就绪马上开始播放。
controls    如果出现该属性，则向用户显示控件，比如播放按钮。
height        设置视频播放器的高度。
loop         如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload     如果出现该属性，则视频在页面加载时进行加载，并预备播放。
            auto - 当页面加载后载入整个视频
            meta - 当页面加载后只载入元数据
            none - 当页面加载后不载入视频
src         要播放的视频的 URL。
width         设置视频播放器的宽度。


*HTML5 音频格式*
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
当前，audio 元素支持三种音频格式：Ogg Vorbis,MP3,Wav

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

*HTML5 画布*
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素,canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

例1：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ccxt=c.getContext("2d");//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//fillStyle 方法将其染成红色，fillRect 方法规定了坐标位置和尺寸。
cxt.fillRect(0,0,150,75);
</script>
<canvas id="myCanvas" width="200" height="100"></canvas>

例2：把一幅图像放置到画布上

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ccxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

*HTML5 Web存储*

HTML5 提供了两种在客户端存储数据的新方法：
    localStorage - 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
    sessionStorage - 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。


*HTML5 表单*

HTML5 新的 Input 类型：HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
    email
    url
    number
    range
    Date pickers (date, month, week, time, datetime, datetime-local)
    search
    color


HTML5 的新的表单元素：HTML5 拥有若干涉及表单的元素和属性。
    datalist 元素规定输入域的选项列表，option 元素永远都要设置 value 属性。
    keygen   密钥对生成器,作用是提供一种验证用户的可靠方法
    output   用于不同类型的输出

HTML5 的新的表单属性
新的 form 属性：
    autocomplete  属性规定 form 或 input 域应该拥有自动完成功能
    novalidate    规定在页面加载时，域自动地获得焦点。

新的 input 属性：
    autocomplete
    autofocus
    form
    form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
    height 和 width
    list
    min, max 和 step
    multiple
    pattern (regexp)
    placeholder
    required