HTML5初学习笔记

HTML5可以做的事情

1. 制作时尚的表单

2. 构建实用的HTML5框架

3. 开发丰富多彩的游戏

4.  以更直观的方式让数据可视化呈现

5. HTML5的未来 – 惊艳的HTML5示例和实验

HTML的新特点

新特性

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

· 用于绘画的 canvas 元素

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

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

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

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

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

这些新的输入类型：

· email

· url

· number

· range

· Date pickers (date, month, week, time, datetime, datetime-local)

· search

· color

浏览器支持

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

 

HTML5的接口演示

1. 以PPT的形式演示，感觉很牛逼：http://slides.html5rocks.com/
2. 比较详细的接口演示：http://html5demos.com/
3. 接口+代码+调试演示：http://playground.html5rocks.com/

视频播放标签

视频播放：

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

参数：controls 播放器控制信息

autoplay：自动播放

loop：循环播放

自动播放且支持自动循环播放，如果加上preload="auto"，则可以在页面加载的时候就可播放（注意：atuopaly需要关闭）

检测浏览器是否支持HTML5

1. 使用js方法：

   这是w3school里面的方法，这个可以检测浏览器是否支持html5，但是不能检测出每个浏览器是否支持html5所有的标签。

js代码：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;"> <button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">Check</button>     <script type="text/javascript">   function checkVideo()   {   if(!!document.createElement('video').canPlayType)     {     var vidTest=document.createElement("video");     oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');     if (!oggTest)       {       h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');       if (!h264Test)         {         document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."         }       else         {         if (h264Test=="probably")           {           document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";           }         else           {           document.getElementById("checkVideoResult").innerHTML="Well. Some support.";           }         }       }     else       {       if (oggTest=="probably")         {         document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";         }       else         {         document.getElementById("checkVideoResult").innerHTML="Well. Some support.";         }       }     }   else     {     document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."     }   }   </script>

　　

?

1	调用js检测，返回信息

?

1

2.第二种直接使用该标签

?

1	在标签之间加上你的浏览器不支持的话，如

<audio src="song.ogg" controls="controls">
你的浏览器不支持该标签！

</audio>

如果浏览器不支持的话，中间的“你的浏览器不支持该标签！”会输出.

其他的方法：

HTML5特性检测--检测技术：http://www.html5china.com/course/20111007_2184.html

检测浏览器支持哪些HTML5新特性的方法：http://www.html5china.com/course/20111007_2185.html

比较好的学习资源：

22个HTML5的初级技巧：http://stylechen.com/22-html5-tips.html

学习演示接口的网站：http://html5demos.com/

html5中文网：   http://www.html5china.com  

w3school的教程 http://www.w3school.com.cn/html5/index.asp

Technorati 标签: html5 浏览器兼容