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>

html5新增的主题结构元素的更多相关文章

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

    html5 新增的主体结构元素有:article,section,nav,aside,time,pubdate元素. 1. article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引 ...

  2. HTML5新增的非主体结构元素

    -------------------siwuxie095                                 HTML5 新增的非主体结构元素         1.header 元素   ...

  3. HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...

  4. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  5. html5学习笔记(3)--主题结构元素-1

    Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  6. HTML5新增的主体元素和新增的非主体结构元素

    HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...

  7. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  8. 【HTML5 3】《html5 开发精要与实例讲解》 step2 -- 结构元素 (待续)

    主要内容:通过 一个博客网站和一个企业网站的制作 展示如何运用HTML5中的各种 结构元素,构建出一个语义清晰,结构分明的Web3.0时代的网站. 案例1:用HTML5中的结构元素构建一个博客网站 疑 ...

  9. HTML5学习笔记(三):语义化和新增结构元素

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

随机推荐

  1. Hadoop一些要注意的点

    1.大多小文件的劣处: a. 生成更多的map任务,额外的开销: b. 每个文件都需要守址时间: c. HDFS上namenode需要占用内存空间:

  2. Android驱动开发之earlysuspend睡眠模式--实现代码【转】

    本文转载自:http://blog.csdn.net/MyArrow/article/details/8136018 (1)添加头文件: #include <linux/earlysuspend ...

  3. 类、对象(java基础知识六)

    1.Java约定俗成 java约定俗成 1,类名接口名 一个单词首字母大写,多个单词每个单词首字母都大写 2,方法名和变量名 一个单词全部小写,多个单词从第二个单词首字母大写 建议:如果能用英语尽量用 ...

  4. Android Studio 3.0.1模拟器启动报错Emulator: glClear:466 GL err 0x502

    启动模拟器时,报了一大堆以上错误 启动起来之后, Emulator的画面没有正常显示, 点击鼠标会闪烁, 有时还会上下颠倒 有可能是驱动版本太低不支持一些特性,因此就下载个驱动精灵.升级了显卡驱动,结 ...

  5. SPFA 最短路 带负权边的---- 粗了解

    SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法大致流程是用一个队列来进行维护. 初始时将源加入队列 ...

  6. IOS中延时执行方式

    本文列举了四种延时执行某函数的方法及其一些区别.假如延时1秒时间执行下面的方法. - (void)delayMethod { NSLog(@"execute"); } 1.perf ...

  7. BZOJ_5311_贞鱼_决策单调性+带权二分

    BZOJ_5311_贞鱼_决策单调性+带权二分 Description 众所周知,贞鱼是一种高智商水生动物.不过他们到了陆地上智商会减半. 这不?他们遇到了大麻烦! n只贞鱼到陆地上乘车,现在有k辆汽 ...

  8. Centos6.6安装后一些常见问题详解

    <一>.centos6.6通过VM最小化安装后上不了网的解决方法: 在安装centos6.6时,没有在网络设置中设置网卡自动启动的,安装完系统后,是不能联网的,解决方法如下: vi/etc ...

  9. 通过链接将JSP页面中一变量传到另一JSP界面中

    A.jsp 发送 <a herf="B.jsp?name=<%=name%>">传递到B页面</a> B.jsp  接收 <%String ...

  10. HTTP错误code大全

    100 - Continue 101 - Switching Protocols Top Success Codes 200 - OK 201 - Created 202 - Accepted 203 ...