HTML 中的页脚标记

页脚代表与作者相关的数据、包含版权信息的数据或与该数据相关的一些链接。 中包含的作者信息元素。这种类型的标签称为

。 HTML 中的标签。 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 id="Footer-Example"> 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 对象用于表示最具修复性的 HTML 元素，即

元素。可以通过 getElementById(); 访问。此示例说明了如何通过对象访问页脚以及如何创建新对象来访问页脚数据。

HTML 代码：

<h3 id="Footer-Object-Example">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

以下是包含版权信息的数据示例。

HTML 代码：

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


<h1 id="Uday-Wire-Industries">Uday Wire Industries</h1>
<h4 id="u-About-US-u"> <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 id="Our-Specialty">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

输出：

示例#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/imghwm/default1.png" data-src="img.jpg" class="lazy"   style="max-width:90%" alt="HTML 中的页脚标记" >
<div class="footerdemo">
<h4 id="About-US">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

在下面的示例中，页脚用于显示版权信息。

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 id="Latest-Technology-trends-in-market">Latest Technology trends in market </h1>
</div>
<div class="row">
<div class="part">
<h2 id="Robotic-Process-Automation">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 id="Machine-Learing">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 id="Artificial-Intelligence">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 id="BlockChain">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 id="All-rights-reserved-Techpanda">All rights reserved @Techpanda 2019</h4>
</div>

输出：

结论

因此，我们可以克服页脚用于显示作者信息、版权信息、一些重要信息和其他数据的问题。它始终必须放在 body 部分内。在文档中可以使用多个页脚。

以上是HTML 中的页脚标记的详细内容。更多信息请关注PHP中文网其他相关文章！