1.HTML5 的结构元素

  HTML5 对HTML4所做的各种修改中,一个比较重大的修改就是为了使文档结构更加清晰、明确,容易阅读,增加了很多新的结构元素。学习一些新增的结构元素。

1.article

    article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。

 1     <article>

 2         <header>

 3             <h1>article</h1>

 4             <p>发表日期:<time pubdate="pubdate">2013/04/23</time></p>

 5         </header>

 6         <p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>

 7 

 8         <footer>

 9             <p><small>著作权归****所有</small></p>

10         </footer>

11     </article>

 

2.section元素

  section元素用于对网站或应用程序中页面上的内容进行分块。

    <section>

        <h1>section</h1>

        <p>section元素用于对网站或应用程序中页面上的内容进行分块。    </p>

    </section>

 

  section使用禁忌:

  1)不要将section元素用作设置样式的页面容器,那是div的工作;

  2)如果article 元素、aside或者nav元素更符合使用条件,不要使用section;

  3)不要为没有标题的内容区块使用section

3.nav元素

  nav元素是一个可以用作页面导航的连接组,其中的导航元素连接到其他页面或者当前页面的其他部分。

1     <nav>

2         <ul>

3             <li><a href="#">asp.net</a></li>

4             <li><a href="#">wcf</a></li>

5             <li><a href="#">wp</a></li>

6         </ul>

7     </nav>

 

  nav适用场合:

  1)传统导航条

  2)侧边栏导航

  3)页内导航

  4)翻页操作

 

4.aside元素

  aside用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

 1 <!DOCTYPE html>

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5     <title>aside元素示例</title>

 6 </head>

 7 <body>

 8     <header><h1>HTML5入门</h1></header>

 9     <article>

10         <h1>1.1 aside</h1>

11         <p>aside用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。</p>

12         <aside>

13             <h1>名词解释</h1>

14             <dl>

15                 <dt>HTML5</dt>

16                 <dd>HTML5 是…………………………</dd>

17             </dl>

18             <dl>

19                 <dt>aside</dt>

20                 <dd>aside 是…………………………</dd>

21             </dl>

22         </aside>

23     </article>

24 </body>

25 </html>

 

5.time元素与微格式

  1)微格式:利用HTML的class属性来对网页添加附加信息的方法,附加信息例如时间日期、电话号码、邮箱……

  2)time元素代表24小时中的某个时刻或某个日期。

1 <time datetime="2013-04-23">2013年04月23日</time>

 

6.header元素

   header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或者页面内的一个内容区块的标题,也可以包含其他内容,例如表格、搜索表单、或logo图片。

  

1 <header><h1>HTML5入门</h1></header>

 

7.hgroup

  hgroup元素是将标题及其子标题进行分组的元素。

  

 1     <article>

 2         <header>

 3             <hgroup>

 4                 <h1>文章主标题</h1>

 5                 <h2>文章子标题</h2>

 6             </hgroup>

 7             

 8         </header>

 9         <p>文章正文</p>

10     </article>

 

8.footer元素

  footer元素可以作为其上层父级内容区块的一个根区块的脚注。

  

1     <footer>

2         <ul>

3             <li>版权信息</li>

4             <li>站点地图</li>

5             <li>联系方式</li>

6         </ul>

7     </footer>

 

9.address元素

  address元素用来在文档中呈现联系信息。

 

    <address>

        <a href="#">百度</a>

        <a href="#">新浪</a>

        <a href="#">搜狐</a>

    </address>

 

 

 

 

  

    

你可能感兴趣的:(html5)