html5定义页脚标签,使用 HTML5 中的新标签和新属性

新标签主要分成三个部分：语义化标签、功能性标签及新的输入控件类型

语义化标签

、、

、

、、、、、、、

这些新的语义化标签目前得到了大部分主流浏览器的支持，建议直接使用；如果是在IE 8及以下版本，无法识别这些标签，可通过一些技术手段和第三方js库支持。

功能性标签

、、、 等

这些标签的使用代替了原来需要使用第三方插件才能实现的效果，目前，这些功能性标签或多或少存在一些浏览器兼容问题或是性能问题，在使用过程中需要谨慎，尽量在多个浏览器中多做功能和性能测试。

表单输入类型

tel、search、url、date、email、number、range、color 等

在不支持的浏览器中，这些新表单输入控件会平稳降级为普通的ext类型输入控件。推荐在项目中直接使用这些新的输入控件类型。

新标签解释

标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

水果

苹果

苹果是撒？

桔子

桔子是撒？

中国人物

三国、两晋、南北朝

三国

猛将猛将猛将猛将

两晋

猛将猛将猛将猛将

用于页面内容的独立分块，往往是文章的一段

通常由内容和标题组成，没有标题的内容不推荐使用 section

一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section，不要将section用作设置样式的容器

标签标记定义一篇文章 (article可以看成是一种特殊种类的section元素，它比section更强调独立性)从语义化上看为文档、页面

是我标签

我是段落

我的内容

通常是一篇文章、一个页面、一个独立完整的内容模块

一般会带个标题，并放在 header 标签中

article 元素可以互相嵌套

标签定义 section 或 document 的页眉

网站标题

网站副标题

通常包含 h1-h6 元素 或 hgroup

作为整个页面或者一个内容块的标题；也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo

整个页面没有限制，header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素

如果 hgroup 或 h1-h6 自己就能工作的很好，那就不要用header

标签用于对网页或区段(section)的标题进行组合，当元素有多个层级时，该元素可以将h1-h6元素放在其内，譬如文章的主标题和副标题的组合

这个标签在最新的 HTML5.1 版中被废除？

主标题

副标题

如果只需要一个h1-h6标签就不用hgroup

如果有连续多个h1-h6标签就用hgroup

如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

标签用于对元素进行组合。使用

元素为元素组添加标题，标签规定独立的流内容(图像、图表、照片、代码等等)

PRC

The People's Republic of China was born in 1949...

[站外图片上传中……(1)]

figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

figure用来代替原来li标签，figcaption用来替代p标签

标签定义 figure 元素的标题

PRC

figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置

标签代表页面的导航链接区域，用于定义页面的主要导航部分

• HTML5
• CSS3
• JavaScript

应用位置譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上nav只能用在页面主要导航部分上

页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了

标签被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有 关的相关资料、标签、名词解释等

内容

在article元素之外使用作为页面或站点全局的附属信息部分

最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面

标签定义 section 或 document 的页脚

© 2016

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息

可以是 "网页" 或任意 "section" 的底部部分

没有个数限制，除了包裹的内容不一样，其他跟header类似

语义化结构

以前的div写法

html5 推荐写法

HTML5中新增的标签属性

标签中的 target 属性

和 中的 placeholder、required 及 autofocus 属性

输入控件上的这几个属性是非常有用的，增强了用户体验

标签上的自定义属性 data-*

# 对应的读取和设置数据的方式如下：

var data = document.getElementById('data');

//获取数据

data.dataset['msg'];

//设置数据

data.dataset['msg'] = 'World';

# 另外一种情况

//这类读写属性方式采用 Pascal写法：首字母小写，以-后的大写开头

data.dataset['lastValue'] = '88';

# 此API已经得到了大部分主流浏览器的支持，但 IE7 及以下浏览器并不支持，可使用jquery的data('value')