[html5]学习笔记一 新增的非主体结构元素
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]学习笔记一 新增的非主体结构元素的更多相关文章
- [html5]学习笔记一 新增的主题结构元素
html5 新增的主体结构元素有:article,section,nav,aside,time,pubdate元素. 1. article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引 ...
- HTML5新增的主体元素和新增的非主体结构元素
HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...
- HTML5新增的非主体结构元素
-------------------siwuxie095 HTML5 新增的非主体结构元素 1.header 元素 ...
- HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...
- html5中新增的非主体结构的元素
html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...
- Git学习笔记（二） · 非典型性程序猿
远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题
字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...
- Ibatis自动生成dao sqlmapper文件和domain文件过程
generator自动生成mybatis的xml配置.model.map等信息: 1.下载mybatis-generator-core-1.3.2.jar包. 网址:http://cod ...
- Varnish CentOS 6.4 x64
CentOS 6.4 x64 Varnish 安装配置 Varnish的官方网址为http://varnish-cache.org 首先下载Varnish 稳定版本3.0.3 wget ...
- libconfig第一篇———使用指南
官网:http://www.hyperrealm.com/libconfig/ 1 libconfig是什么? Libconfig是一个结构化的配置文件库,它可以定义一些配置文件,例如test.cfg ...
- Post data using ajax in laravel 5
转自:http://www.tuicool.com/articles/2u2mmmu Post data using ajax in laravel 5 to controller If you ar ...
- matlab unique 顺序不变
对于一个向量,使用unique去重后会自动排序,为了保持原顺序: A = [5,1,8,5,2,8,3,9,6,1];[i,j] = unique(A,'first');B = A(sort(j)); ...
- iOS 获取本地文件的各种坑
1.无论:TXT,EPUB,PDF等各种格式的文件,保存到本地的时候,最好都保存成字母或者数字,不要保存成汉字,否则,在取文件的时候,由于编码的问题,各种瓦特 2.如果文件名真的保存成了汉字,那么进行 ...
- 算法系列001---dfs|多叉|解空间树理解
1.研究范围 1)多叉树,图的遍历 2)回溯法的解空间树=多叉树的遍历 2.研究方法 我们现在研究的是多叉树的遍历,突然想到为什么不能直接用二叉树的遍历方法呢?我们抱着这个问题,先找到多叉树的结构不同 ...
- DTCoreText
背景:使用DTCoreText实现epub阅读器的内容排版 基础准备:coretext,HTML+CSS渲染机制,epub文件格式 一:ios端epub实现:主要是两种,coretext,webvie ...
- 【noip】华容道
描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...