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

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

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

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

AD:

【51CTO译文】HTML 5是时下Web开发领域炒得火热的一个术语,是的,很多人都看好它,也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站,如YouTube开始使用HTML 5视频Google已经弃用自家的Gears,开始全面拥抱HTML 5实现离线解决方案,各大浏览器厂家也纷纷开始支持HTML 5,连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持。本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面,以加深对HTML 5的理解。

HTML 5有何不同?

首先我们要明白HTML 5是新的语义结构标记,包括画布,离线存储规范和一些新的内联语义标记,但由于客观原因(主要是浏览器支持的原因),我们不得不限制标记的讨论范围,如画布,离线存储,原生视频或地理定位API等,还不是所有的浏览器都支持。

由于新的HTML 5标记大都是结构性的,它们的行为与块元素有些类似,为了帮助大家加深对HTML 5的理解,我将在下面的内容使用一些新的结构元素。

每个人都应该记住的doctype(文档类型)

要创建HTML 5 Web页面的第一件事情是使用新的doctype,你一定记住了HTML 4或XHTML 1.x的doctype,当我们要从旧的文档通过复制粘贴到新的文档中,必须要修改doctype,请记住,下面就是HTML 5的doctype:

  1. <!DOCTYPE html> 

还是很容易记住吧,而且也不区分大小写,与现在广泛使用的版本要简单得多了,而且保持了向后兼容。

语义结构

在深入标记前,我们先初略看一下一个Web页面的大致结构吧。

  1. <html> 
  2.     <head> 
  3.     ...stuff...  
  4.     </head> 
  5.     <body> 
  6.         <div id="header"> 
  7.             <h1>My Site</h1> 
  8.         </div> 
  9.         <div id="nav"> 
  10.             <ul> 
  11.                 <li>Home</li> 
  12.                 <li>About</li> 
  13.                 <li>Contact</li> 
  14.             </ul> 
  15.         </div> 
  16.         <div id=content> 
  17.             <h1>My Article</h1> 
  18.             <p>...</p> 
  19.         </div> 
  20.         <div id="footer"> 
  21.             <p>...</p> 
  22.         </div> 
  23.     </body> 
  24. </html> 

在上面的例子中,我为所有DIV标记增加了ID,相信大多数Web设计师都很熟悉这种做法了,这么做有两个目的,首先,ID提供了一个钩子,通过它可以对页面的特定部分应用样式,其次,ID作为一种原始的,伪语义结构,智能解析器将查找标签上的ID属性,并尝试猜测其含义,但这是一件很困难的事情,因为每个网站的ID可能都不一样。

于是就有了增加新标签的想法,HTML 5的创造者们就设计了一些新的元素,下面我们就来看看HTML 5中新增的一些关键的结构性标记。

<header>

这个标记计划用来描述一节或一个完整Web页面的介绍性信息,<header>标记可以包括所有的通常放在页面头部的标志,如果你在页面中使用了<div id="header">,它将被<header>取代。

<nav>

这个元素的含义就不说了,你的导航元素就放在这里,如主站点导航,但在某些情况下也可能有页面导航元素,HTML 5的创建人WHATWG最近修改了<nav>的解释,展示了如何在一个页面上使用两次。有关nav更多的讨论,可以参考:http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved/

简单说来,如果你在页面中使用了<div id="nav">标记来容纳导航元素,那么你可以使用<nav>进行替换。

<section>

这个可能是最模糊不清的标记了,按照HTML 5规范的解释,一个section是一个有主题的内容组,前面通常有一个header标记,后面通常跟一个footer标记,如果需要,section也可以嵌套使用。

在我们上面的例子中,标记为“content”的DIV是section的一个很好候选者,在这个section中,根据内容的不同,我们可能有更多的section。

<article>

根据WHATWG的注释,article元素是将section进行打包形成一个文档或网站独立的部分,例如一篇杂志或报纸文章,或一篇博客文章。

记住,在一个页面中可以有多个article元素,例如一个博客首页可能会有10多个article元素,article也可以进入section元素,因此你在嵌套使用时需要小心,可能一不小心就会出错。

<aside>

另一个模糊不清的标记是aside,这个元素表现的是与文档主要文本流无关的内容,也就是相当于一个括号备注,脚注,引用,注释,或者说是类似于侧边栏的东西,根据WHATWG的注释,<aside>可以用于所有这些情况。

<footer>

Footer的含义也非常清楚,它可以用在section中,也可以用于一个页面的底部。

内容导航



分享到:

热点职位

更多>>

热点专题

更多>>

读书

程序员密码学
《程序员密码学》涉及密码学的各个研究方向,分组密码、散列函数、公钥密码以及相关的攻击,同时也讲解了密码学算法实现上常用的

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i