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 属性供添加播放、暂停和音量控件。

1. <video width="320" height="240" controls="controls"> 
2.   <source src="movie.ogg" type="video/ogg"> 
3.   <source src="movie.mp4" type="video/mp4"> 
4.   Your browser does not support the video tag. 
5. </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

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

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

例1：

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

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

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

      本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/959177，如需转载请自行联系原作者