溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關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]-->感謝各位的閱讀！關于HTML5中的footer標簽這么用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
