ITPub博客

首页 > Linux操作系统 > Linux操作系统 > HTML5评述

HTML5评述

原创 Linux操作系统 作者:chszs 时间:2010-11-30 13:10:21 0 删除 编辑
《HTML5评述》
【版权声明】:本文属于原创,转载需征得作者chszs的同意!
      HTML5的很多特征已得到目前多个浏览器的支持。自从苹果公司宣布,他们不会支持Flash,而改为支持HTML5,这使得HTML5得到媒体的广泛关注。不幸的是,媒体的报道出现了神话HTML5以及误传了浏览器对HTML5的支持水平。

      HTML5在语法上不同于HTML4和XHTML。标签不再对大小写敏感,标签不再需要关闭。属性可被引用。下列HTML5标签均为有效代码:

CODE:





看上去语法很宽松。事实上,浏览器从不在意XHTML语法,只要服务器发送的内容类型是text/html即可。

      HTML5的元数据标签的语法有些不同,应该这么写:

CODE:

不过,元数据标签的语法不是必须的。HTML5可以简单地这么写:

CODE:

HTML5的doctype也变得更短,如下:

CODE:

没错,就是它!没有网址或链接。很简单。现在,让我们做一个简单的页面。试试这个:

CODE:



Hello World

Hello World!


This is written in HTML 5

注:
      在Chrome 7.0.517.44浏览器下,显示正常,如下:

      查看网页源码:

      代码被补全为如下:

      在Opera 10.63浏览器下,显示也正常,如下:

      查看网页源码,被补全为如下:

      与Chrome浏览器一致!
      在Firefox 3.6.11浏览器下,结果与Chrome、Opera相同。
      在IE 7.0.5730.13浏览器下,显示正常,如下:

      查看源码的结果与Chrome、Opera、Firefox相同。
      推测IE8、IE9也是如此。

注意:
      上面的代码不再有、、标签了。在HTML5中,这3个标签是可选的,如果你喜欢,可以使用它们。注意,IE浏览器需要这些标签,以便于CSS样式能应用到HTML5的元素上。因此,短时间内,还是该使用这些标签。

      现在,让我们考虑一个“典型”的网页。比如像如下的布局方面:

      在HTML4或XHTML中,你可以使用
标签和CSS类搞定,比如:

CODE:


  
  
  

    <!--Content-->
  

  
在HTML5中,我们有了新的结构元素,它们更好地遵循了“典型”的Web页面的结构。下面是一个例子,包括了可选的、、标签。

CODE:



  
   
    我的HTML 5页面
  
  
   

      <!-- Header Content -->
   

   
   

      <!-- Main Content -->
   

   

      <!-- Footer Content -->
   

  
跟原来确实大不相同,更像是语义Web设计。为了正确地显示出布局,仍然需要CSS样式,如下:

CODE:

header {
  color: black;
}目前主流的浏览器都已支持HTML5新增的元素,且可以直接应用CSS样式,除了IE。要在IE中应用CSS样式到HTML5元素,需要使用JavaScript,如下:

CODE:

document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');此脚本对其它浏览器无影响,我们可以把脚本包含到只使用IE的条件标记中。
      IE很令人讨厌,居然不能识别HTML5的新标签,比如
,要解决此问题,可以在HTML5的头部引入html5.js脚本,以此使得IE能支持新标签。

CODE:

<!--[if lt IE 9]>
  

      以上的html5.js脚本使得IE能识别所有HTML5的新元素。

      当然,IE还有一个问题,那就是如果IE禁用了JavaScript,那么CSS样式将不能应用到HTML5的新元素上。尽管禁用JavaScript的用户只是少数,但问题确实存在。期盼IE9或IE10能彻底解决此问题。

      现有的方法是仍然使用HTML4或XHTML页面,只是在用
布局时,尽量取HTML5新元素的名字做标记,如:‘nav’、‘header’、‘article’,目的是为了在将来可轻松地用HTML5标签替换它们。采用这种方法,在未来只需用相应的HTML5元素来替代
标签即可。

      HTML5要完全得到浏览器的支持,恐怕要在2012年,让我们拭目以待吧!

[ 本帖最后由 chszs 于 2010-11-18 12:34 编辑 ]

图片1.png


图片2.png


图片3.png


图片4.png


图片5.png


图片6.png


图片7.png

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/10896630/viewspace-680606/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2009-07-08

  • 博文量
    7
  • 访问量
    12697