溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5中的footer標(biāo)簽這么用

發(fā)布時(shí)間：2020-10-13 15:54:36 來(lái)源：億速云 閱讀：165 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)HTML5中的footer標(biāo)簽這么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

                                                           HTML5中footer標(biāo)簽的用法你知道嗎？，HTML5中的footer標(biāo)簽是什么意思？本篇文章就為大家介紹HTML5中footer標(biāo)簽的定義和具體用法，還有footer中的標(biāo)準(zhǔn)屬性，還有置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法。

HTML5中footer標(biāo)簽定義和用法：

<footer> 標(biāo)簽定義 section 或 document 的頁(yè)腳。

在典型情況下，該元素會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。

在一個(gè)文檔中，可以定義多個(gè) <footer> 元素。

實(shí)例

文檔的頁(yè)腳：

<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> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。

提示：假如您使用 footer 來(lái)插入聯(lián)系信息，應(yīng)該在 footer 元素內(nèi)使用 <address> 元素。

HTML中footer的標(biāo)準(zhǔn)屬性：

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

lang, ref, registrationmark, tabindex, template, title

html5語(yǔ)法結(jié)構(gòu)   -   TOP

1.語(yǔ)法

<</span>footer> 
　　億速云<</span>br /> 
　　學(xué)習(xí)CSS，找DIV+CSS資源上億速云! 
</</span>footer>

2.對(duì)footer元素標(biāo)簽加id

<</span>footer id=”abc”> 
　　億速云<</span>br /> 
　　學(xué)習(xí)CSS，找DIV+CSS資源上億速云! 
</</span>footer>

3.對(duì)footer標(biāo)簽加class

<</span>footer class=”yanshi”> 
　　億速云<</span>br /> 
　　學(xué)習(xí)CSS，找DIV+CSS資源上億速云! 
</</span>footer>

4、知識(shí)擴(kuò)展

我們?cè)趆tml5開(kāi)發(fā)使用footer標(biāo)簽時(shí)，把當(dāng)作普通div標(biāo)簽對(duì)待即可，只不過(guò)一般用于網(wǎng)站底部布局。一般情況下一篇網(wǎng)頁(yè)只有一個(gè)底部區(qū)，所以使用最好只使用一次footer即可。

注意：是html5新增的，在IE8及以下IE瀏覽器不兼容，謹(jǐn)慎使用。

在網(wǎng)上看到一篇置于頁(yè)面最底部的簡(jiǎn)單實(shí)現(xiàn)方法，現(xiàn)在分享給大家

需求：有時(shí)候，當(dāng)頁(yè)面內(nèi)容較短，撐不開(kāi)瀏覽器高度，但是又希望footer能在窗口最低端。

思路：footer的父層的最小高度是100%，footer設(shè)置成相對(duì)于父層位置絕對(duì)（absolute）置底（bottom：0），父層內(nèi)要預(yù)留footer的高度。

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!-- 父層 -->     
<div id="wapper">     
    <!-- 主要內(nèi)容 -->     
    <div id="main-content">     
    </div>     
    <!-- 頁(yè)腳 -->     
    <div id="footer">     
    </div>     
</div>

CSS如下：

CSS Code復(fù)制內(nèi)容到剪貼板

#wapper{     
    position: relative;   /*重要！保證footer是相對(duì)于wapper位置絕對(duì)*/     
    height: auto;          /* 保證頁(yè)面能撐開(kāi)瀏覽器高度時(shí)顯示正常*/     
    min-height: 100%  /* IE6不支持，IE6要單獨(dú)配置*/     
}     
#footer{     
   position: absolute;  bottombottom: 0; /* 關(guān)鍵 */     
   left:0; /* IE下一定要記得 */     
   height: 60px;         /* footer的高度一定要是固定值*/     
}     
#main-content{     
   padding-bottom: 60px; /*重要！給footer預(yù)留的空間*/     
}

這時(shí)候，其它瀏覽器上都能正常顯示了，但是IE 6要另外處理：

CSS Code復(fù)制內(nèi)容到剪貼板

<!--[if IE 6]->     
<style>     
#wapper{height:100%;} /* IE在高度不夠時(shí)會(huì)自動(dòng)撐開(kāi)層*/     
</style>     
<![endif]-->

感謝各位的閱讀！關(guān)于HTML5中的footer標(biāo)簽這么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手