《HTML5评述》
【版权声明】:本文属于原创,转载需征得作者chszs的同意!
HTML5的很多特征已得到目前多个浏览器的支持。自从苹果公司宣布,他们不会支持Flash,而改为支持HTML5,这使得HTML5得到媒体的广泛关注。不幸的是,媒体的报道出现了神话HTML5以及误传了浏览器对HTML5的支持水平。
HTML5在语法上不同于HTML4和XHTML。标签不再对大小写敏感,标签不再需要关闭。属性可被引用。下列HTML5标签均为有效代码:
看上去语法很宽松。事实上,浏览器从不在意XHTML语法,只要服务器发送的内容类型是text/html即可。
HTML5的元数据标签的语法有些不同,应该这么写:
Hello World
在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中,你可以使用
【版权声明】:本文属于原创,转载需征得作者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类搞定,比如:
<!--Header Content-->
<!--Sidebar Content -->
<!--Content-->
在HTML5中,我们有了新的结构元素,它们更好地遵循了“典型”的Web页面的结构。下面是一个例子,包括了可选的、、标签。
我的HTML 5页面
<!-- Header Content -->
<!-- Sidebar Content -->
<!-- Main Content -->
<!-- Footer Content -->
跟原来确实大不相同,更像是语义Web设计。为了正确地显示出布局,仍然需要CSS样式,如下:
color: black;
}目前主流的浏览器都已支持HTML5新增的元素,且可以直接应用CSS样式,除了IE。要在IE中应用CSS样式到HTML5元素,需要使用JavaScript,如下:
document.createElement('nav');
document.createElement('article');
document.createElement('footer');此脚本对其它浏览器无影响,我们可以把脚本包含到只使用IE的条件标记中。
IE很令人讨厌,居然不能识别HTML5的新标签,比如,要解决此问题,可以在HTML5的头部引入html5.js脚本,以此使得IE能支持新标签。
以上的html5.js脚本使得IE能识别所有HTML5的新元素。
当然,IE还有一个问题,那就是如果IE禁用了JavaScript,那么CSS样式将不能应用到HTML5的新元素上。尽管禁用JavaScript的用户只是少数,但问题确实存在。期盼IE9或IE10能彻底解决此问题。
现有的方法是仍然使用HTML4或XHTML页面,只是在用
<%}%> CODE:
<!--Header Content-->
<!--Sidebar Content -->
<!--Content-->
在HTML5中,我们有了新的结构元素,它们更好地遵循了“典型”的Web页面的结构。下面是一个例子,包括了可选的、、标签。
CODE:
我的HTML 5页面
<!-- Header Content -->
<!-- Sidebar 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之Web SQL数据库研究
请登录后发表评论 登录
全部评论
<%=items[i].createtime%>
<%=items[i].content%>
<%if(items[i].items.items.length) { %> <%for(var j=0;j <%}%> <%if(items[i].items.total > 5) { %>
<%}%> <%=items[i].items.items[j].createtime%>
<%=items[i].items.items[j].username%> 回复 <%=items[i].items.items[j].tousername%>: <%=items[i].items.items[j].content%>
还有<%=items[i].items.total-5%>条评论 ) data-count=1 data-flag=true>点击查看
<%}%> 转载于:http://blog.itpub.net/10896630/viewspace-680606/