您的位置：首页 > Web前端 > HTML5

html5新增的主体结构元素

2016-12-30 17:20 537 查看

1. article 主体结构元素

通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在 header 标签中，article 元素可以互相嵌套，使用频率极高，强调独立性，多注意下与 header 标签的使用

2. section

section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个元section元素通常由内容以及标题组成

1 <html>
2 <body>
3
4 <section>
5 <h1>WWF</h1>
6 <p>
7 The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
8 </p>
9 </section>
10
11 <section>
12 <h1>WWF's Panda symbol</h1>
13 <p>
14 The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
15 </p>
16 </section>
17
18 </body>
19 </html>

显示

3. nav

nav元素用于定义导航链接的内容，可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其它部分

1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <nav>
6 <a href="/html/">HTML</a> |
7 <a href="/css/">CSS</a> |
8 <a href="/js/">JavaScript</a> |
9 <a href="/jquery/">jQuery</a>
10 </nav>
11
12 </body>
13 </html>

显示

4. aside元素

定义article元素以外的内容，其内容与article的内容相关。

元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，

aside

元素有两种使用方法：

被包含在

article

中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在

article

之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

1 <body>
2 <header>
3     <h1>My Blog</h1>
4 </header>
5 <article>
6     <h1>My Blog Post</h1>
7     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
8         incididunt ut labore et dolore magna aliqua.</p>

9     <aside>
10         <h1>Glossary</h1>
11         <dl>
12             <dt>Lorem</dt>
13             <dd>ipsum dolor sit amet</dd>
14         </dl>
15     </aside>

16 </article>
17
18 <aside>
19     <h2>Blogroll</h2>
20     <ul>
21         <li><a href="#">My Friend</a></li>
22         <li><a href="#">My Other Friend</a></li>
23         <li><a href="#">My Best Friend</a></li>
24     </ul>
25 </aside>

26 </body>

显示

5. time

定义时间和日期，

①time属性中的datetime属性指定机器读取的日期和时间，time元素的内容显示在网页上，datetime属性中的大写字母T表示时间，Z表示UTC标准时间

②pudate属性，表示article元素的发布时间，pudate属性是一个可选的布尔值

1 <!DOCTYPE HTML>
2 <html>
3 <body>
4
5 <p>
6 我们在每天早上 <time>9:00</time> 开始营业。
7 </p>
8
9 <p>
10 我在 <time datetime="2010-02-14" pubdate>情人节</time> 有个约会。
11 </p>
12
13 </body>
14 </html>

显示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航