`
天梯梦
  • 浏览: 13612056 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

从零开始构建HTML 5 Web页面

 
阅读更多

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:

<!DOCTYPE html> 

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

语义结构

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

<html>
     <head>
     ...stuff...
      </head>
      <body>
         <div id="header">
             <h1>My Site</h1>
         </div>
         <div id="nav">
             <ul>
                 <li>Home</li>
                 <li>About</li>
                 <li>Contact</li>
             </ul>
         </div>
         <div id=content>
             <h1>My Article</h1>
             <p>...</p>
         </div>
         <div id="footer">
             <p>...</p>
         </div>
     </body>
 </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中,也可以用于一个页面的底部。

全部放在一起

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

<!DOCTYPE html>
 <html>
     <head>
     ...stuff...
      </head>
     <body>
         <header>
             <h1>My Site</h1>
         </header>
         <nav>
             <ul>
                 <li>Home</li>
                 <li>About</li>
                 <li>Contact</li>
             </ul>
         </nav>
         <section>
             <h1>My Article</h1>
             <article>
                 <p>...</p>
             </article>
         </section>
         <footer>
             <p>...</p>
         </footer>
     </body>
 </html>

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

新标记的样式

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

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

header {
      display: block;
      font-size: 36px;
      font-weight: bold;
  } 

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

<nav class="main-menu">

 
 然后再应用一个样式:

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

 
与旧浏览器的兼容

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

<script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
</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,只有使用的人多了,这个规范才能真正见效。


本文由HTML5中国网站小编整理完成,原地址:http://www.html5cn.org/article-438-1.html

分享到:
评论

相关推荐

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...

    性能测试从零开始:LoadRunner入门与提升

    第5章 VU--用户行为的模拟器 89 5.1 图灵试验与LoadRunner VU模拟奥秘 90 5.1.1 图灵试验场景 90 5.1.2 LoadRunner模拟揭秘 91 5.2 录制脚本 94 5.2.1 选择协议 94 5.2.2 规划脚本结构 96 5.2.3 HTTP Vuser中的URL ...

    通过Dreamweaver CS3学习HTML+DIV+CSS

    本书结合Dreamweaver操作与HTML语法,从零开始,由浅入深地讲解网页设计技术,将读者带入网页设计的殿堂。全书内容共23章,分5篇:网站网页概述篇 ——了解什么是网站、网页,以及Dreamweaver操作界面;网页基础HTML...

    Web前端开发第一季:HTML

    本课程完全从零基础开始讲解,保证学习质量,一节课结束后就能做出效果。培养自己动手写代码能力、独立解决问题以及web开发能力。课程精细,页面丰富、设立了大量的演示案例、纯动手操作一步一步完成一个综合性的...

    PHP和MySQL Web开发第4版pdf以及源码

    11.2 从Web查询数据库的基本步骤 11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 ...

    PHP和MySQL WEB开发(第4版)

    11.2 从Web查询数据库的基本步骤 11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 11.4 ...

    PHP和MySQL Web开发第4版

    11.2 从Web查询数据库的基本步骤 11.2.1 检查与过滤用户输入数据 11.2.2 建立一个连接 11.2.3 选择使用的数据库 11.2.4 查询数据库 11.2.5 检索查询结果 11.2.6 从数据库断开连接 11.3 将新信息放入数据库 ...

    JavaScript王者归来part.1 总数2

     第1章 从零开始  1.1 为什么选择JavaScript?   1.2 JavaScript的应用范围   1.3 JavaScript的版本   1.4 一些值得留意的特性 禁忌及如何突破这些禁忌   1.5 安全性和执行效率   1.6 一个例子--...

    litespeed.js:精简且快速的微型javascript框架,易于学习**

    *版本开始,litespeed.js的权重仅为4.9kb(压缩和压缩)主要特点零依赖4.9kb(压缩后压缩) 无需工具爱与拥抱HTML MVVM 内置路由器资源入门使用安装: npm install litespeed.js 使用CDN安装: &lt; script src =" ...

    JAVA上百实例源码以及开源项目源代码

     Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    JAVA上百实例源码以及开源项目

     Java实现HTTP连接与浏览,Java源码下载,输入html文件地址或网址,显示页面和HTML源文件,一步步的实现过程请下载本实例的Java源码,代码中包括丰富的注释,对学习有帮助。 Java实现的FTP连接与数据浏览程序 1个...

    大名鼎鼎SWFUpload- Flash+JS 上传

     SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的...

Global site tag (gtag.js) - Google Analytics