HTML5新增的主体结构元素_h5新增结构元素artic-CSDN博客

1.article元素

article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。它可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或独立的插件，或其他任何独立的内容。

article元素是可以嵌套使用的；

article元素用来表示插件；

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>article元素</title>  
 </head>  
 <body>  
   
     <article>  
         <header>  
             <h1>HTML5</h1>  
             <p>欢迎学习HTML！</p>  
         </header>  
   
         <!--article是可以嵌套的-->  
         <article>  
             <header>开发者</header>  
             <p>Web开发者</p>  
             <footer>评论</footer>  
         </article>  
   
         <footer>  
             <p>这是底部</p>  
         </footer>  
     </article>  
   
     <!--article是可以内嵌的-->  
     <article>  
         <h1>这是一个内嵌页面</h1>  
         <object>  
             <embed src="#" width="600" height="400"></embed>  
         </object>  
     </article>  
   
 </body>  
 </html>  

效果如下：

。

2.section元素

section元素对于网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而不是section。

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>section元素</title>  
 </head>  
 <body>  
   
   
 <!--通常不推荐没有标题内容使用section元素-->  
     <!--不要与article元素混淆-->  
     <section>  
         <h1>苹果</h1>  
         <p>这是一种水果</p>  
     </section>  
   
     <article>  
         <h1>苹果</h1>  
         <p>这是一种水果</p>  
   
         <section>  
             <h2>红富士</h2>  
             <p>这个苹果很好吃！！</p>  
         </section>  
   
         <section>  
             <h2>洛川苹果</h2>  
             <p>这个是陕西盛产的苹果！！</p>  
         </section>  
   
     </article>  
   
   
     <!--注意section和article的区别-->  
   
     <section>  
         <h1>有很多水果</h1>  
   
         <article>  
             <h2>苹果</h2>  
             <p>介绍</p>  
         </article>  
   
         <article>  
             <h2>香蕉</h2>  
             <p>介绍</p>  
         </article>  
   
         <article>  
             <h2>西瓜</h2>  
             <p>介绍</p>  
         </article>  
     </section>  
   
 使用section注意事项：  
 1.不要将section元素作为设置样式的页面容器；  
 2.如果article元素，aside元素，nav元素更符合使用条件，那就不要使用section元素；  
 3.没有标题内容，不要使用section元素。  
   
 </body>  
 </html>  

3.nav元素

nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

nav元素应用场景：

（1）传统导航条；

（2）侧边栏导航；

（3）页内导航；

（4）翻页操作；

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>nav元素</title>  
 </head>  
 <body>  
   
 <!--HTML5中不能使用menu元素代替nav元素-->  
 <nav>  
     <ul>  
         <li><a href="#">主页</a></li>  
         <li><a href="#">开发文档</a></li>  
     </ul>  
 </nav>  
   
 <article>  
     <header>  
         <h1>HTML5与JS的历史</h1>  
         <nav>  
             <ul><a href="#">HTML5的历史</a></ul>  
             <ul><a href="#">JS的历史</a></ul>  
         </nav>  
     </header>  
   
     <section>  
         <h1>HTML5的历史</h1>  
         <p>........</p>  
     </section>  
   
     <section>  
         <h1>JS的历史</h1>  
         <p>........</p>  
     </section>  
   
     <footer>  
         <a href="#">删除</a>  
         <a href="#">修改</a>  
     </footer>  
 </article>  
   
 <footer>  
     <p>  
         <small>版权声明。。。</small>  
     </p>  
 </footer>  
   
   
 </body>  
 </html>  

4.aside元素

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

示例代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>aside元素</title>  
 </head>  
 <body>  
   
     <header>  
         <h1>HTML5入门</h1>  
     </header>  
   
     <article>  
         <h1>语法</h1>  
         <p>下面开始讲解。。。</p>  
         <aside>  
             <h1>名词解释</h1>  
             <p>语法很重要</p>  
         </aside>  
     </article>  
   
   
 <aside>  
   
     <nav>  
         <h2>评论</h2>  
         <ul>  
             <li><a href="#">2015-9-29</a></li>  
             <li><a href="#">第二。。</a></li>  
         </ul>  
     </nav>  
   
 </aside>  
   
 </body>  
 </html>  

5.time元素与微格式

time元素示例代码：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>time元素</title>  
 </head>  
 <body>  
   
     <time datetime="2015-10-10">2015-10-10</time>  
     <time datetime="2015-10-10T20:00">2015-10-10</time>  
     <time datetime="2015-10-10T20:00Z">2015-10-10</time>  
     <time datetime="2015-10-10T20:00+09:00">2015-10-10</time>  
   
 </body>  
 </html>  

pubdate元素示例代码：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>pubdate属性</title>  
 </head>  
 <body>  
   
     <article>  
         <header>  
             <h1>苹果</h1>  
             <p>发布日期  
                 <time datetime="2015-10-10" pubdate="true">2015-10-10</time>  
             </p>  
         </header>  
     </article>  
   
 </body>  
 </html>  