HTML5中footer標籤的用法你知道嗎？，HTML5中的footer標籤是什麼意思？

最後更新：2018-08-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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> 　　topic.alibabacloud.com<</span>br /> 　　學習CSS，找DIV+CSS資源上topic.alibabacloud.com! </</span>footer>

2.對footer元素標籤加id

<</span>footer id=”abc”> 　　topic.alibabacloud.com<</span>br /> 　　學習CSS，找DIV+CSS資源上topic.alibabacloud.com! </</span>footer>

3.對footer標籤加class

<</span>footer class=”yanshi”> 　　topic.alibabacloud.com<</span>br /> 　　學習CSS，找DIV+CSS資源上topic.alibabacloud.com! </</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儲存中的元素有哪些？

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More