关于HTML5的一些基础知识
看了一下午的电视剧，本来想调试一下bug的，结果一不小心看上瘾了。
其实说到html5这个东西，也算是老生常谈吧。看到不少的人都在说这个话题，或者在很多的大型互联网公司都在说这个，招聘的时候也有这么个要求。包括火狐的OS，intel的开发大会，fackbook放弃支持html5这个小家伙，webqq在很久以前就很有可能想到了webapp代替第三方的软件app...种种的种种，关于html5的新闻很多，最热的或许可能是flash和html5的竞争。。。周一还有个知识分享，到时候说吧。现在思路都是混乱的。下面来说说html5的一些新知识吧。
有些东西是从《ja dom 编程艺术》里面摘取的。概念性的东西滤过，老鸟也可以飞过了，不用看这么基础的文章= =
Html5是html语言当前及未来的新标准。Html规范从html4到xhtml，再到webapps1.0,最后回到html5，整个过程充满了艰辛。其实以前的dhtml或许充当了html5的一个角色，只是没有延续下来，或许在那个时候人们还没有适应把html,css,js结合起来成为一种技术吧。
Web设计可以把网页看成三个层：1.结构层 2.样式层 3.行为层------他们分别对应的技术：超文本标记语言，层叠样式表，javascript和文档对象模型，浏览器对象模型。当然在浏览器对象模型里面有cookie和window对象等等。
在结构这一块，当然现在只说结构这一块，有这样一些标记元素section，article，header，footer。翻译这四个英文也就是区域，文章，头，脚，每一个英文单词，也就是标记元素的名称，都有着自己的含义，比如说section就相当于xhtml1.0里面的div标记，给他一个区块，应为我们在使用div的时候都会给他去一个名字，例如header这样，至于为什么会有header这个新的标记元素，是W3C这伙人通过搜索网页的源代码，发现了使用频率很高的名字，其次，这样的标记更有利于标记的语义化，也就是即使你没有给一个网页CSS样式，或者用户禁用了CSS的功能（sb才会禁用）。。。。不扯远了，网页的显示也会显得很有层次感，便于搜索引擎来搜索到你的网页，根据用户的关键词搜索，然后排名，也就是pagerank。
Html的媒体交互元素，例如canvas，audio，video等等。
当然了，新的javascript API还有很多的新模块，例如：Geolocation,Storage,Drap-and-Drop,Socket,以及多线程。
关于html的头部文档声明：大家都知道是一段很长的不易记忆的代码，大家比较一下。
Html5以前：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
现在：<!DOCTYPE html>
Html5的文档声明只有两个单词，FUCK，太简单了，这个声明同样适用于xhtml，浏览器可以同样的解析到。不过IE6,7,8不知道支持不，不甘心的家伙可以去测试一下。还是自己测试了= =IE7不会解析，其他两个正常，你这个笨蛋。。嘎嘎
Modernizr
这是个js的库，官方网站可以查看相关信息，。直接加个.com就行了。这个开源库具有富特性检测功能，可以对html5进行很好地控制。这个就不展开了，学了js和html5的朋友们可以很好地去了解。
实例
绘制了一个圆角矩形，写了一个函数，并把这个函数给window对象来执行。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="stylesheet" type="text/css" href="index.css"> 6 <title>html5Test</title> 7 <script type="text/javascript"> 8 function draw(){ 9 var canvas=document.getElementById('draw-in-me'); 10 if (canvas.getContext){ 11 var ctx=canvas.getContext('2d'); 12 ctx.beginPath(); 13 ctx.moveTo(120.0,32.0); 14 ctx.bezierCurveTo(120.0,36.4,116.4,40.0,112.0,40.0); 15 ctx.lineTo(8.0,40.0); 16 ctx.bezierCurveTo(3.6,40.0,0.0,36.4,0.0,32.0); 17 ctx.lineTo(0.0,8.0); 18 ctx.bezierCurveTo(0.0,3.6,3.6,0.0,8.0,0.0); 19 ctx.lineTo(112.0,0.0); 20 ctx.bezierCurveTo(116.4,0.0,120.0,3.6,120.0,8.0); 21 ctx.lineTo(120.0,32.0); 22 ctx.closePath(); 23 ctx.fill(); 24 ctx.lineWidth=2.0; 25 ctx.strokeStyle="rgb(255,255,255)"; 26 ctx.stroke(); 27 }; 28 }; 29 window.onload=draw; 30 </script> 31 </head> 32 <body> 33 <canvas id="draw-in-me" width="120" height="40"> 34 <p>powerd by canvas</p> 35 </canvas> 36 </body> 37 </html>
有兴趣的复制代码查看一下效果吧。
以前要想实现这样的效果需要使用CSS的技术，需要三张背景图片来来拼接起来，现在使用js只需要几行代码，性能提高不少，可以使用循环赋值来实现css中滑动门圆角矩形的效果。
插入视频控件
以前插入一段视频需要冗长的代码，现在呢？
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7 <video src="minemine.mp4"> 8 <!--不支持的时候显示的内容--> 9 <a href="www.youku.com">Download minemine.mp4</a> 10 </video> 11 </body> 12 </html>
不知道怎么回事，木有成功，貌似是视频的格式有点问题，在IE9下面显示了链接，在其他的火狐，谷歌，opera都没有显示任何内容，但是调试的时候有一个隐藏的区块，请教大家了？是个什么问题。。。
表单：
新的输入控件类型---
- email输入电子邮件地址、
- url输入url（统一资源定位符***这个位置忘了，，电脑没有网线，自己可以百度一下），
- date输入日期时间，
- number用于输入数值，
- range输入滚动条，
- search用于搜索框，
- tel输入电话号码，
- color用于选择颜色
新的控件属性---
- autocomplete为文本输入框添加一组建议的输入项，
- autofocus让表单元素自动获得焦点，
- form对<form>标签外部的表单元素分组，
- Min,max.step用在范围和数值输入框中
- Pattern用于定义一个正则表达式，来验证输入的值
- Placeholder显示临时性的提示信息（其实就是在文本框中默认的值，当鼠标移到文本框并且获得焦点时，该文本消失）
<input type="text" id="first-name" placeholder="Your First Name" />把这句代码放在你的文档里面去看看吧！
- Required表示必填
其他的相关知识链接：使用localstorage和sessionstorage在客户端存储大型和复杂数据集的有效方案http://dev.w3.org/html5/webstorage
标准化的拖放的实现http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd
国外的玩这个站权威性比较大，国内的html5China这个网站还不错，一直在模仿，从未被超越。一本关于html5的书籍《html5高级程序设计》之前看过，由于那个时候还没有学习javascript，所以看的似懂非懂，以后有机会需要慢慢的琢磨琢磨，算是一本经典书籍，不过自己看的时候不是很认真，有点打酱油了。
之前看过一篇文章，html5可以解决分布式数据存储的问题，html5可以把用户的数据进行本地存储，不用每次都重新访问同样的数据库，对于大型的电商网站或者微博这样的大型网站，或许是个不错的方法。
以后每个星期不出意外的话，写两篇知识总结吧，感觉以前看的，写的东西有的都忘了，一次次的在总结的时候会记得比较牢固。关于css的技术问题，妙味课堂的网络视频的每一刻的总结。还有很多问题需要解决呐，熬吧港南style，:)