TML5元素

在上一篇中我们介绍了元素中新增的主体结构，那么与之对应就是元素中新增的非主体结构了。在HTML5中，非主体结构元素表示逻辑结构或附加信息。本次主要为大家介绍HTML5中新增的几个非主体结构元素的定义及使用方法和例子。

1.header元素

header元素用于定义HTML文档的页眉，是一种具有引导和导航作用的结构元素。header元素通常表示整个页面或者页面内的一个内容区块的标题。一般情况，一个header元素内嵌一个heading元素（h1~h6）。元素的示例如下图：

HTML5中的header元素

在这段代码中，h1元素表示该区域内容的标题，nav元素表示一个导航列表，除此之外，header元素的内容还可以是数据表格、搜索表单或相关的logo图片，这也包括我们接下来要介绍的hgroup元素。不过要注意是，header元素应该放在页面的开头，而且可以存在多个。

2.hgroup元素

hgroup元素用于对header元素标题及其子标题进行分组。在使用header元素时，我们通常会嵌入一个heading（h1~h6）元素，那是因为我们只有一个标题，并且没有子标题。如果header元素的标题下还有子标题，这时候就需要使用hgroup元素对其进行分组。示例代码如下：

HTML5中的hgroup元素

3.footer元素

footer元素用于定义区块的脚注，这个区块可以是article元素或section元素。通常情况下，footer元素会包含创作者的姓名、文档的创建时间、联系方式和版权信息等。示例代码如下图：

HTML5中的footer元素

4.address元素

address元素用于定义文档作者或者拥有者的联系信息，包括文档作者或文档维护者的姓名、网站、电子邮件、联系电话等。如果address元素位于article元素内部，则它表示该文章作者或拥有者的联系信息。一般情况下，address元素应该添加到网页的头部或底部。比如将文章作者的联系方式显示在footer元素中的代码如下图所示：

HTML5中的address元素

这里要注意一下的如果在footer元素中需要显示联系方式，应该使用address元素，就像上图中的那样。在HTML5元素中新增非主体结构就到这里了。关注最新动态、了解更多精彩资讯请加我们的官方微信：pyyuanxing。谢谢大家的观看，祝大家身体健康、生活愉快。

TML5中新增了“全部属性”的概念。所谓全局属性它是指可以对任何元素都可以使用的属性，今天为大家详细介绍三种常见的全局属性。

contentEditable属性

contentEditable是由微软开发。被其他浏览器反编译并投入应用的一个全局属性。它的主要功能是是否允许用户编辑元素的内容，被编辑元素必须是获得鼠标焦点的元素，而且在点击后要提供一个插入符号，提示用户该元素中内容允许编辑。contentEditable属性是一个布尔值属性，可以指定为ture或false。该属性还有一个隐藏属性的inherit状态，为true是允许用户编辑；为false时元素不能被用户编辑；没有指定时则由inherit状态决定，如果父元素是可编辑的，该元素也是可编辑的。支持contentEditable属性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

designMode属性

designMode属性主要功能是指定整个页面是否可编辑，页面可编辑时，页面中任何支持contentEditable属性的元素都变成了可编辑状态。designMode属性有两个值“on”和"off"。属性为“on”时，页面可编辑；属性为“off”时，页面不可编辑。不过各个浏览器支持情况也不一样，IE8不支持designMode属性，IE9支持designMode属性，fixfox和Opera浏览器支持designMode属性、Chrom和Safari浏览器在内嵌frame支持designMode属性。

hidden属性

在HTML5中所有的元素允许使用hidden属性。它类似input元素中的hidden属性，使元素处于不可见状态。hidden属性设置为ture，元素处于不可见状态；hidden属性设置为false时元素处于可见状态。

spellcheck属性

spellcheck属性主要是针对input元素和textarea这两个文本输入框提供的新属性，它的功能是对输入内容进行拼写和语法检查。它有个特殊的地方，就是必须声明属性值true或者false。如果元素是readonly属性或者disabled属性为true，不执行拼写检查。Firfox、IE、Chrome、Safari等浏览器都支持该属性。

tabindex属性

tabindex在程序开发概念，是指不断敲击Tab键让窗口或页面中控件获得焦点，对窗口的控件进行遍历，每个控件的tabindex表示第几个被访问的。之前这个属性在编辑网页很有用，现在是根据元素所在位置决定遍历顺序，所以就不需要了。不过tabindex拎一个作用，只有链接元素与表单元素可以通过按键获得焦点。如果对元素使用了tabindex属性后，也能让元素获得焦点，执行focus（）语句时，可以让元素获得焦点了。但是这样会出现一个问题，元素会通过tab获得焦点，而这时候我们不想让该元素获得焦点这不是我们想要的结果。

把元素的tabindex值设定为负数后就可以解决这个问题了。tabindex为负值时，可以通过编程的方式让元素获得焦点，但按下Tab键该元素就不能获得焦点了，这在复杂的页面是非常有用的。HTML5中巧妙运用该属性发挥了很大的作用。

每天分享一个知识点，刻意练习，每日精进！