html5新增的主题结构元素

article元素

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

它可以是一篇博客或者报刊中的文章，一篇论坛帖子、一段用户评论或独立的插件。

或其他任何独立的内容。

article元素使可以嵌套使用的。

article元素可以用来表示插件。

<article>

     <header>

          <h1>极客学院</h1>

          <p>hello,欢迎来到极客学院</p>

     </header>

     <article>

          <header>

               作者

          </header>

          <p>评论</p>

          <footer>

              time 

          </footer>

     </article>

     <footer>

          <p>这是底部</p>

     </footer>

</article>

 

<article>

     <h1>这是一个内嵌页面</h1>

     <object>

          <embed src="" width="600" height=""></embed>

     </object>

</article>

 

section元素

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

一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；

当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

<section>

     <h1>苹果</h1>

     <p>这个苹果很甜</p>

</section>

*（通常不推荐没有标题内容使用section元素）

*（不要与article元素混淆）

<article>

     <h1>苹果</h1>

     <p>这是一个水果，可以吃。而且很好吃</p>

     <section>

          <h2>红富士</h2>

          <p>这是一个很不错的苹果</p>

     </section>

     <section>

          <h2>国光</h2>

          <p>这是一种外表很好看，也很甜的苹果</p>

     </section>

</article>

 

<section>

     <h1>水果</h1>

     <article>

         <h2>香蕉</h2>

          <p>内容</p> 

     </article>

     <article>

         <h2>香蕉</h2>

          <p>内容</p> 

     </article>

     <article>

         <h2>香蕉</h2>

          <p>内容</p> 

     </article>

     <article>

         <h2>香蕉</h2>

          <p>内容</p> 

     </article>

</section>

section元素强调的是分段或分块，article元素强调的是独立性

 

总结：

1.不要将section元素作为设置样式的页面容器，那是div的工作

2.如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素

3.没有标题内容，不要使用section元素。

 

 

nav元素

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

并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

nav元素应用场景：

     传统导航条

     侧边栏导航

     页内导航

     翻页操作

<nav>

     <ul>

          <li><a href="#">主页</a></li>

          <li><a href="#">开发文档</a></li>

     </ul>

</nav>

<article>

     <header>

          <h1>HTML5与CSS3的历史</h1>

          <nav>

               <li><a href="#">HTML5历史</a></li>

               <li><a href="#">css3历史</a></li>

          </nav>

     </header>

     <section>

          <h1>HTML5历史</h1>

          <p>.......</p>

     </section>

     <section>

          <h1>CSS3的历史</h1>

          <p>........</p>

     </section>

     <footer>

          <a href="#">删除</a>

          <a href="#">修改</a>

     </footer>

</article>

<footer>

     <p><small>版权声明：</small></p>

</footer>

 

注意：

html5中不能使用menu元素代替nav元素

menu使用在一系列发出命令的菜单上，是一种交互性的元素

 

 

aside元素

aside元素用来表示当前页面或文章的附属信息部分，

它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，

以及其他类似的有区别于主要内容的部分。

第一种用法：在article元素之内使用

（放在article标签里面，用来表示对主流内容的一个说明解释）

<header>

     <h1>js入门</h1>

</header>

<article>

     <h1>语法</h1>

     <p>文章的正文、。。。。。。。</p>

     <aside>

          <h1>名词解释</h1>

          <p>语法：这是一个对语言来说很重要的内容体</p>

     </aside>

</article>

<aside>

     <nav>

          <h2>评论</h2>

          <ul>

               <li><a href="#">2015-3-10</a></li>

               <li><a href="#">大牛：我想好好学习</a></li>

          </ul>

     </nav>

</aside>

第二种用法：在article元素之内进行使用

（作为也难或整体信息的附属部分，侧边栏等，文章列表，广告单元）

 

 

time元素与微格式

微格式：是一种利用html5通过class属性来对网页添加附属信息的方法

附加的信息有可能是新闻发生的时间，日期，个人电话号码，企业邮箱等，

在html5之前就已经使用，但是发现在使用时间和机器编码上出现了一些问题，编码过程中会产生一下歧义。

html5增加了一个新元素time，来无歧义的明确的对机器码时间，日期进行编码，并且让人易读。

 

time表示某个时刻或某个日期，允许带时差。

<time datetime="2015-10-10">2015-10-10</time>

<time datetime="2015-10-10T20:00">2015-10-10</time>   日期和时间之间用T表示，间隔分隔符

<time datetime="2015-10-10T20:00Z">2015-10-10</time>     表示机器编码用的是UTC标准时间

<time  datetime="2015-10-10T20:00+09:00">2015-10-10</time>     表示另一个地区的时差

 

pubdate属性(true false)

可以用在article元素中的time元素上，表示time时间代表了整个文章或页面的发布日期。

<article>

     <header>

          <h1>苹果手机</h1>

          <p>

              发布日期：

               <time datetime="2015-10-10" pubdate>2015-10-10</time>  

          </p>

           <p>

               舞会时间：

               <time datetime="2015-10-12">2015-10-12</time>

          </p>           

     </header>

</article>

转载于:https://www.cnblogs.com/baixuemin/p/6495281.html