HTML 中的页脚标记
- 王林原创
- 2024-09-04 16:23:311192浏览
页脚代表与作者相关的数据、包含版权信息的数据或与该数据相关的一些链接。 中包含的作者信息元素。这种类型的标签称为
可以在
的语法标签：
<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>
输出：
示例#2
Footer 对象用于表示最具修复性的 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
以下是包含版权信息的数据示例。
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.
输出：
示例#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>
输出：
示例#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>
输出：
结论
因此，我们可以克服页脚用于显示作者信息、版权信息、一些重要信息和其他数据的问题。它始终必须放在 body 部分内。在文档中可以使用多个页脚。
以上是HTML 中的页脚标记的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML Marquee Tag下一篇：HTML nav Tag