五分钟学会HTML5!(一)


毫无疑问,对于开发人员而言,HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择。 本文来自The Code Project的付费搜索位置,由Soluti...
毫无疑问,对于开发人员而言,HTML5已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理,阅读本文是你最好的选择。

本文来自The Code Project的付费搜索位置,由Solution Center提供。这里的文章致力于向大家提供我们认为对开发人员来说有用和有价值的产品和服务的相关信息由IE9和HTML5 / CSS3 Zone带来 。

本文会涵盖新的语义标签、为绘图和动画而设计的画布(canvas)、音频和视频支持,以及在旧版浏览器上如何使用HTML5。看完这些内容所用的时间可能会比五分钟多一点点,但我保证会讲得快一些。请接着看下去,下面的内容肯定值得你这么做!

语义标签和页面布局

我们首先讲一个关于一所大学的经典故事。这所大学在建设校园草地时,没有开辟任何步行小道,他们把整个空地种上草,然后等待。
一年以后,人们经常走过的地方,草都被踩光了。于是,这所大学就将这些地方铺设为真正的人行道。

棒极了!这些人行道是人们真正“走”出来的。

HTML5新语义元素的诞生正是基于同样的逻辑。(关于这一点,可以参看W3C设计指南中的“Pave the Cowpaths”。)

语义元素清晰地向浏览器和开发人员表明了它们的涵义和用途,要理解这一点,可以将它们与< div>标签进行对比。在HTML文件内,< div>标签能定义出一个分区或者一个小节,但是它无法告诉我们分区里的内容,不能传达任何清晰的涵义。

开发人员通常会将ID或者类名与< div>标签配合使用,这会向程序员传达更多的涵义。但遗憾的是,这并不能帮助浏览器领会那种标签的用途。< div id="header">

在HTML5中,有不少新的富含语义的元素,可以向浏览器和开发人员传达元素的用途。< header>

W3C挖掘了数亿个的Web页面,找出开发人员一直在使用的ID和类名。一旦开发人员抛出div1、div2这些无意义标签,他们就得到了一个描述非常细致的已经在使用的元素的列表,并让其成为W3C的标准设置。

下面是HTML5的一部分新的语义元素:
• article
• aside
• figcaption
• figure
• footer
• header
• hgroup
• mark
• nav
• section
• time

由于这些元素的语义很丰富,相信你可能会猜出其中大部分元素的作用。
为了说得更清楚,下面给出一张图示。



header和footer的作用不言自明,nav将创造一个导航条或者菜单条。此外,你可以用section和article将页面内容分为几个部分。最后,aside元素用来安置附带的内容,比如说,以边栏的形式放上一些相关链接。

下面是一个简单的例子,其中的代码就用到了这些元素。
  1.             <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Title</title>
  6.     <link href="css/html5reset.css" rel="stylesheet" />
  7.     <link href="css/style.css" rel="stylesheet" />
  8. </head>
  9. <body>
  10.     <header>
  11.         <hgroup>
  12.             <h1>Header in h1</h1>
  13.             <h2>Subheader in h2</h2>
  14.         </hgroup>
  15.     </header>
  16.     <nav>
  17.         <ul>
  18.             <li><a href="#">Menu Option 1</a></li>
  19.             <li><a href="#">Menu Option 2</a></li>
  20.             <li><a href="#">Menu Option 3</a></li>
  21.         </ul>
  22.     </nav>
  23.     <section>
  24.         <article>
  25.             <header>
  26.                 <h1>Article #1</h1>
  27.             </header>
  28.             <section>
标签: