关于HTML5的一些基础知识

看了一下午的电视剧,本来想调试一下bug的,结果一不小心看上瘾了。

其实说到html5这个东西,也算是老生常谈吧。看到不少的人都在说这个话题,或者在很多的大型互联网公司都在说这个,招聘的时候也有这么个要求。包括火狐的OSintel的开发大会,fackbook放弃支持html5这个小家伙,webqq在很久以前就很有可能想到了webapp代替第三方的软件app...种种的种种,关于html5的新闻很多,最热的或许可能是flashhtml5的竞争。。。周一还有个知识分享,到时候说吧。现在思路都是混乱的。下面来说说html5的一些新知识吧。

有些东西是从《ja dom 编程艺术》里面摘取的。概念性的东西滤过,老鸟也可以飞过了,不用看这么基础的文章= =

 

Html5html语言当前及未来的新标准。Html规范从html4xhtml,再到webapps1.0,最后回到html5,整个过程充满了艰辛。其实以前的dhtml或许充当了html5的一个角色,只是没有延续下来,或许在那个时候人们还没有适应把html,css,js结合起来成为一种技术吧。

Web设计可以把网页看成三个层:1.结构层 2.样式层 3.行为层------他们分别对应的技术:超文本标记语言,层叠样式表,javascript和文档对象模型,浏览器对象模型。当然在浏览器对象模型里面有cookiewindow对象等等。

 

在结构这一块,当然现在只说结构这一块,有这样一些标记元素sectionarticleheaderfooter。翻译这四个英文也就是区域,文章,头,脚,每一个英文单词,也就是标记元素的名称,都有着自己的含义,比如说section就相当于xhtml1.0里面的div标记,给他一个区块,应为我们在使用div的时候都会给他去一个名字,例如header这样,至于为什么会有header这个新的标记元素,是W3C这伙人通过搜索网页的源代码,发现了使用频率很高的名字,其次,这样的标记更有利于标记的语义化,也就是即使你没有给一个网页CSS样式,或者用户禁用了CSS的功能(sb才会禁用)。。。。不扯远了,网页的显示也会显得很有层次感,便于搜索引擎来搜索到你的网页,根据用户的关键词搜索,然后排名,也就是pagerank

Html的媒体交互元素,例如canvasaudiovideo等等。

当然了,新的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进行很好地控制。这个就不展开了,学了jshtml5的朋友们可以很好地去了解。

 

 

实例

绘制了一个圆角矩形,写了一个函数,并把这个函数给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表示必填

 

其他的相关知识链接:使用localstoragesessionstorage在客户端存储大型和复杂数据集的有效方案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:)

你可能感兴趣的:(html5)