HTML の基本コンポーネントの 1 つは段落です。段落を定義するには、「<p>」タグと「</p>」タグを使用します。例えば：
<p>これは段落です。 </p>
ハイパーリンクは、別のページまたはサイトへのリンクです。 「<a href=''>」タグと「</a>」タグを使用してハイパーリンクを作成します。ここで、href 属性はリンクの URL を指定します。例えば：
<a href="https://www.jb51.net">これはリンクです</a>
画像はページの視覚的なインパクトを高め、より多くの情報を伝えることができます。 「<img src='' alt=''/>」タグを使用して画像を挿入します。src 属性は画像ファイルへのパスを指定し、alt 属性には画像が表示できない場合に表示される代替テキストが含まれます。例えば：
<img src="image.jpg" alt="美しい写真">
テーブルは、Web ページ上でデータを表示する主な方法です。 「<table>」、「<tr>」、「<td>」タグを使用して、それぞれテーブル、行、セルを定義します。例えば：
<テーブル> <tr> <td>最初の行、最初の列</td> <td>1 行目、2 列目</td> </tr> <tr> <td>2 行目、1 列目</td> <td>2 行目、2 列目</td> </tr> </テーブル>
「<ul>」または「<ol>」タグを使用して順序なしリストまたは順序付きリストを作成し、「<li>」タグを使用してリスト項目を定義します。例えば：
<ul> <li>リスト項目 1</li> <li>リスト項目 2</li> </ul> <オル> <li>リスト項目 1</li> <li>リスト項目 2</li> </ol>
フォームは、ユーザー入力を収集するために使用されるコンポーネントです。 「<form>」タグを使用してフォームを作成し、「<input>」タグを使用して入力フィールドを定義します。例えば：
<form action="submit.php" method="post"> <label for="username">ユーザー名:</label> <input type="text" name="ユーザー名" id="ユーザー名"> <label for="password">パスワード:</label> <input type="パスワード" name="パスワード" id="パスワード"> <input type="submit" value="Submit"> </form>
CSS を使用すると、Web ページの外観とレイアウトを制御できます。 CSS スタイルは、「<style>」タグを使用して HTML ドキュメントに追加できます。例えば：
<スタイル>
体 {
背景色: #f2f2f2;
}
h1 {
色: 青;
テキスト整列: 中央;
}
</スタイル>上記のコード スニペットは、HTML 言語の氷山の一角にすぎません。ただし、基本的な Web ページの構造とスタイルを構築するのに役立ち、さらに学習するためのインスピレーションを提供します。では、これらの HTML コードを使用して独自の Web サイトを作成してみましょう。
HTML5 ドキュメントの記述
<!DOCTYPE html>
上記のコード ブロックは HTML5 ドキュメント宣言であり、現在の Web ページが HTML5 標準に従って記述されていることを示します。
Web ページを作成するときは、必ず Web ページの先頭に HTML5 ドキュメント宣言を記述してください。ドキュメント宣言を記述しないと、一部のブラウザがおかしなモードになります。奇妙なモードに入ると、ブラウザはページを解析し、ページが正常に表示されなくなります。そのため、このモードに入らないようにするには、ドキュメント ステートメントを記述する必要があります。
よく使用される文書宣言
HTML5
<!DOCTYPE html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
「http://www.w3.org/TR/html4/loose.dtd」
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」
注: <!DOCTYPE> は HTML タグではありません。これは、HTML のどのバージョンが作成されたかに関する情報 (ステートメント) をブラウザーに提供します。
一部の古いページと互換性を保つために、ブラウザには 2 つの解析モードがあります。
標準モード 標準モード
個性モード 奇妙なモード
奇妙なモードは、Web ページを解析するときに予期しない動作を引き起こすため、奇妙なモードの発生を避ける必要があります。
ファイルタイプ <HTML></HTML> (ファイルの先頭と末尾に配置)
ドキュメントのタイトル <TITLE></TITLE> (「ヘッダー」ブロックに配置する必要があります)
ヘッダー <HEAD></HEAD> (「トピック」などの説明情報)
スタイル <BODY></BODY> (ドキュメント本文)
タイトル <H?></H?> (1 ～ 6 の 6 段階の選択肢があります)
タイトルの配置 <H?ALIGN=LEFT|CENTER|RIGHT></H?>
<DIV></DIV> を区別する
差別化された配置 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
引用ブロック <BLOCKQUOTE></BLOCKQUOTE> (通常はインデント)
強調 <EM></EM> (通常は斜体で表示)
<STRONG></STRONG> を特に強調します (通常は太字で表示されます)
引用 <CITE></CITE> (通常は斜体で表示)
コード <CODE></CODE> (ソース コードを表示するため)
サンプル<SAMP></SAMP>
キーボード入力<KBD></KBD>
変数<VAR></VAR>
<DFN></DFN> を定義します (一部のブラウザでは提供されていません)
住所<アドレス></アドレス>
大きな文字<BIG></BIG>
小さな文字<SMALL></SMALL>
太字<B></B>
斜体<I></I>
結論 <U></U> (一部のブラウザではまだ提供されていません)
取り消し線 <S></S> (一部のブラウザではまだ提供されていません)
下付き文字<SUB></SUB>
上付き文字 <SUP></SUP>
タイプライター <TT></TT> (シングルスペースフォントで表示)
所定の形式 <PRE></PRE> (ファイル内のスペースのサイズを維持)
事前にフォーマットされたフォーマット <PRE WIDTH=?></PRE> の幅 (文字数)
<CENTER></CENTER>に揃えます（文字でも写真でも可）
Shine <BLINK></BLINK> (これまでで最も嘲笑されたタグ)
フォント サイズ <FONTSIZE=?></FONT> (1 ～ 7)
フォント サイズを変更します <FONTSIZE=+|-?></FONT>
基本フォント サイズ <BASEFONTSIZE=?> (1 ～ 7、デフォルトは 3)
フォントの色<FONTCOLOR="#$$"></FONT> ($$ はカラーコードです)
1) テクスチャ: <img src="画像アドレス">
2) リンクに参加します: <a href="接続する関連アドレス">書きたい言葉を書いてください</a>
3) 新しいウィンドウでリンクを開きます: <a href="関連アドレス" target="_blank">書きたい言葉を書きます</a>
4) モバイル フォント (marquee): <marquee>書きたい単語を書きます</marquee>
5) 太字: <b>書きたい言葉を書きます</b>
6) 斜体: <i>書きたい単語を書きます</i>
7) フォントの下線: <u>書きたい単語を書きます</u>
8) フォントの取り消し線: <s>書きたい単語を書きます</s>
9) フォント サイズを大きくします: <big>書きたい単語を書きます</big>
10) フォント サイズ コントロール: <h1>書きたい単語を書き込みます</h1> (フォント サイズは h1 ～ h5 の範囲で指定できます。h1 が最大、h5 が最小です)
11) フォントの色を変更します: <font color="#value">書きたい単語を書き込みます</font> (値は 000000 ～ ffffff (16 ビット 16 進数) です)
12) 接続の下線を削除します: <a href="関連アドレス" style="text-decoration:none">書きたい単語を書きます</a>
13) 音楽を投稿: <embed src="音楽アドレス" width="幅" height="高さ" autostart=false>
14) フラッシュを貼り付けます: <embed src="フラッシュ アドレス" width="width" height="height">
15) ビデオ ファイルを貼り付けます: <img dynsrc="ファイル アドレス" width="幅" 高さ="高さ" start=mouseover>
16) 改行:<br>
17) 段落: <p>段落</p>
18) 元のテキストのスタイル: <pre>Text</pre>
19) 投稿の背景を変更します: <body background="背景画像アドレス">
20) 投稿の背景がスクロール バーでスクロールしない問題を修正しました: <body background="背景画像アドレス" bodybgproperties=fixed>
21) 投稿の背景色をカスタマイズします: <body bgcolor="#value">(値については 10 を参照)
22) BGM を投稿する: <bgsound="BGM アドレス"loop=infinite>
23) Web ページを投稿します: <iframe.src="関連アドレス" width="Width" height="Height"></iframe>