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> 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標簽是什么意思？的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的HTML5中footer标签的用法你知道吗？，HTML5中的footer标签是什么意思？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 0010服务器无对应信息,查看云服务器信
- 下一篇： steam游戏平台怎么下载？steam游