1.  article 主体结构元素

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

2. section

section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个元section元素通常由内容以及标题组成

 <html>

 <body>

 <section>

 <h1>WWF</h1>

 <p>

 The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

 </p>

 </section>

 <section>

 <h1>WWF's Panda symbol</h1>

 <p>

 The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

 </p>

 </section>

 </body>

 </html>

显示

3. nav

nav元素用于定义导航链接的内容，可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其它部分

 <!DOCTYPE html>

 <html>

 <body>

 <nav>

 <a href="/html/">HTML</a> |

 <a href="/css/">CSS</a> |

 <a href="/js/">JavaScript</a> |

 <a href="/jquery/">jQuery</a>

 </nav>

 </body>

 </html>

显示

4. aside元素

定义article元素以外的内容，其内容与article的内容相关。

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

根据目前的规范，aside元素有两种使用方法：

  1. 被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

  2. 在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

 <body>

 <header>

     <h1>My Blog</h1>

 </header>

 <article>

     <h1>My Blog Post</h1>

     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

         incididunt ut labore et dolore magna aliqua.</p>

     <aside>

         <h1>Glossary</h1>

         <dl>

             <dt>Lorem</dt>

             <dd>ipsum dolor sit amet</dd>

         </dl>

     </aside>

 </article>

 <aside>

     <h2>Blogroll</h2>

     <ul>

         <li><a href="#">My Friend</a></li>

         <li><a href="#">My Other Friend</a></li>

         <li><a href="#">My Best Friend</a></li>

     </ul>

 </aside>

 </body>

显示

5. time

定义时间和日期，

①time属性中的datetime属性指定机器读取的日期和时间，time元素的内容显示在网页上，datetime属性中的大写字母T表示时间，Z表示UTC标准时间

②pudate属性，表示article元素的发布时间，pudate属性是一个可选的布尔值

 <!DOCTYPE HTML>

 <html>

 <body>

 <p>

 我们在每天早上 <time>9:00</time> 开始营业。

 </p>

 <p>

 我在 <time datetime="2010-02-14" pubdate>情人节</time> 有个约会。

 </p>

 </body>

 </html>

显示   

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

  1. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  2. HTML5新增的结构元素

    HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...

  3. html5--select与HTML5新增的datalist元素

    html5--select与HTML5新增的datalist元素 学习要点 掌握select元素与datalist元素的使用 select元素 用来建立一个下拉菜单选项列表 不仅可以在表单中使用,还可 ...

  4. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

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

      1.article 元素 解释:代表文档.页面和应用程序中独立的.完整的.可以被独自引用的内容. 主要用途:博客中的文章.评论,贴吧中的帖子,或者独立的插件等. article中可以包含多种元素例 ...

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

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

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

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

  8. 如何让老式浏览器支持html5新增的语义元素

    html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一 ...

  9. IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

    HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...

随机推荐

  1. shell生成指定范围内的随机数

    #!/bin/bash read -p "请输入起始数:" min read -p "请输入终止数:" max if [ $min -gt $max ] the ...

  2. 关于java中的MANIFEST.MF 文件内容

    打开Java的JAR文件我们经常可以看到文件中包含着一个META-INF目录, 这个目录下会有一些文件,其中必有一个MANIFEST.MF,这个文件描述了该Jar文件的很多信息.可以简化Java应用程 ...

  3. 利用QMP和QEMU虚拟机交互的几种方式

    QMP是一种基于JSON格式的传输协议,我们能利用它与一个QEMU虚拟机实例进行交互,例如查询,更改虚拟机的状态,获取设备信息等等.下面是几种创建QMP的方法以及对其它的一些基本命令的使用: 1.基于 ...

  4. COGS247. 售票系统[线段树 RMQ]

    247. 售票系统 ★★☆   输入文件:railway.in   输出文件:railway.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 某次列车途经C个城市,城市 ...

  5. 如何正确使用 Composer 安装 Laravel 扩展包

    我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自 这个文档 的: composer update 这个命令在我们现在的逻辑中,可能会对项目造成巨大伤害. 因为 composer ...

  6. 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...

  7. 系统修改利器XueTr

    Windows系统修改利器XueTr 周银辉 在Windows下如果遇到某些进程弄死结束不了,某些文件弄死删不掉,拷贝不出来 (可能是因为你没有管理员权限,可能是因为人家是病毒,可能是系统保护文件,可 ...

  8. javaScript 中的布尔运算符 && 和 ||

    布尔运算符 && 和 ||的返回结果不一定是布尔值!由此来展开一定的研究及理解. 1.首先先介绍下常见的数据类型转化为bool后的值. (常用地方)在if表达式中,javascript ...

  9. SQLserver中用convert函数转换日期格式

    SQLserver中用convert函数转换日期格式 2008-01-23 15:47 SQLserver中用convert函数转换日期格式2008-01-15 15:51SQLserver中用con ...

  10. ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表

    zk做为分布式架构中的重要中间件,通常会在上面以节点的方式存储一些关键信息,默认情况下,所有应用都可以读写任何节点,在复杂的应用中,这不太安全,ZK通过ACL机制来解决访问权限问题,详见官网文档:ht ...