HTMLのフッタータグ

フッターは、作成者に関連するデータ、著作権情報を含むデータ、またはそのデータに関連するリンクを表します。 内にこの著者情報が入ります。要素。このタイプのタグは

として知られています。 HTMLのタグ。 HTMLのフッタータグは

タグ内で定義されます。

フッター要素は、

、、

、

、

、

、

内、または

内で使用できます。 ;。これは常に 内に配置されます。タグ。これは個々のブロック内に含まれます。 Web ページまたはセクションのフッター部分を表示するために使用される HTML のフッター タグ。 セクション要素として機能しないため、アウトラインに新しいセクションは作成されません。

の構文タグ:

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

• タグは内で表現できます。

  –

  で囲まれたタグタグ内にテキストが含まれており、フッター セクション内に表示されます。
• は、HTML5 Web ページ内または別の HTML ドキュメント内で最も便利な要素の 1 つです。これは個々のブロックの一部とみなされます。
• HTML 特別な種類の属性リストはありませんが、accesskey、data、class、contenteditable、dir、draggable、hidden、id、lang、dropzone、spellcheck、style、title、translate などのすべてのグローバル属性もサポートしています。 onafterprint、onbeforeprint、onbeforeunload、onerror、onload、onhashchange、onmessage、onoffline、onpopstate、onstorage、onresize などのイベント属性として。

HTML のフッター タグの例

HTML ドキュメントにフッターを含める方法は複数あります。いくつかを 1 つずつ見てみましょう:

例 #1

を含めるだけです。

のような Web ドキュメントの本文内のタグ

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

フッター オブジェクトは、最も修復的な 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/imghw/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 中国語 Web サイトの他の関連記事を参照してください。