|
下面是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标签定义其所处内容之外的内容。比如说,以边栏的形式放上一些相关链接。
下面是一个简单的例子,其中的代码就用到了这些元素。- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Title</title>
- <link href="css/html5reset.css" rel="stylesheet" />
- <link href="css/style.css" rel="stylesheet" />
- </head>
- <body>
- <header>
- <hgroup>
- <h1>Header in h1</h1>
- <h2>Subheader in h2</h2>
- </hgroup>
- </header>
- <nav>
- <ul>
- <li><a href="#">Menu Option 1</a></li>
- <li><a href="#">Menu Option 2</a></li>
- <li><a href="#">Menu Option 3</a></li>
- </ul>
- </nav>
- <section>
- <article>
- <header>
- <h1>Article #1</h1>
- </header>
- <section>
- This is the first article. This is <mark>highlighted</mark>.
- </section>
- </article>
- <article>
- <header>
- <h1>Article #2</h1>
- </header>
- <section>
- This is the second article. These articles could be blog posts, etc.
- </section>
- </article>
- </section>
- <aside>
- <section>
- <h1>Links</h1>
- <ul>
- <li><a href="#">Link 1</a></li>
- <li><a href="#">Link 2</a></li>
- <li><a href="#">Link 3</a></li>
- </ul>
- </section>
- <figure>
- <img width="85" height="85"
- src="http://www.9it.me"
- alt="lanfengye" />
- <figcaption>phonegap100</figcaption>
- </figure>
- </aside>
- <footer>http://bbs.phonegap100.come - Copyright 2011</footer>
- </body>
- </html>
复制代码 |
|