您所在的位置:开发 > Web > 热点推荐 > 从零开始构建HTML 5 Web页面(2)

从零开始构建HTML 5 Web页面(2)

2010-02-22 09:39 黄永兵 译 51CTO.com 字号:T | T
一键收藏,随时查看,分享好友!

HTML 5有何不同?这个新的Web标准都新增了那些标记?它将如何改变我们现有的Web开发?本文将向您详细解答这些问题并用实例打造一个完整的HTML 5 Web页面。

AD:

全部放在一起

现在我们全部使用新标记重写前面的示例页面。

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.     ...stuff...  
  5.     </head> 
  6.     <body> 
  7.         <header> 
  8.             <h1>My Site</h1> 
  9.         </header> 
  10.         <nav> 
  11.             <ul> 
  12.                 <li>Home</li> 
  13.                 <li>About</li> 
  14.                 <li>Contact</li> 
  15.             </ul> 
  16.         </nav> 
  17.         <section> 
  18.             <h1>My Article</h1> 
  19.             <article> 
  20.                 <p>...</p> 
  21.             </article> 
  22.         </section> 
  23.         <footer> 
  24.             <p>...</p> 
  25.         </footer> 
  26.     </body> 
  27. </html> 

是不是更干净,更易于理解呢?我们可以把<h1>My Article</h1>打包到header标记中。另外请注意,我们可以在article元素下再增加一个footer元素,用来容纳如翻页导航,相关文章或其它内容。

新标记的样式

在大多数浏览器中,你只需要如往常一样对元素使用样式,但是请一定要对每个元素加上display:block;规则,随着时间的推移,浏览器对HTML 5新元素的支持越来越标准后,就可以不使用了。

下面我们队header应用一些样式:

  1. header {  
  2.     display: block;  
  3.     font-size: 36px;  
  4.     font-weight: bold;  

记住,你现在仍然可以在这些元素上添加class和ID属性,因此,如果你想对导航小节单独使用一个样式,你可以向下面这样增加一个class或ID属性:

  1. <nav class="main-menu"> 

然后再应用一个样式:

  1. nav.main-menu {  
  2.     font-size: 18px;  

与旧浏览器的兼容

这些样式都不能在IE 6下使用,如果你坚持要保持与旧浏览器兼容,也是有补救办法的,IE 6可以解析这些标记,但不能应用样式,解决办法就是使用JavaScript,使用createElement方法就可以让IE支持HTML 5标记的样式了,你可以在HTML 5文件的头部包括这段代码,也可以保存到一个独立文件中,然后进行引用。

  1. <script> 
  2.   document.createElement('header');  
  3.   document.createElement('nav');  
  4.   document.createElement('section');  
  5.   document.createElement('article');  
  6.   document.createElement('aside');  
  7.   document.createElement('footer');  
  8. </script> 

你可能要问,为什么没有给这段脚本指定MIME类型呢?在HTML 5中无需指定了,在HTML 5中,所有的脚本都假设是type="text/javascript",因此不必再多此一举了。

虽然IE的问题得到了解决,但据我所知,Firefox 2中的Gecko渲染引擎仍然存在一个bug,解决办法有两个,但这两个办法都不是很理想,更多信息请看这里http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/。考虑到Firefox 2的使用人数已经很少,你可以完全忽视这个bug。

现在你已经可以使用HTML 5了,但应该使用吗?

答案很简单:是的!

但这也要根据网站的性质做出调整,例如,假设你要重构CNN主页,那可能不太现实,最好还是等浏览器的支持更好一些再说,但如果你是在翻新你的博客系统,那么你可以一试,如果你使用的WordPress,目前已经出现了一些插件可以帮助你,这里就有一个HTML 5的WordPress主题

你也可以去HTML 5画廊(http://html5gallery.com/)瞧瞧,因为它全部是用HTML 5构建的,可以看看其源码,加深对HTML 5标记的理解。还可以继续关注51CTO.com的HTML 5专题,我们会持续更新关于HTML 5的技术应用和资讯报道。

如果你还有点犹豫不决,那你去看看Google的主页,已经是HTML 5了,保险一点的话,你可以使用JavaScript声明这些新标记进行使用。HTML 5的标记远不止这些,希望本文能消除你的疑虑,大胆使用HTML 5,只有使用的人多了,这个规范才能真正见效。

【责任编辑:red7 TEL:(010)68476606】

内容导航



分享到:

热点职位

更多>>

热点专题

更多>>

读书

Windows用户态程序高效排错
本书是一本介绍Windows系统上的用户态程序排错方法和技巧的书。本书分为4个章节,先介绍最重要的、通用的思考方法,以便制定排错

51CTO旗下网站

领先的IT技术网站 51CTO 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i 51CTO学院