HTML5的一部分新的语义元素: ? article ? aside ? figcaption ? figure ? footer ? header ? hgroup ? mark ? nav ? section ? time header和footer的作用分别是投河脚; nav将创造一个导航条或者菜单条; section和article将页面内容分为几个部分; aside元素用来安置附带的内容,比如说,以边栏的形式放上一些相关链接。 mark元素将重要文本高亮显示或标记出来; figure元素可以在内容中插入一张图(图像、图表、照片和代码片段等); figcaption元素能为图加上标题。 例子代码: <!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./Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Footer - Copyright 2011</footer> </body> </html> |
|