Maison > Article > interface Web > Balise de pied de page en HTML
Balise de pied de page en HTML
- 王林original
- 2024-09-04 16:23:311158parcourir
Le pied de page représente les données liées à l'auteur, les données contenant des informations sur les droits d'auteur ou certains liens liés à ces données. Les informations sur l'auteur incluses dans
On peut utiliser l'élément de pied de page dans
Syntaxe pour
<footer> <p>Some text</p> </footer>
est l'un des éléments les plus utiles de la page Web HTML5 ou d'un autre document HTML. Il est considéré comme faisant partie de blocs individuels. - HTML
n'a pas de type spécial de liste d'attributs, mais il prend en charge tous les attributs globaux tels que accesskey, data, class, contenteditable, dir, draggable, Hidden, id, lang, dropzone, orthographe, style, titre, traduction, etc. comme attributs d'événement comme onafterprint, onbeforeprint, onbeforeunload, onerror, onload, onhashchange, onmessage, onoffline, onpopstate, onstorage, onresize, etc.
Exemples de balise de pied de page en HTML
Il existe plusieurs façons d'inclure un pied de page dans les documents HTML ; voyons quelques-uns d'entre eux un par un :
Exemple n°1
Incluez simplement
Code 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> Balise de pied de page en HTML US </u> </a> </p></footer>
Sortie :
Exemple n°2
L'objet Footer est utilisé pour représenter l'élément HTML le plus réparateur, c'est-à-dire
Code 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>
Sortie :
Exemple #3
Voici un exemple de données contenant des informations sur les droits d'auteur.
Code 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.
Sortie :
Exemple n°4
Voici un exemple de pied de page fixe.
Code 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="Balise de pied de page en 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>
Sortie :
Exemple #5
Dans l'exemple ci-dessous, le pied de page est utilisé pour afficher les éléments relatifs aux droits d'auteur.
Code 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>
Sortie :
Conclusion
Ainsi, nous pouvons surmonter le fait que le pied de page est utilisé pour afficher des informations sur les auteurs, des éléments de droits d'auteur, certaines choses importantes et d'autres données. Il doit toujours être placé dans la section du corps. On peut utiliser plus d'un pied de page dans les documents.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!