HTML 5 新增元素

tiger.passion

浏览: 284706 次
性别:
来自: 上海

最近访客更多访客>>

wwwdai

bluoy

xuyijun008

namuhan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML/CSS

HTML HTML5 IT厂商 Spring 浏览器

万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中，HTML 本身没有任何变化。

最近，它又复活了。三家重要的浏览器厂商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group（WhatWG）来开发传统 HTML 的新版本。最近，W3C 也注意到了这些活动，也启动了自己的新一代 HTML 项目，双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中，但下一版本 HTML 的大体轮廓已经清楚了。我们来看看 HTML 5 提供了什么

结构

由于缺少结构，即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素，专门用来标识这些常见的结构：

    * section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西
    * header：页面上显示的页眉；与 head 元素不一样
    * footer：页脚；可以显示电子邮件中的签名
    * nav：指向其他页面的一组链接
    * article：blog、杂志、文章汇编等中的一篇文章
我们来考虑一个典型的 blog 主页，它的顶部有页眉，底部有页脚，还有几篇文章、一个导航区和一个边栏，见清单 1。

清单 1. 典型的 blog 页面

<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

即使有正确的缩进，这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中，可以将这些元素替换为语义性的元素，见清单 2。

清单 2. 用 HTML 5 编写的典型 blog 页面

<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

语义性的块元素

除了结构性元素之外，HTML 5 还增加了一些纯语义性的块级元素：

    * aside
    * figure
    * dialog

aside

aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWorks 文章中，常常会看到用表格形式编写的边栏。

figure

figure 元素代表一个块级图像，还可以包含说明。例如，在许多 developerWorks 文章中，可以看到清单 5 这样的标记。

<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。

dialog

dialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者，HTML 5 dd 元素可以表示讲话内容。所以，在老式浏览器中也可以以合理的方式显示对话。清单 7 显示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名对话。

清单 7. 用 HTML 5 编写的 Galilean 对话

<dialog>
	<dt>Simplicius </dt> 
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt> 
    <dd>But I should take neither of them,
	seeing that the straight line AF runs obliquely. I should
	draw a line perpendicular to CD, for this would seem to me
	to be the shortest, as well as being unique among the
	infinite number of longer and unequal ones which may be
	drawn from the point A to every other point of the opposite
	line CD. </dd>

	<dt>Salviati </dt> 
    <dd><p> Your choice and the reason you
	adduce for it seem to me most excellent. So now we have it
	that the first dimension is determined by a straight line;
	the second (namely, breadth) by another straight line, and
	not only straight, but at right angles to that which
	determines the length. Thus we have defined the two
	dimensions of a surface; that is, length and breadth. </p>

	<p> But suppose you had to determine a height—for
	example, how high this platform is from the pavement down
	below there. Seeing that from any point in the platform we
	may draw infinite lines, curved or straight, and all of
	different lengths, to the infinite points of the pavement
	below, which of all these lines would you make use of? </p>
	</dd>
</dialog>

对于这个元素的准确语法还有争议。一些人希望在 dialog 元素中嵌入非对话文本（比如剧本中的舞台说明），还有人不喜欢扩展 dt 和 dd 元素的作用。尽管在具体语法方面有争议，但是大多数人都认为以这样的语义性方式表达对话是好事情。

语义性内联元素

HTML 4 用 5 个不同的内联元素表示略有差异的计算机代码：var、code、kbd、tt 和 samp。但是，它无法表示时间、数字等基本数值。HTML 5 提供了几个新的内联元素来满足非技术作者的需求。

m

m 元素表示文本被 “加上标志”，但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本，搜索词就被加上标志。例如，如果搜索 “Egret”，那么缓存的 Google 页面可能像下面这样：

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

对于这个元素的名称当前还有争议。在规范发布之前，它可能从 m 改为 mark。

time

time 元素表示一个时间值，比如 5:35 P.M., EST, April 23, 2007。例如：

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。它不要求对元素内容应用任何特定的格式。但是，每个 time 元素都应该有一个 datetime 属性，其中包含更适合机器识别的时间值，比如：

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。

meter

meter 元素表示指定范围内的数字值。例如，可以用它表示薪水、投票给 Le Pen 的法国选民的百分比或考试分数。在这里，我使用 meter 标出 Software Development 2007 上一位 Google 程序员提供的数据：

<p>An entry level programmer in Silicon Valley 
can expect to start around <meter>$90,000</meter> per year.
</p>

meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是，每个 meter 元素可以有最多 6 个属性，它们按照更适合机器识别的形式表示这个数量：

    * value
    * min
    * low
    * high
    * max
    * optimum

这些属性都应该包含一个十进制数字。例如，期末考试的分数可以写成下面这样：

<p>Your score was 
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

这表示这个学生的分数是百分制中的 88.7。可能的最低分数是 0，但是实际的最低分数是 65。可能的最高分数是 100，但是实际的最高分数是 96。用户代理可以用某种数值控件显示这一信息，也可以在工具提示中显示额外的数据，但是最常见的情况可能是像其他内联元素一样对它应用样式。

progress

progress 元素表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条。例如，可以用它表示一个文件已经下载的百分比或者播放电影时的当前位置。下面这个进度控件表示下载已经完成了 33%：

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

value 属性表示操作的当前状态。max 属性表示操作的总量。这个元素指出要下载的数据总量是 4,603,807 字节，已经下载了 1,534,602 字节。

忽略 max 属性，就可以显示无限的进度。

在操作进行时，应该使用 JavaScript 语言动态地更新进度条。在静态情况下，这个元素没什么意义。

内嵌的媒体

<video src="http://www.cafeaulait.org/birds/sora.mov" />

<audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" />

分享到：

XHTML 简史及XHTML V2 背后的设计理念 | Java调用Mysql——格式及运行机制

2009-04-13 17:07
浏览 1205
评论(2)
查看更多

2 楼 tiger.passion 2009-04-14

引用

语义因该是下一波技术发展的潮流

html5方向是完善标签，使其更加语义化；xhtml2的方向是继续分离结构，表现，和行为。

1 楼 kryptonum 2009-04-14

语义因该是下一波技术发展的潮流

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论