码迷,mamicode.com
首页 > Web开发 > 详细

html5中的一些新语义标签

时间:2016-02-24 22:24:22      阅读:920      评论:0      收藏:0      [点我收藏+]

标签:

 1 <header>
 2     <nav>
 3         <ul>
 4             <li><a href="">栏目1</a></li>
 5             <li><a href="">栏目2</a></li>
 6             <li><a href="">栏目3</a></li>
 7         </ul>
 8     </nav>
 9 </header>
10 
11 <main>
12 <article>
13     <header>
14         <hgroup>
15         <h1>这是h1标题</h1>
16         <h2>这是文章的副标题</h2>
17         </hgroup>
18         <p>这是头部的文字,文章发布于<time>2016-02-24</time></p>        
19     </header>
20     <div class="content">
21         <p>这里是文章的正文。</p>
22         <figure>
23             <img src="xxx.jpg" alt="xxx">
24             <figcaption>这里是图片的图片标题</figcaption>
25         </figure>
26     </div>
27 </article>
28 </main>
29 
30 <aside>
31     <h2>相关文章推荐</h2>
32     <ul>
33         <li>文章1</li>
34         <li>文章2</li>
35     </ul>
36 </aside>
37 <footer>
38     <p>这是页脚的文字</p>
39 </footer>

 

html5最重要的特性之一,是引入了一些具有语义的标签,使得页面的代码更可读和结构化。
基本上来说,IE8以下的版本对html5的新标签支持非常差,需要一些方法来使这些浏览器支持这些新标签。


<time>标签:
用于标记时间和日期。

<nav>标签:
用来标注导航链接。一个页面可以包含多个nav区块。

<main>标签:
标记文档的主要内容。

<article>标签:
表示一个完整的、自成一体的内容块,如博客文章、新闻报道或者用户评论等。<article>标签应该包含所有相关的内容,包括标题、作者署名以及正文等。

<header>标签:
用来描述或导航包含它的父级区块,通常需要包含h标签。在一个网页中可以有多个header标签。如同时有网页的header和正文的header。

<hgroup>标签:
如果除了主标题,还有一个副标题,则应该把h1和h2放到hgroup中,此时h2不表示下面文字的子标题,而是整篇文章的副标题。

<figure>标签:
用来标记插图区域。插图是文章中的附图,在文章中会提到它。

<figcaption>标签:
用来标记题图。

<aside>标签:
用来标记与周围内容关系不太密切的内容,如广告、侧边栏等。

<section>标签:
是一个带标题的独立性内容块。

<footer>标签:
用来标记网页的页脚,放置一些网站版权信息等不太重要的信息。

html5中的一些新语义标签

标签:

原文地址:http://www.cnblogs.com/hqqq/p/5215143.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!