HTML5中的页脚标签这么用

　　介绍

这篇文章给大家分享的是有关HTML5中的页脚标签这么用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,HTML5中页脚标签的用法你知道吗?,HTML5中的页脚标签是什么意思?本篇文章就为大家介绍HTML5中页脚标签的定义和具体用法,还有页脚中的标准属性,还有置于页面最底部的简单实现方法。

<强> HTML5中页脚标签定义和用法:

& lt; footer>标签定义部分或文档的页脚。

在典型情况下,该元素会包含创作者的姓,名文档的创作日期以及/或者联系信息。

在一个文档中,可以定义多个& lt; footer>元素。

实例

文档的页脚:

& lt; footer>本文写于2010年& lt;/footer> & lt; !DOCTYPE HTML> 　　& lt; html> 　　& lt; body> 　　& lt; footer>本文写于2010年。;/footer> 　　& lt;/body> 　　& lt;/html>

<强> HTML 4.01与HTML 5之间的差异

& lt; footer>标签是HTML 5中的新标签。

提示:假如您使用脚来插入联系信息,应该在页脚元素内使用& lt; address>元素。

<强> HTML中页脚的标准属性:

类,contenteditable,快捷菜单,dir,拖拽,id,无关紧要,

朗,裁判,registrationmark, tabindex,模板,标题

html5语法结构,- - - - - -,

1。语法

& lt; & lt;/span> footer> 　　& lt; & lt;/span> br/比; 　　学习CSS,找DIV + CSS资源上! 　　& lt;/& lt;/span> footer>

2。对页脚元素标签加id

& lt; & lt;/span>页脚id=癮bc”比; 　　& lt; & lt;/span> br/比; 　　学习CSS,找DIV + CSS资源上! 　　& lt;/& lt;/span> footer>

3。对页脚标签加类

& lt; & lt;/span>页脚类=百仁Α北? 　　& lt; & lt;/span> br/比; 　　学习CSS,找DIV + CSS资源上! 　　& lt;/& lt;/span> footer>

4,知识扩展

我们在html5开发使用页脚标签时,把当作普通div标签对待即可,只不过一般用于网站底部布局。一般情况下一篇网页只有一个底部区,所以使用最好只使用一次页脚即可。

注意:是html5新增的,在IE8及以下即浏览器不兼容,谨慎使用。

在网上看到一篇置于页面最底部的简单实现方法,现在分享给大家

需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望页脚能在窗口最低端。

思路:页脚的父层的最小高度是100%,页脚设置成相对于父层位置绝对(绝对)置底(底:0),父层内要预留页脚的高度。

html代码:

XML/html代码复制内容到剪贴板

& lt; !——父层——比; 　　& lt; div id=皐apper"祝辞 　　& lt; !——主要内容——比; 　　& lt; div id=癿ain-content"祝辞 　　& lt;/div> 　　& lt; !——页脚——比; 　　& lt; div id=癴ooter"祝辞 　　& lt;/div> 　　& lt;/div>

CSS如下:

CSS代码复制内容到剪贴板

# wap { 　　位置:相对;/*重要!保证页脚是相对于wap位置绝对*/高度:汽车;/*保证页面能撑开浏览器高度时显示正常*/最小高度:100%/* IE6不支持,IE6要单独配置*/} 　　#页脚{ 　　位置:绝对的;bottombottom: 0;/*关键*/左:0;/* IE下一定要记得*/高度:60 px;/*页脚的高度一定要是固定值*/} 　　#主要内容{ 　　padding-bottom: 60 px;/*重要!给页脚预留的空间*/}

这时候,其它浏览器上都能正常显示了,但是IE 6要另外处理:

CSS代码复制内容到剪贴板

& lt; !——(如果IE 6)→ 　　& lt; style> 　　# wap{高度:100%;}/* IE在高度不够时会自动撑开层*/& lt;/style> 　　& lt; ! [endif]——在

感谢各位的阅读!关于HTML5中的页脚标签这么用就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

HTML5中的页脚标签这么用