頁腳代表與作者相關(guān)的數(shù)據(jù)、包含版權(quán)信息的數(shù)據(jù)或與該數(shù)據(jù)相關(guān)的一些鏈接。 中包含的作者信息元素。這種類型的標簽稱為

可以在

的語法標簽：

<footer>
<p>Some text</p>
</footer>

• ;是 HTML5 網(wǎng)頁或其他 HTML 文檔中最有用的元素之一。它被視為單個塊的一部分。
• HTML ;沒有任何特殊類型的屬性列表，但它支持所有全局屬性，如 accesskey、data、class、contenteditable、dir、draggable、hidden、id、lang、dropzone、拼寫檢查、style、title、translate 等作為事件屬性，如 onafterprint、onbeforeprint、onbeforeunload、onerror、onload、onhashchange、onmessage、onoffline、onpopstate、onstorage、onresize 等

HTML 中的頁腳標簽示例

有多種方法可以將頁腳包含到 HTML 文檔中；讓我們一一看看其中的一些：

示例#1

只需包含 在網(wǎng)絡(luò)文檔正文中添加標簽，例如。

HTML 代碼：

<h2> Footer Example </h2>
<footer>
<p>Published by EDUCBA</p>
<p>Contact us: <a href="%E2%80%9Dmailto:%5Bemail%C2%A0protected%5D%E2%80%9D"> <u> HTML 中的頁腳標記 US </u> </a>
</p></footer>

輸出：

示例#2

Footer 對象用于表示最具修復(fù)性的 HTML 元素，即

HTML 代碼：

<h3>Footer Object Example </h3>
<footer id="footerDemo">
<p>all rights reserved @ EDUCBA </p>
</footer>
<p>Press button to check footer section.</p>
<button onclick=" footerFunction()">Click Me</button>
<p id="footerobject"></p>
<script>
function footerFunction() {
var f = document.getElementById("footerDemo").innerHTML;
document.getElementById(" footerobject ").innerHTML = f;
}
</script>

輸出：

示例 #3

以下是包含版權(quán)信息的數(shù)據(jù)示例。

HTML 代碼：

<style type="text/css">
#shareicons img {
width: 50px;
padding: 10px;
display: inline;
}
</style>


<h1>Uday Wire Industries</h1>
<h4> <u> About US </u> </h4>
<p>We provide all types of HB wires in different size 5.5 mm , 6.5 mm , 7 mm , 8 mm , 12mm.All those wires drawn from the machines which works on new latest technology for producing best quality of HB wires. Those are kinds of raw material which is going to be useful for various wire industries , Cement pipe making industries ,for nails manufacturing industries and many other industries in the market. Nails also in various sizes 1/10' , 1.5/10' , 2/10' , 2.5/10' , 3/10' 4/10 etc. We are dealing with wire rods and cut rods also. Binding wires also with various different types.</p> <h4>Our Specialty</h4>

• Good quality
• Smooth Wire rods
• perfect coil bundle
• ? No cut rods in coil
• coils in small size packaging bundle

Please send us Your requirements to us .So we can give best to You!
Thank You !

Share on

輸出：

示例#4

以下是固定頁腳的示例。

HTML 代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footerdemo {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:blanchedalmond;
color: black;
text-align: left;
}
</style>


<img  src="/static/imghw/default1.png" data-src="img.jpg" class="lazy"   style="max-width:90%" alt="HTML 中的頁腳標記" >
<div class="footerdemo">
<h4>About US</h4>
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About </a> </li>
<li> <a href="#"> Career </a> </li>
<li> <a href="#"> Contact US </a> </li>
<li> <a href="#"> Visit Here </a> </li>
</ul>
</div>

輸出：

示例#5

在下面的示例中，頁腳用于顯示版權(quán)信息。

HTML 代碼：

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.header {
background-color:aliceblue;
padding: 10px;
text-align: center;
}
.part {
float: left;
width: 25%;
padding: 10px;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:darkgoldenrod;
}
</style>


<div class="header">
<h1>Latest Technology trends in market </h1>
</div>
<div class="row">
<div class="part">
<h2>Robotic Process Automation</h2>
<p>RPA is latest trending technology which is automating jobs. It deals with the software to automate business methodologies like processingtransactions, replying to the emails, iterpreting with data etc.</p>
</div>
<div class="part">
<h2>Machine Learing</h2>
<p>Machine learing is the process considered as subset of Artificial Intelligence.Its based on neural networks, deep learing and natural language processing (NLP)</p>
</div>
<div class="part">
<h2>Artificial Intelligence</h2>
<p>One of the fastest growing technology is AI, which is based on system which built? human intelligence to perform tasks. It helps to complete tasks more perfectly and in short time than humans.? </p>
</div>
<div class="part">
<h2>BlockChain</h2>
<p>blockchain is trendy technology in upcoming days for maintaining transactions with encrypted and decentralized nature. Here you are going to make chain of data, so there is no need to trust on third party.</p>
</div>
</div> <br>
<div class="footer">
<h4>All rights reserved @Techpanda 2019</h4>
</div>

輸出：

結(jié)論

因此，我們可以克服頁腳用于顯示作者信息、版權(quán)信息、一些重要信息和其他數(shù)據(jù)的問題。它始終必須放在 body 部分內(nèi)。在文檔中可以使用多個頁腳。

以上是HTML 中的頁腳標記的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！