• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5中footer标签,HTML5中footer置于页面最底部的一种简单方法等相关知识,匿名希望在学习及工作中可以帮助到您
HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?本篇文章就为大家介绍HTML5中footer标签的定义和具体用法,还有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> 
  微课江湖<</span>br /> 
  学习CSS,找DIV+CSS资源上微课江湖! 
</</span>footer>

2.对footer元素标签加id

<</span>footer id=”abc”> 
  微课江湖<</span>br /> 
  学习CSS,找DIV+CSS资源上微课江湖! 
</</span>footer>

3.对footer标签加class

<</span>footer class=”yanshi”> 
  微课江湖<</span>br /> 
  学习CSS,找DIV+CSS资源上微课江湖! 
</</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标签是什么意思?的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5中footer标签的用法你知道吗?,HTML5中的footer标签是什么意思?

相关文章

  • 2017-08-06解决Firefox下不支持outerHTML问题代码分享
  • 2018-12-03HTML5学习笔记简明版(3):新元素之hgroup,header,footer
  • 2018-12-03怎么使用Canvas绘制虚线
  • 2018-12-03详解HTML5的video标签的浏览器兼容性增强方案
  • 2018-12-03H5移动端各种各样的列表的制作方法详解(三)
  • 2018-12-03HTML5新特性之WebRTC详解
  • 2018-12-03HTML5每日一练之mark标签的应用
  • 2018-12-03HTML5仿微信聊天界面和朋友圈代码
  • 2018-12-03React Router中的核心history库的详细分析
  • 2017-08-06检测浏览器对HTML5和CSS3支持度的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5制作工具怎么做屏幕自适应?
    • HTML5表单新增元素与属性
    • HTML5之tabindex属性全面解析
    • 针对IE8下不兼容rgba()的解决办法
    • HTML5体验改进的14条军规
    • 【HTML5】Canvas绘制简单图片教程_html5教程技巧
    • Html5插件教程之添加浏览器放大镜效果的商品橱窗
    • HTML5 中新的全局属性(整理)
    • HTML5之Video标签详解
    • HTML5中的Article和Section元素认识及使用_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有