PhoneGap中文网

 找回密码
 立即注册
查看: 24676|回复: 6
打印 上一主题 下一主题

HTML5 新增了那些元素

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-7-4 20:13:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
下面是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>
复制代码
it营
回复

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
沙发
发表于 2013-9-27 15:43:21 | 只看该作者
相当不错,感谢无私分享精神!
it营
回复 支持 反对

使用道具 举报

0

主题

16

帖子

57

积分

注册会员

Rank: 2

积分
57
板凳
发表于 2015-5-2 05:47:54 | 只看该作者
很不错,不错,学习学习。跨平台得顶起
回复 支持 反对

使用道具 举报

0

主题

16

帖子

51

积分

注册会员

Rank: 2

积分
51
地板
发表于 2015-5-1 14:45:42 | 只看该作者
人不错,学习学习 感觉phonegap+html越来越火了。
回复 支持 反对

使用道具 举报

0

主题

16

帖子

51

积分

注册会员

Rank: 2

积分
51
5#
发表于 2015-5-2 07:07:14 | 只看该作者
好东西啊,谢谢分享 感谢phonegap中文网
回复 支持 反对

使用道具 举报

0

主题

16

帖子

57

积分

注册会员

Rank: 2

积分
57
6#
发表于 2015-5-2 04:12:54 | 只看该作者
未来属于html5 phonegap 微信 wap全部搞定
回复 支持 反对

使用道具 举报

0

主题

20

帖子

58

积分

注册会员

Rank: 2

积分
58
7#
发表于 2015-5-2 04:18:21 | 只看该作者
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-12-27 01:08 , Processed in 0.069636 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表