構(gòu)文:
ここで、これらのタグ要素の直接の構(gòu)文を見てみましょう。
<article> <h1>…</h1> </article>
開始タグの後に構(gòu)造が続きます。直前のセクションには
があります。タグまたは
これは小見出しを形成し、コンテンツの正確な意味情報(bào)を提供し、より豊富で適切な意味のある情報(bào)を提供します。他のタグと同様に、この 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 では記事タグはどのように機(jī)能しますか?
このセクションでは、単純な記事タグ (ドキュメント內(nèi)の自己完結(jié)型コンテンツ) について説明し、それが Web ページでどのように機(jī)能するかを見ていきます。 HTML 5 では、検索エンジンのコンテンツを充実させるために、新しいセマンティック コンテンツが導(dǎo)入されています。これらは、コンテンツのグローバル屬性とイベント屬性をサポートします。タグのコンテンツは、単一ページ上の他のコンテンツ部分から獨(dú)立したドキュメントとみなされます。ページ上の記事名、著者情報(bào)、発行日を定義または実証できます。この タグは単一の要素として使用することも、複數(shù)の
単一のarticle要素を持つ文書は、文書の主な內(nèi)容を説明します。複數(shù)の 以下は HTML タグの実裝例です: 単一の コード: 出力: 屬性 コード: 以下の出力は、訪問者にリンクへのアドレスを含む Web ページを示します。 出力: 例 を使用して日付と時(shí)刻を表示する方法を示します。 コード: 出力: 複數(shù)の記事を使用した例。以下のコードは、セマンティック要素 コード: 出力: を見てみましょう。タグは複數(shù)の コード: 出力: コード: これは、関連コンテンツを含むあらゆるドキュメントの Web ページの見出しを含むグローバル ヘッダーです。次に、 が続きます。タグ。特定のウェブサイトのフッターにリンクし、フッター セクションに會(huì)社の詳細(xì)を提供することで SEO に役立ちます。最後に、 出力: コード: 出力: ????? ? ????? ?????? ??? ? ?? ? ?? ???? ????. ?? ? ???? ??(??? ??) ?? ???? ???? ? ??? ???? HTML5?? ??? ?? ??? ??? ????. ??? ?????? ??? ??? ?????? ? ??? ??? ???? ????? html5?? ???????. ???? ??? ?? ???? ??? ? ?????? ?? ??? ????. 以上がHTML記事タグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。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>
例 #2
<!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>
例 #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>
例 #4
を使用して、HTML コンテンツ內(nèi)の最も重要なヘッダーを指定します。
<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>
例 #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>
例 #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>
例 #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>
??
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8640
17
1786
16
1729
56
1581
29
1448
31
