html定义页脚有什么用,HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？...

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

HTML5中footer标签定义和用法：

标签定义 section 或 document 的页脚。

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

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

实例

文档的页脚：This document was written in 2010

This document was written in 2010.

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

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

元素。

HTML中footer的标准属性：

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

html5语法结构 - TOP

1.语法<footer>

PHP中文网<br />

学习CSS，找DIV+CSS资源上PHP中文网!

footer>

2.对footer元素标签加id<footer id=”abc”>

PHP中文网<br />

学习CSS，找DIV+CSS资源上PHP中文网!

footer>

3.对footer标签加class<footer class=”yanshi”>

PHP中文网<br />

学习CSS，找DIV+CSS资源上PHP中文网!

footer>

4、知识扩展

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

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

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

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

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

html代码：

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

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复制内容到剪贴板

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

【相关推荐】

html定义页脚有什么用,HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？...相关推荐

给SharePoint页面加入自己定义页脚Custom footer
给SharePoint页面加入自己定义页脚Custom footer 在公司做站点设计项目时,须要在页面上加入页脚. 非常多人都把页脚忽视了,认为没什么多大用处,事实上它的作用还是有的,并且还越来越显 ...
html5定义页脚标签,使用 HTML5 中的新标签和新属性
新标签主要分成三个部分:语义化标签.功能性标签及新的输入控件类型语义化标签 .. . ....... 这些新的语义化标签目前得到了大部分主流浏览器的支持,建议直接使用:如果是在IE 8及以下版本,无 ...
html5定义页脚的标签,HTML中footer标签的使用方法
HTML中footer标签的使用方法发布时间:2020-06-25 17:37:52 来源:亿速云阅读:215 作者:Leah 本篇文章为大家展示了HTML中footer标签的使用方法,代码简明扼 ...
Word控件Spire.Doc 【页眉页脚】教程(1)：用C#/VB.NET：在 Word 文档中添加页眉和页脚
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
html打印页眉页脚_HTML5基本元素：页眉，导航和页脚
HTML5开发尚未完成. 但是,HTML5中有一些今天可以使用的新元素,当前和旧浏览器(带有shim)已经支持的元素,例如header , nav和footer . 您可能已经在我们的HTML5教程中 ...
word论文排版和写作01：样式、自动列表、图片、表格、公式、脚注、目录、页眉页脚及各种交叉引用
写在前面正好写毕业设计论文的时候被各种格式逼着学了一下word的一些排版,期间花了比较多的时间,也踩了一些坑,然后比较重点的都记录在这里了.免得以后还要一个个去找.整个排版所用的技巧均遵循:规范.易 ...
记事本删除换行和回车符_如何自定义或删除记事本文本文件的页眉和页脚
记事本删除换行和回车符 By default, each Notepad document has the name of the document in the header and the pa ...
计算机一级插入页眉,2017年计算机一级WPS辅导：WPS中页眉页脚的设计技巧
本文讲解WPS2005页眉页脚的编辑技巧.页眉和页脚在正式的文档中起着很大的作用.一方面,它可以使文档页面美观.正规:另一方面,它可以使文档或表格清晰,查阅起来方便,最普通的例子就是形如第X页共Y页这 ...
Excel2007中插入页眉和页脚
最近在学习Excel2007的过程中发现在Excel2007中插入页眉和页脚较以前版本很方便直观. 相信用Excel以前某些版本中插入页眉和页脚时,对图1所示的插入页眉和页脚的对话框一定不会陌生. 图 ...
html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了（中文问题，换行问题，分页，页眉页脚，水印）,html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...

html定义页脚有什么用,HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？...

html定义页脚有什么用,HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？...相关推荐

最新文章

热门文章