HTML5 새 요소
- WBOY원래의
- 2024-09-04 16:36:061259검색
HTML5는 HTML 4.01 버전의 새로운 업그레이드로, 많은 새로운 기능, 고급 기능, 더 나은 페이지 보기 및 증가하는 기술적 요구에 부응하는 기타 여러 개선 사항을 포함하고 있습니다. HTML5에서 가장 많이 사용되고 원하는 요소는
HTML5의 새로운 요소 상위 10개
HTML5는 문서 레이아웃을 향상시키는 새로운 요소를 제공합니다.
1.
<기사> 요소는 문서, 섹션 또는 웹 사이트의 별도 구조를 포함하고 널리 배포되거나 사용 가능하도록 권장되는 페이지의 일부를 지정합니다. 이는 그룹 게시물, 저널 또는 일간 보고서, 온라인 뉴스레터 제출, 고객이 보낸 발언 또는 기타 물질이 없는 대상일 수 있습니다.
예:
<!DOCTYPE html> <html> <head> <title>Article Element</title> </head> <body> <article> <h2>EDUCBA</h2> <p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
출력:
- 위 코드를 확장자가 .html인 파일로 저장하세요.
- 브라우저에서 html 파일을 실행하면 아래 이미지와 같은 결과가 나옵니다.
2.
<그림> 요소는 분류, 지도, 이미지, 코드 기사 등과 같은 개별 콘텐츠를 나타냅니다.
예:
<!DOCTYPE html> <html> <head> <title>Figure Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> </figure> </body> </html>
출력:
위 코드는 아래 이미지와 같은 출력을 생성합니다.
3. <그림캡션>
예:
<!DOCTYPE html> <html> <head> <title>Figure Caption Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> <figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption> </figure> </body> </html>
출력:
위 코드는 아래 이미지와 같이 결과를 표시합니다.
4. <헤더>
<헤더> 요소는 문서의 헤더나 페이지 섹션을 지정합니다. 단일 문서에서 두 개 이상의 헤더를 정의할 수 있습니다.
예:
<!DOCTYPE html> <html> <head> <title>Header Element</title> </head> <body> <article> <header> <h1>Header One</h1> <h2>Header Two</h2> <h3>Header Three</h3> </header> <p>The content of the document goes here...</p> </article> </body> </html>
출력:
위 코드는 아래 이미지와 같이 결과를 표시합니다.
5. <바닥글>
<바닥글> 요소는 작성자 정보, 저작권 정보, 연락처, 관련 문서 링크, 사이트맵 등과 같은 정보를 지정합니다.
예:
<!DOCTYPE html> <html> <head> <title>Footer Element</title> </head> <body> <footer> <p>Copyright © 2019 www.educba.com</p> <p>Contact: <a href="mailto:[email protected]">[email protected]</a> </footer> </body> </html>
출력:
위 코드는 아래 이미지와 같이 결과를 표시합니다.
6.
<메인> 요소는 문서의 주요 정보, 즉 중요한 정보를 표시하는 데 사용됩니다.
예:
<!DOCTYPE html> <html> <head> <title>Main Element</title> </head> <body> <header> <p>Header information</> </header> <main> <p>Main Information</p> <article> <h2>EDUCBA</h2> <p>EDUCBA is a leading global provider of skill based education...</p> </article> </main> <footer> <p>Footer Information</> </footer> </body> </html>
출력:
위 코드는 아래 이미지와 같은 출력을 생성합니다.
7.
<마크> 요소는 사용자를 문서의 특정 텍스트로 끌어들이는 배경색으로 텍스트를 강조하거나 표시합니다.
예:
<!DOCTYPE html> <html> <head> <title>Mark Element</title> </head> <body> <article> <p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
출력:
위 코드는 아래 이미지와 같이 결과를 표시합니다.
8.
예:
<!DOCTYPE html> <html> <head> <title>Nav Element</title> </head> <body> <header> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JAVA</a> | <a href="#">PHP</a> | <a href="#">PYTHON</a> </nav> </header> </body> </html>
출력:
위 코드는 아래 이미지와 같은 출력을 생성합니다.
9. <섹션>
<섹션> 요소는 문서의 독립형 섹션 또는 특정 영역을 정의합니다.
예:
<!DOCTYPE html> <html> <head> <title>Section Element</title> </head> <body> <article> <h2> Main Article </h2> <p>Content of the main header will be displayed here...</p> <section> <h2>Section One</h2> <p>Content of the first section will be displayed...</p> </section> <section> <h2>Section Two</h2> <p>Content of the second section will be displayed...</p> </section> </article> </body> </html>
출력:
위 코드는 아래 이미지와 같이 결과를 표시합니다.
10.
The tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html> <html> <head> <title>Summary Element</title> </head> <body> <details> <summary> EDUCBA - Corporate Bridge Consultancy Pvt Ltd </summary> <p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p> </details> </body> </html>
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, and it will display the hidden text shown below the image,
Conclusion
So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
위 내용은 HTML5 새 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.