HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？本篇文章就为大家介绍HTML5中footer标签的定义和具体用法，还有footer中的标准属性，还有置于页面最底部的简单实现方法。
HTML5中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 来插入联系信息，应该在 footer 元素内使用
元素。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]-->好了，本篇文章就和大家说这么多。关于页头的文章也会发布，希望大家点进去看看。
【相关推荐】
Atas ialah kandungan terperinci HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pengenalan kepada jenis antara muka cakera keras
Bagaimana untuk melaksanakan fungsi sembang dalam talian Vue
Terdapat halaman kosong tambahan dalam Word dan saya tidak boleh memadamkannya.
Nombor jujukan pengisian sel digabungkan
kitaran hayat servlet
Adakah kadar kejayaan tiket siap sedia keretapi 12306 tinggi?
Bagaimana untuk melaksanakan fon warna dalam css
apa itu drivergenius
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
