首頁 > web前端 > html教學 > HTML 中的頁尾標記

HTML 中的頁尾標記

王林
發布: 2024-09-04 16:23:31
原創
1212 人瀏覽過

頁腳代表與作者相關的資料、包含版權資訊的資料或與該資料相關的一些連結。 中包含的作者資訊元素。這種類型的標籤稱為

。 HTML 中的標籤。 HTML 中的頁尾標籤在
標籤內定義。

可以在

、、

的語法標籤:

<footer>
<p>Some text</p>
</footer>
登入後複製
  • 標籤可以在內表示用
    括起來的標籤 –
    標籤內有一些文本,我們將在頁腳部分顯示這些文本。
  • ;是 HTML5 網頁或其他 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

只需包含 在網路文件正文中新增標籤,例如。

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>
登入後複製

輸出:

HTML 中的頁尾標記

範例#2

Footer 物件用來表示最具修復性的 HTML 元素,即

元素。可以透過 getElementById(); 存取。此範例說明如何透過物件存取頁腳以及如何建立新物件來存取頁尾資料。

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>
登入後複製

輸出:

HTML 中的頁尾標記

範例 #3

以下是包含版權資訊的資料範例。

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



Uday wire Industries
Shed No. 5 , 6, 7 ,8
Industrial  Area, MIDC Sector
Pune.



All rights reserved @Uday wire Industries

輸出:

HTML 中的頁尾標記

範例#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="img.jpg"   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>

登入後複製

輸出:

HTML 中的頁尾標記

範例#5

在下面的範例中,頁腳用於顯示版權資訊。

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>
登入後複製

輸出:

HTML 中的頁尾標記

結論

因此,我們可以克服頁腳用於顯示作者資訊、版權資訊、一些重要資訊和其他數據的問題。它始終必須放在 body 部分內。在文件中可以使用多個頁尾。

以上是HTML 中的頁尾標記的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板