淘先锋技术网

首页 1 2 3 4 5 6 7
《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浏览器下,显示正常,如下:
attachment.php?aid=696391&nothumb=yes
      查看网页源码:
attachment.php?aid=696392&nothumb=yes
      代码被补全为如下:
attachment.php?aid=696393&nothumb=yes
      在Opera 10.63浏览器下,显示也正常,如下:
attachment.php?aid=696394&nothumb=yes
      查看网页源码,被补全为如下:
attachment.php?aid=696395&nothumb=yes
      与Chrome浏览器一致!
      在Firefox 3.6.11浏览器下,结果与Chrome、Opera相同。
      在IE 7.0.5730.13浏览器下,显示正常,如下:
attachment.php?aid=696396&nothumb=yes
      查看源码的结果与Chrome、Opera、Firefox相同。
      推测IE8、IE9也是如此。

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

      现在,让我们考虑一个“典型”的网页。比如像如下的布局方面:
attachment.php?aid=696397&nothumb=yes
      在HTML4或XHTML中,你可以使用
标签和CSS类搞定,比如:

CODE:


  
  
  

    <!--Content--&gt
  

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

CODE:



  
   
    我的HTML 5页面
  
  
   
      <!-- Header Content --&gt
   
   
      <!-- Sidebar Content --&gt
   
   
      <!-- Main Content --&gt
   
   
      <!-- Footer Content --&gt
   
  
跟原来确实大不相同,更像是语义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 编辑 ]
20101117_285820086148a0cad2fb7gOrOjaFKewr.png
图片1.png

20101117_4c18bf07296021483520BfInJdLKVtaS.png
图片2.png

20101117_f604dcd043cb906cea8dgveh8E8VtPcP.png
图片3.png

20101117_bf67441e4f4b610c8a12krFLGTMjRE5d.png
图片4.png

20101117_226fff273e2b7e743ebavcfxcYOMu6i4.png
图片5.png

20101117_7f3f7b8f461ad2a65c32asxeyDNKS3Kn.png
图片6.png

20101117_e373592f34a75374b795rFhrL2Tv6hFT.png
图片7.png

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

user_pic_default.png
请登录后发表评论 登录
全部评论
<%=items[i].createtime%>

<%=items[i].content%>

<%if(items[i].items.items.length) { %>
<%for(var j=0;j
<%=items[i].items.items[j].createtime%> 回复

<%=items[i].items.items[j].username%>   回复   <%=items[i].items.items[j].tousername%><%=items[i].items.items[j].content%>

<%}%> <%if(items[i].items.total > 5) { %>
还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看
<%}%>
<%}%>
<%}%>

转载于:http://blog.itpub.net/10896630/viewspace-680606/