PhoneGap中文网

标题: HTML5 新增了那些元素 [打印本页]
作者: admin    时间: 2013-7-4 20:13
标题: HTML5 新增了那些元素
下面是HTML5的一部分新的语义元素：

    article 标签定义独立的内容。

    aside 标签定义其所处内容之外的内容。比如最新文章、友情链接。

    figcaption 标签定义 figure 元素的标题（caption）

    figure      标签规定独立的流内容（图像、图表、照片、代码等等）。

    figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

    footer 标签定义 section 或 document 的页脚

    header 标签定义文档的页眉

    hgroup 标签用于对网页或区段（section）的标题进行组合

    mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签

    nav 导航菜单

    section 标签定义文档中的节（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>
  29.                 This is the first article.  This is <mark>highlighted</mark>.
  30.             </section>
  31.         </article>
  32.         <article>
  33.             <header>
  34.                 <h1>Article #2</h1>
  35.             </header>
  36.             <section>
  37.                 This is the second article.  These articles could be blog posts, etc.  
  38.             </section>
  39.         </article>
  40.     </section>
  41.     <aside>
  42.         <section>
  43.             <h1>Links</h1>
  44.             <ul>
  45.                 <li><a href="#">Link 1</a></li>
  46.                 <li><a href="#">Link 2</a></li>
  47.                 <li><a href="#">Link 3</a></li>
  48.             </ul>
  49.         </section>
  50.         <figure>
  51.             <img width="85" height="85"
  52.                 src="http://www.9it.me"
  53.                 alt="lanfengye" />
  54.             <figcaption>phonegap100</figcaption>
  55.         </figure>
  56.     </aside>
  57.     <footer>http://bbs.phonegap100.come - Copyright 2011</footer>
  58. </body>
  59. </html>
复制代码
作者: 小雪    时间: 2013-9-27 15:43
相当不错，感谢无私分享精神！
作者: Guoyucheng    时间: 2015-5-1 14:45
人不错，学习学习 感觉phonegap+html越来越火了。
作者: deeder    时间: 2015-5-2 04:12
未来属于html5 phonegap 微信 wap全部搞定
作者: gc198975    时间: 2015-5-2 04:18
作者: deeder    时间: 2015-5-2 05:47
很不错，不错，学习学习。跨平台得顶起
作者: Guoyucheng    时间: 2015-5-2 07:07
好东西啊，谢谢分享 感谢phonegap中文网



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2