HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？

HTML5中footer标签定义和用法：

footer> 标签定义 section 或 document 的页脚。

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

在一个文档中，可以定义多个 footer> 元素。

实例

文档的页脚：

footer>
    This document was wrITten in 2010/footer>
    !DOCTYPE HTML>
    html>
    body>
    footer>
    This document was written in 2010./footer>
    /body>
    /html>
    

HTML 4.01 与 html 5 之间的差异

footer> 标签是 HTML 5 中的新标签。

提示：假如您使用 footer 来插入联系信息，应该在 footer 元素内使用 address> 元素。

HTML中footer的标准属性：

class, contenteditable, contextmenu, dir, Draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

html5语法结构 - TOP

1.语法

/span>
    footer>
     　　PHP中文网/span>
    br />
     　　学习CSS，找DIV+CSS资源上PHP中文网! //span>
    footer>
    

2.对footer元素标签加id

/span>
    footer id=”abc”>
     　　PHP中文网/span>
    br />
     　　学习CSS，找DIV+CSS资源上PHP中文网! //span>
    footer>
    

3.对footer标签加class

/span>
    footer class=”yanshi”>
     　　PHP中文网/span>
    br />
     　　学习CSS，找DIV+CSS资源上PHP中文网! //span>
    footer>
    

4、知识扩展

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

注意：是html5新增的，在IE8及以下IE浏览器不兼容，谨慎使用。

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

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

思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留footer的高度。

html代码：

XML/HTML Code复制内容到剪贴板

!-- 父层 -->
         div id="wapper">
             !-- 主要内容 -->
             div id="main-content">
             /div>
             !-- 页脚 -->
             div id="footer">
             /div>
         /div>
    

CSS如下：

CSS Code复制内容到剪贴板

#wapper{
             position: relative;
       /*重要！保证footer是相对于wapper位置绝对*/         height: auto;
          /* 保证页面能撑开浏览器高度时显示正常*/         min-height: 100%  /* IE6不支持，IE6要单独配置*/     }
     #footer{
            position: absolute;
      bottombottom: 0;
     /* 关键 */        left:0;
     /* IE下一定要记得 */        height: 60px;
         /* footer的高度一定要是固定值*/     }
     #main-content{
            padding-bottom: 60px;
 /*重要！给footer预留的空间*/     }
    

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

CSS Code复制内容到剪贴板

!--[if IE 6]->
         style>
     #wapper{
    height:100%;
}
     /* IE在高度不够时会自动撑开层*/     /style>
         ![endif]-->
    

好了，本篇文章就和大家说这么多。关于页头的文章也会发布，希望大家点进去看看。

【相关推荐】

HTML img标签的属性是有哪些？了解IMG标签的用法

HTML5中web是什么？web存储中的元素有哪些？

以上就是HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！