html5 新增的主体结构元素有：article，section，nav，aside，time，pubdate元素。

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

例子：

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
 </head>
 <body>
     <article>
     <header><p></p></header>
     <p></p>
     <footer><p></p></footer>
     </article>
 </body>
 </html>

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

例子：

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
 </head>
 <body>
     <article>
     <header><p></p></header>
         <article>
         <header></header>
         <p></p>
         <footer></footer>
         </article>
     <footer><p></p></footer>
     </article>
 </body>
 </html>

article元素可以表示插件。

例子：

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
 </head>
 <body>
     <article>
     <header><p></p></header>
         <article>
         <header></header>
         <p></p>
         <footer></footer>
         </article>
     <footer><p></p></footer>
     </article>

     <article>
         <object>
         <!--内嵌内容为当前页面-->
             <embed src="#" width="600" height="400"></embed>
         </object>
     </article>
 </body>
 </html>

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

例子：

<body>
    <section>
        <h1>标题</h1>
        <p>关于该标题的具体描述</p>
    </section>
</body>

注意不要与有着自己完整内容的article元素进行混淆。

例子：

<body>
    <article>
        <h1>这是一篇独立文章的标题</h1>
        <p>这是对于标题的描述或内容</p>
        <section>
            <h2>这是小标题1</h2>
            <p>这是对于小标题1的描述或内容</p>
        </section>
        <section>
            <h2>这是小标题2</h2>
            <p>这是对于小标题2的描述或内容</p>
        </section>
    </article>
</body>

article元素可以与section元素互换使用，因为article是一种特殊的section元素，它更强调独立性。

例子：

<body>
    <section>
        <h1>这是一篇独立文章的标题</h1>
        <p>这是对于标题的描述或内容</p>
        <article>
            <h2>这是小标题1</h2>
            <p>这是对于小标题1的描述或内容</p>
        </article>
        <article>
            <h2>这是小标题2</h2>
            <p>这是对于小标题2的描述或内容</p>
        </article>
    </section>
</body>

另外如果没有标题内容，不要使用section元素。

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

nav元素应用场景：

传统导航条、侧边栏导航、页内导航、翻页操作

例子：

<body>
    <nav>
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">开发文档</a></li>
        </ul>
    </nav>
</body>

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

可以被包含在article中，作为主要内容的附属信息。

<article>
        <h1>语法（标题）</h1>
        <p>文章的正文部分</p>
        <aside>
            <h1>名词解释</h1>
            <p>语法：指的是构建语言的一套规则</p>
        </aside>
</article>

可以在article外，在作为页面或站点信息内容的全局部分，例如侧边栏。

5、time元素

例子：

<body>
    <time datetime="2016-2-8">2016-2-8</time>
    <!--T表示日期与时间的间隔符-->
    <time datetime="2016-2-8T20:00">2016-2-8</time>
    <!--Z表示机器编码使用utc标准时间-->
    <time datetime="2016-2-8T20:00Z">2016-2-8</time>
    <!--+9:00表示另一地区的时差，如果本地编码和使用，则不需要-->
    <time datetime="2016-2-8T20:00+9:00">2016-2-8</time>
</body>

6、pubdate属性，布尔值，用在time上，表示文章或整个网页的发布日期。

例子：

<time datetime="2016-2-8" pubdate>2016-2-8</time>

[html5]学习笔记一 新增的主题结构元素的更多相关文章

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

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

  2. html5新增的主题结构元素

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

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Flutter学习笔记（23）--多个子元素的布局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

    如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...

  7. Flutter学习笔记（22）--单个子元素的布局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）

    如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...

  8. HTML5学习笔记（三）：语义化和新增结构元素

    在HTML5之前,使用机器来阅读一个网页是非常困难的,我们使用不同样式的div来标记不同的内容,所以实际上机器无法得知页面的哪个部分是正文,哪个部分是标题,那么在HTML5里,针对这个问题就引入了语义 ...

  9. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

随机推荐

  1. 常见的Js

    //根据单独的值切换所有复选框 $("input[type='checkbox']").prop("checked", function( i, val ) { ...

  2. javascript alert,confirm,prompt弹框用法

    1. alert是弹出警告框,在文本里面加入\n就可以换行. 2. confirm弹出确认框,会返回布尔值,通过这个值可以判断点击时确认还是取消.true表示点击了确认,false表示点击了取消. 3 ...

  3. Sematic库系列一

    最近在做项目时采用了sematic css 库,由于这个库的资料太少,在做项目中遇到很多问题,在这里做一些记录 1. 下拉框demo HTML 代码 <div class="field ...

  4. MyBatis 3 中使用存储过程

    转:http://zachary-guo.iteye.com/blog/1756689 Mybats 是 iBatis 被 Google 收购后重新命名的一个工程,当然也做了大量的升级.iBatis ...

  5. Android线程之异步消息处理机制（一）

    Android不允许在子线程中进行UI操作,但是有些时候,我们必须在子线程里去执行一些耗时任务,然后根据任务的执行结果来更新相应的UI控件.对于这种情况,Android提供了一套异步消息处理机制,完美 ...

  6. UDP传输包大小（转）

    源:UDP传输包大小 在进行UDP编程的时候,我们最容易想到的问题就是,一次发送多少bytes好? 当然,这个没有唯一答案,相对于不同的系统,不同的要求,其得到的答案是不一样的,我这里仅对 像ICQ一 ...

  7. NSDate详解及获取当前时间等常用操作

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建NSDate实例的类方法有 ...

  8. 查看错误日志发现有两个警告（ignored in --skip-name-resolve mode）

    2016-08-02 17:30:26 17374 [Warning] 'user' entry '@losnau-223.com' ignored in --skip-name-resolve mo ...

  9. CocoaPods安装和使用教程 分类： ios技术 ios相关 2015-03-11 21:53 48人阅读 评论(0) 收藏

    目录 CocoaPods是什么? 如何下载和安装CocoaPods? 如何使用CocoaPods? 场景1:利用CocoaPods,在项目中导入AFNetworking类库 场景2:如何正确编译运行一 ...

  10. PHPEXCEL实例-导出EXCEL

      PHPExcel 是相当强大的 MS Office Excel 文档生成类库,当需要输出比较复杂格式数据的时候,PHPExcel 是个不错的选择. <?php /* * 导出EXCEL *  ...