HTML Article 태그는 HTML5에 새 버전으로 도입되었습니다. 보다 구체적으로 말하면 기사를 나타내는 것으로 밝혀졌습니다. 이는 독립적인 데이터로 지정되며 아마도 포럼 게시물, 잡지 간행물, 블로그 및 사용자가 활성화한 댓글에 사용될 수 있습니다.

로 표현됩니다. 꼬리표. 더욱이, 웹페이지에서 세련된 요소를 정의하는 것은

요소. 이 기사 태그는 Google Chrome, Opera, Internet Explorer, Edge 등 모든 유형의 브라우저를 지원합니다. 일반 섹션의 섹션 태그와는 달리 독립된 콘텐츠 부분으로 작동합니다.

구문:

여기서 이러한 태그 요소의 즉각적인 구문을 살펴보겠습니다.

<article>
<h1>…</h1>
</article>

로그인 후 복사

구조는 시작 태그를 따릅니다. 다음 이전 섹션에는

태그 또는

부제목을 형성하고 콘텐츠의 정확한 의미 정보를 제공하며 훨씬 더 풍부하고 적절한 의미 있는 정보를 제공합니다. 다른 태그와 마찬가지로 이 기사 태그는 해당 클래스에 대한 이벤트 속성 및 전역 속성과 같은 HTML 속성도 지원합니다.

<기사> 예시 태그:

<article>
<h1>Introduction to  CSS demo</h1>
<p>CSS is a cascading Style Sheet helps to make a web page visually colored</p>
</article>

로그인 후 복사

HTML에서 기사 태그는 어떻게 작동하나요?

이 섹션에서는 간단한 기사 태그(문서에 포함된 콘텐츠)에 대해 논의하고 웹페이지에서 이 태그가 어떻게 작동하는지 살펴보겠습니다. HTML 5는 검색 엔진의 콘텐츠를 풍부하게 하기 위해 새로운 의미 콘텐츠를 도입합니다. 콘텐츠에 대한 전역 및 이벤트 속성을 지원합니다. 태그의 콘텐츠는 단일 페이지의 다른 콘텐츠 부분과 독립된 문서로 간주됩니다. 페이지의 기사 이름, 저자 정보 및 출판 날짜를 정의하거나 보여줄 수 있습니다. 이 <기사> 태그는 단일 요소 및 여러

요소.

단일 기사 요소가 있는 문서는 문서의 주요 내용을 설명합니다. 개별적인 고유한 단일 콘텐츠를 갖는 반면, 여러

태그, 페이지에는 다양한 내용이 있습니다. 다른 면에서는

강요. <기사> 태그는

작업을 줄여 HTML 코드가 콘텐츠를 정리하는 데 도움을 줍니다. 요소.

HTML 태그 구현 예시

아래는 HTML 태그 구현 예시입니다.

예시 #1

단일

태그.

코드:

<!DOCTYPE html>
<html>
<head>
<title>HTML Article Tag demo</title>  </head>
<body>
<article>
<h2>python</h2>
<p>Python is a new programming language</p>
</article>
</body>
</html>

로그인 후 복사

출력:

HTML 기사 태그

예시 #2

속성을 사용하는 예를 보여줍니다. CSS 스타일로. CSS를 사용하여 웹 브라우저에 잘 표시됩니다.

코드:

<!DOCTYPE html>
<head>
<title>Demo of article</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px;
margin:6px;">
<article>
<address>
Written by xxxxxx.<br>
refer me at: <br>
https://www.educba.com/ <br>
</address>
</article>

로그인 후 복사

아래 출력은 방문자에게 링크 주소가 포함된 웹페이지를 보여줍니다.

출력:

HTML 기사 태그

예시 #3

<기사 태그>를 사용하여 날짜와 시간을 표시하는 방법을 보여주는 예

코드:

<!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px; color :green;
margin:6px;">
<article class="blog_post">
<p>My first article post. Stay tuned</p>
<footer>
<p>
Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor
</p>
</footer>
</article>

로그인 후 복사

출력:

HTML 기사 태그

예시 #4

여러 기사를 사용한 예. 아래 코드는 의미 요소

를 사용하여 HTML 콘텐츠 내에서 가장 중요한 헤더를 지정합니다.

코드:

<style>
.JAN {
margin: 1;
padding: .2rem;
background-color: #D2691E;
font: 2rem 'Fira Sans', sans-serif;
}
.JAN > h1,
.day {
margin: .4rem;
padding: .2rem;
font-size: 1rem;
}
.day {
background: border-box no-repeat
gray;
}
.day > h2,
.day > p {
margin: .2rem;
font-size: 1rem;
}
</style>
<article class="JAN">
<h1>FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2>01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2>18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2>05 May 2020</h2>
<h2>27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article>

로그인 후 복사

출력:

HTML 기사 태그

예시 #5

<기사>를 살펴보겠습니다. 태그는 여러

태그. 다음은 출력이 포함된 일부 코드입니다.

코드:

<style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article>

로그인 후 복사

출력:

HTML 기사 태그

예시 #6

코드:

<article>
<header>
<h1>On this page</h1>
<p>Published on 15th DEC 2019</p>
</header>
<p>WELCOME</p>
<p> EXAMPLES TOPIC</p>
<p>ILLUSTRATION</p>
<section>
<h2>Related topics</h2>
<article>
<footer>
<p>published by Mark winston</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>What do you think about the topics with the comments please</p>
</article>
</section>
</article>

로그인 후 복사

다음은 관련 콘텐츠가 있는 모든 문서의 웹페이지 헤드라인을 포함하는 전역 헤더입니다. 다음은 <바닥글> 특정 웹사이트의 바닥글로 연결되고 바닥글 섹션에 회사 세부정보를 제공하여 SEO에 도움이 되는 태그입니다. 마지막으로

태그는 페이지의 관련 콘텐츠를 포함하거나 그룹화하거나 다른 방식으로 그룹화하는 것입니다. 자율적인 구역구조라고 할 수 있어요.

출력:

HTML 기사 태그

예시 #7

의 도움으로 기사 태그 태그.

코드:

<!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<main>
<article>
<h1>Cloud computing Basics</h1>
<p>Used for data storage.</p>
<section>
<h2>Basic and syntax part</h2>
<p>With an example.</p>
</section>
<section>
<h2>Types of cloud computing services</h2>
<p>Private , public , hybrid</p>
</section>
</article>
</main>

로그인 후 복사

출력:

HTML 기사 태그

Kesimpulan

Untuk membuat kesimpulan, artikel ini merangkumi beberapa panduan untuk digunakan pada halaman web. Ia merupakan pilihan terbaik untuk mengandungi dokumen (mereka rasa sendiri) atau kandungan dalam satu halaman web, dan ia dikenali sebagai elemen semantik yang sempurna di bawah HTML5. Sebagai konteks serba lengkap, ia telah digunakan dalam html5 kerana tapak web canggih telah mula memanfaatkan sepenuhnya teg ini diberi ganjaran oleh pengguna dengan baik dalam menyiarkan kandungan seperti blog dan majalah.

위 내용은 HTML 기사 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명