>  기사  >  웹 프론트엔드  >  HTML의 바닥글 태그

HTML의 바닥글 태그

王林
王林원래의
2024-09-04 16:23:311157검색

바닥글은 작성자와 관련된 데이터, 저작권 정보가 포함된 데이터 또는 해당 데이터와 관련된 일부 링크를 나타냅니다. 이 저자 정보는

요소. 이러한 유형의 태그는
HTML의 태그. HTML의 바닥글 태그는 태그 내에 정의됩니다.

, ,

구문 태그:

<footer>
<p>Some text</p>
</footer>
  • 태그는
    로 묶인 태그 바닥글 섹션에 표시할 텍스트가 포함된 태그입니다.
  • HTML5 웹페이지나 다른 HTML 문서에서 가장 유용한 요소 중 하나입니다. 개별 블록의 일부로 간주됩니다.
  • HTML 특별한 종류의 속성 목록은 없지만 accesskey, data, class, contenteditable, dir, draggable, hided, id, lang, dropzone, 맞춤법 검사, 스타일, 제목, 번역 등과 같은 모든 전역 속성도 지원합니다. 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

바닥글 개체는 가장 복구 가능한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:HTML 움직이는 태그다음 기사:HTML 움직이는 태그