1.article 元素

解释：代表文档、页面和应用程序中独立的、完整的、可以被独自引用的内容。

主要用途：博客中的文章、评论，贴吧中的帖子，或者独立的插件等。

article中可以包含多种元素例如：

<article>
    <header>日记随笔</header>
    <p>发表日期：
        <time pubdate="pubdate">2014/09/18</time>
    </p>
    <p>今天早上下雨，天气很冷需要加衣服</p>
    <footer>我的博客</footer>
</article>

同时article中也可以嵌入article：

<html>
 <head></head>
 <body>
  <article>
   <h1>日志列表</h1>
   <section>
    <article>
     <header>
      日记随笔
     </header>
     <p>发表日期： <time pubdate="pubdate">2014/09/18</time> </p>
     <p>今天早上下雨，天气很冷需要加衣服...</p>
    </article>
    <article>
     <header>
      日记随笔
     </header>
     <p>发表日期： <time pubdate="pubdate">2014/09/18</time> </p>
     <p>今天早上下雨，天气很冷需要加衣服...</p>
    </article>
   </section>
  </article>
 </body>
</html>

2.section元素

解释：用于网站或者应用程序中的内容进行分块。一个section元素通常由标题和内容组成。

用途：划分不同内容区块。

section就是用于内容的分段，例如：

<article>
    <h1>NBA 球队</h1>
    <p>NBA用东西区共有30支球队组成</p>
    <section>
         <h2>金州勇士队</h2>
         <p>金州勇士队位于美国奥克兰。。。。。。</p>
    </section>
     <section>
         <h2>洛杉矶湖人队</h2>
         <p>洛杉矶湖人队位于美国娱乐中心洛杉矶。。。。。。</p>
    </section>
</article>

NBA球队介绍首先是一段独立的内容，因而使用article元素，而每支球队的介绍是彼此并列需要使用分段，所以使用section分隔。

其实这里的article 和section就算互换使用也未尝不可（article可以看做一种特殊的section），主要是看这段元素在你当前的网页中强调的是什么，强调独立性使用article，强调分段使用section。

可以访问https://gsnedders.html5.org/outliner/检查你代码结构中没有section 标题的部分，不要为没有标题的内容区块使用section标签。

注意：section并非一个普通的容器元素，当一个容器元素需要直接被定义样式或者脚本定义行为时，推荐使用的是div。

3.nav元素

解释：页面导航的链接组

用途：页面导航

nav元素就是用于包裹页面导航元素，例如：

<nav>
   <ul>
       <li>主页</li>
       <li>我的博客</li>
       <li>论坛</li>
       .....
   </ul>
</nav>

注意：不要使用menu元素代替nav

4.aside元素

解释：用来表示当前页面和文章的附属信息部分

用途：用于与当前页面相关的引用、边侧栏、广告和导航条。

aside主要有两种用法：

1.被包含在article中作为主要内容的分属信息部分，其中内容可以是与当前文章相关的参考资料、名词解释。

例如：

  <header>
    <h1>HTML5新元素</h1>
  </header>
  <article>
    <h1>aside标签的使用</h1>
    <p>aside标签同article一样都是HTML5中新加入的元素，但是一般用于与主体内容相关元素。如名词解释、引用等等。。。。。。。</p>
    <aside>
        <h1>名词解释</h1>
        <dl>
            <dt>article</dt>
            <dd>HTML5新元素，用于表示独立元素</dd>
        </dl>
    </aside>
  </article>

2.在article元素之外使用，作为页面或者站点全局的附属信息部分使用。例如友情连接、广告和其他文章列表。

  <aside>
    <h1>本周热门文章</h1>
    <ul>
        <li>
            <span>0</span><a href="....">iPhone6 回事目前技术上最先进的手机吗？</a>
        </li>
        <li>
            <span>1</span><a href="....">Git工作流指南：集中式工作流</a>
        </li>
        <li>
            <span>2</span><a href="....">图解KMP算法(Javascript实现)</a>
        </li>
        ...
    </ul>
  </aside>

HTML5的结构学习(1) --- 新增的主体结构元素的更多相关文章

  1. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

  2. HTML5的结构学习(3) --- 综合运用

    前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...

  3. html5新增的主体结构元素

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

  4. html5中新增非主体结构元素

    1.header元素 定义HTML文档的页眉,是一种具有引导和导航作用的结构元素 <header> <h1>header元素</h1> <nav> &l ...

  5. HTML5中新增的主体结构元素

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

  6. HTML5图形绘制学习（1）-- Canvas 元素简介

    Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...

  7. HTML5学习笔记一：新增主体结构元素

    Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...

  8. html5的结构

    目录 一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素 二.新增的非主体结构 ...

  9. [html5]学习笔记一 新增的非主体结构元素

    html新增加的非主体结构元素,主要是用来表示附加信息的,包括header,footer,hgroup,address元素. 1.header元素 header元素是一种具有引导和导航作用的结构元素, ...

随机推荐

  1. mysql函数全解析

    本文摘自:http://www.cnblogs.com/cocos/archive/2011/05/06/2039469.html mysql函数大全 对于针对字符串位置的操作,第一个位置被标记为1. ...

  2. ThreadLocal的使用 .

    早在Java 1.2推出之时,Java平台中就引入了一个新的支持:java.lang.ThreadLocal,给我们在编写多线程程序时提供了一种新的选择.使用这个工具类可以很简洁地编写出优美的多线程程 ...

  3. Ubunu下安装Docker

    安装Docker步骤如下: sudo apt-get update sudo apt-get install apt-transport-https sudo apt-key adv --keyser ...

  4. QObject的event函数就可以改写对消息的处理

    一个既自己处理Tab事件又自己处理某些按键事件,然后将其它不需自己处理的事件转发给基类处理: bool MyWidget::event(QEvent *event){ if (event->ty ...

  5. 对Qt for Android的评价（很全面，基本已经没有问题了，网易战网客户端就是Qt quick写的），可以重用QT积累20年的RTL是好事，QML效率是HTML5的5倍

    现在Qt不要光看跨平台了,Qt也有能力和原生应用进行较量的.可以直接去Qt官网查看他和那些厂商合作.关于和Java的比较,框架和Java进行比较似乎不且实际.如果是C++和Java比较,网上有很多文章 ...

  6. 报LinkageError的原因

    LinkageError是一个比较棘手的异常,准确的说它是一个Error而不是Exception.java api对它没有直接的解释,而是介绍了它的子类: Subclasses of LinkageE ...

  7. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  8. nginx+vaadin配置

    nginx+Vaadin的特殊性在于配置WEBSOCKET或LONG_POLLING.网上资料不多,自己多次尝试配置都不成功,后来终于找到这篇说明才得以配置成功,使用效果不错,介绍如下. 1./etc ...

  9. 【转】【经典算法】——KMP，深入讲解next数组的求解

    前言 之前对kmp算法虽然了解它的原理,即求出P0···Pi的最大相同前后缀长度k:但是问题在于如何求出这个最大前后缀长度呢?我觉得网上很多帖子都说的不是很清楚,总感觉没有把那层纸戳破,后来翻看算法导 ...

  10. IOS MVC

    简单的理解: V对M是不能通讯的. C对M通讯:API M对C通讯:Notification,KVO C对V通讯:Outlet V对C通讯:Target-action, Delegate,Dataso ...