html新增加的非主体结构元素，主要是用来表示附加信息的，包括header,footer,hgroup,address元素。

1、header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。

过去常用div元素承载头部、内容和底部，如下：

 <body>
     <div class="header"></div>
     <div class="content"></div>
     <div class="footer"></div>
 </body>

现在则改变写法，如下：

 <body>
     <head></head>
     <article></article>
     <footer></footer>
 </body>

用来做导航，如下：

 <body>
     <header>
         <h1>IT new technology</h1>
         <a href="http://www.jikexueyuan.com">jikexueyuan</a>
         <nav>
             <ul>
                 <li><a href="#">learn</li>
                 <li><a href="#">technology</li>
                 <li><a href="#">hacker</li>
             </ul>
         </nav>
     </header>
 </body>

2、footer元素

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

过去用div元素来承载内容，如下：

 <body>
     <div class="footer">
         <ul>
             <li><a href="#">版权信息</li>
             <li><a href="#">站点地图</li>
             <li><a href="#">联系方式</li>
         </ul>
     </div>
 </body>

现在则这样写，如下：

 <body>
     <footer>
         <ul>
             <li><a href="#">版权信息</li>
             <li><a href="#">站点地图</li>
             <li><a href="#">联系方式</li>
         </ul>
     </footer>
 </body>

3、hgroup元素

hgroup是将标题及子标题进行分组的元素，hgroup通常会将h1~h6的元素进行分组，譬如一个内容区块的标题及其子元素算是一组。

 <body>
     <header>
         <hgroup>
             <h1>标题1</h1>
             <h2>标题1.1</h2>
         </hgroup>
         <hgroup>
             <h1>标题2</h1>
             <h2>标题2.2</h2>
         </hgroup>
     </header>
 </body>

4、address元素

address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address不止用来呈现这些内容，还用来展示跟文档相关的联系人的所有联系信息。

 <body>
     <address>
         <a href="#">iwen</a>
         <a href="#">ime</a>
     </address>
 </body>

5、html5的大纲编排的规则

1）显示编排内容区域块

使用section等元素来创建结构

2）隐示编排内容区域块

不使用section等元素，而是根据网页要求，书写h1~h6级标题来创建

3）标题分级

h1~h6，标题的级别是不同的；如果使用级别更低的h标签，则生成下级的区域块；如果使用同级或者更高级别的h标签，则生成新的区域块

4）不同区域块使用相同标题

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

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

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

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

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

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

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

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

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

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

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  6. Git学习笔记（二） · 非典型性程序猿

    远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...

  7. html5学习笔记一

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

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

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

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

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

随机推荐

  1. mysql安装使用----1 安装和启动

    1 安装 Fedora16/17 Mysql 安装及配置 1.安装 Mysql Server # yum install mysql mysql-server 2.开启 MySQL server 及开 ...

  2. openstack controller ha测试环境搭建记录（一）——操作系统准备

    为了初步了解openstack controller ha的工作原理,搭建测试环境进行学习. 在学习该方面知识时,当前采用的操作系统版本是centos 7.1 x64.首先在ESXi中建立2台用于测试 ...

  3. Linux 服务器 常规性能优化设置

    为能使linux服务器能最大化的工作,通常需要对linux的通常设置做适当的更改,而这又往往会依据服务器的类型不同,而有所变化. 对于通常的多连接的服务器其参数设置,可在 /etc/sysctl.co ...

  4. TCP协议和UDP协议的区别

    1. TCP协议面向连接. UDP协议面向非连接 (有无链接)2. TCP协议传输速度慢. UDP协议传输速度快 (传输速度)3. TCP协议保证数据顺序. UDP协议不保证 (数据的有序性. 在IP ...

  5. laravel5 html引用问题

    1. Composer 安装 编辑 composer.json 文件, require 节点下增加: "illuminate/html": "~5.0" 然后 ...

  6. 使用LIBUSB实现和自定义通讯设备通讯--MFC代码在末尾

    LIBUSB是一款简单好用的USB通讯开发库,一般HID设备用该库通讯能大大降低开发周期,使用如下,首先需要为设备安装驱动 在libusb的bin目录下有一个inf_wirzed.exe的文件,该文件 ...

  7. IO的五种模型

    为了区分IO的五种模型,下面先来看看同步与异步.阻塞与非阻塞的概念差别. 同步:所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实绝大多数函数都是同步调用(例如 ...

  8. LPC2478时钟模块详解

    时钟框图如上图,系统时钟来源分别是内部4M的RC振荡器和外置晶振,RTC模块在某些情况下也可以作为主时钟,经过系统时钟选择s\de时钟需要经过PLL倍频(或者不倍频),处理过的PLL输出USB时钟分频 ...

  9. IOS第三方数据库--FMDB 分类： ios技术 2015-03-01 09:38 57人阅读 评论(0) 收藏

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  10. 用anaconda的pip安装第三方python包的日志

    用anaconda的pip安装第三方python包的日志 启动anaconda命令窗口: 开始> 所有程序> anaconda> anaconda prompt 会得到两行提示: D ...