HTML の基礎_一般的なタグ、共通タグ、表

パート 1 HTML

<html> -- 開始タグ

<ヘッド>

ウェブページ上の制御情報

<title>ページタイトル</title>

</head>

<本文>

ページに表示されるコンテンツ

</本文>

</html> -- 終了タグ

コメント

ボディの特性:

bgcolor ページの背景色

テキストの色（すべてのテキストの色を指定します）

topmargin 上余白

leftmargin 左余白

右余白右余白

bottomargin 下余白

背景

注: 背景色と背景の壁紙を選択します。

1.1. 一般的なタグ1.1.1. フォーマット制御タグ

<font color="" face="" size=""></font> はフォントを制御します。color="##FF0000"; フェイス、フォント; サイズ、フォントサイズ。

<b></b> 太字フォント

傾き

<u></u> 下線

<strong></strong> 太字フォント（強調、トーンの強化）

<em></em> 斜体フォント（強調、口調用）

<center></center> 中央

注: デフォルトでは、<center></center> の前後に他の文字がある場合、全体が中央に表示されるように前後が折り返されます。

<br> または <br /> は Enter と同じです (ショートカットキー: Shift + Enter)

  スペースを指定するには、デザインページで Ctrl + Shift + Space キーを押すこともできます。

1.1.2 コンテンツコンテナタグ

<h1></h1>…<h6></h6> タイトル（自動的に折り返されます）。 HTML 見出しは、<h1> - <h6> などのタグを使用して定義されます。

注: <h1></h1>…<h6></h6> の重要度は順に減少し、既存のデフォルトサイズに基づいて増加または減少します。前後に他の行がある場合は、全体が統一されるように折り返されて空白のままになります。

<p></p> 段落タグ（段落間の空白行）

注: <p></p> の前後に他の文字がある場合は、完全な単位になるように折り返されて空白のままになります。

<div></div> レイヤータグ (デフォルトでは 1 行を占めます)

<span></span> レイヤータグ (デフォルトのスペースは、それが占めるスペースの量です)

<ol type="1"> -- 順序付きリスト、シリアル番号は 1、2、3...、シリアル番号の形式は引用符で変更できます

</ol>

注意：デフォルトでは連番と改行が付きます。前後に他の行がある場合は前後で折り返され、全体となるように空行が残ります。

上記の「ol」を「ul」に変更すると、独自の改行機能を持たない順序なしリストになります。

1.2. 一般的なタグ

ハイパーリンクタグ

<a href="ハイパーリンクアドレス" target="_blank">ハイパーリンクテキスト</a> --href (ハイパーリンク参照)。_blank は新しいウィンドウで開くことを意味します。

ステップ 1: アンカーポイントにラベルを付けます。 <a name=""></a>

ステップ 2: アンカーリンクを作成します。 <a href="ターゲットリンクの名前の値"></a>

画像タグ

<img src="画像アドレス" alt="テキスト" width="" height="" /> --高さと幅のどちらかを設定するだけで、表示される画像が比例して拡大縮小されます。画像を読み込めない場合は、alt でテキストが表示され、検索エンジンによる検索にも役立ちます。

<img /> は単独で表示する必要があります。

1.3. 表

<table></table> テーブル

幅: 幅。ピクセルまたはパーセンテージで表現できます。一般的には960ピクセルが使用されます。

境界線: 境界線。一般的に使用される値は 0 です。

cellpadding: コンテンツとセルの境界線の間の余白。一般的に使用される値は 0 です。

cellspacing: セル間の間隔。一般的に使用される値は 0 です。

align: 配置。

bgcolor: 背景色。

背景: 背景画像。

<tr></tr> 行

align: 行の内容の水平方向の配置

valign: 行の内容の垂直方向の配置

高さ: 行の高さ

bgcolor: 背景色

背景: 背景画像

<td></td> セル

<th></th> ヘッダー、セルの内容は自動的に中央揃えされ、太字になります

align: セルの内容の配置

valign: セルの内容の垂直方向の配置

幅: セルの幅

高さ: セルの高さ

bgcolor: 背景色

背景: 背景画像

コンテンツはセル内に配置し、セルは行内に配置し、行は表内に配置する必要があります。セルの行の高さまたは列の高さを設定すると、対応する行または列も同時に影響を受けます。

セルの結合: (可能な限りテーブルのネストを使用することをお勧めします)

colspan="n"——同じ行のセルを結合します（後でコードを書くときに、対応する列を減算します）

rowspan="n" - 同じ列のセルを結合します（2 行目から対応する列を減算します）

上記の基礎知識に基づいて、プログラムコードと実行結果を以下に示します。

プログラムコード:

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
<ヘッド>
<メタ http-equiv = "コンテンツタイプ" コンテンツ= "text/html; 文字セット = utf-8" />
<タイトル> 123WORDPRESS.COM </タイトル>
</ヘッド>
<本文背景色= "#00FFCC" >
< 名前= "トップ" > </ a >
今日< br >
天気 />悪くないね。 < br />
< br />
<フォントサイズ= "45" 色= "赤" >
フォントフォーマット制御タグ: < br />
< b >テキスト太字方法 1、b タグ</ b > < br />
< strong >テキスト太字方法 2、strong タグ</ strong > < br />
< i >テキスト傾斜モード 1、i タグ</ i > < br />
< em >テキスト傾斜モード 2、em タグ</ em > < br />
< u >テキストに下線を引く、u タグ</ u >
123 < center >中央タグ、中央、デフォルトでは、前後に他のタグがある場合は、全体であることを確認するために改行が実行され、中央に表示されます。 </センター> 456 < br />
< br />
コンテンツコンテナタグ: < br />
123 < p > pタグ、段落タグ、前後に他のタグがある場合は前後に改行し、空白行を残して全体であることを確認する、 </ p > 456
< ol > ol 順序付きリスト
< li >デフォルトではシリアル番号が付属します</ li >
< li >自己ラップ</ li >
< li >前後に他の行がある場合は、前後を折り返して、空白行を残して全体が統一されるようにします。 </ li >
</ ol >
<ul> ul順序なしリスト
< li >デフォルトではシリアル番号はありません</ li >
< li >自己ラップ</ li >
< li >前後に他の行がある場合は、前後を折り返して、空白行を残して全体が統一されるようにします。 </ li >
</ ul >
< href = "http://www.baidu.com" target = "_top" > Baidu 検索</ a > < br />
<画像 src = "123.jpg" title = 「この二人は美人です」 alt = "zheshilianggemeinv" /> < br /> < br />
< href = "http://www.qq.com" > <画像 src = "123.jpg" 幅= "104" </a> < br /> < br />
<画像 src = "123.jpg" 幅= "100" 高さ= "200" />
</フォント>
< h1 > h1～h6タグ、タイトル制御タグ</ h1 >
< h2 >前後に他の行がある場合は、前後に改行を入れ、空白行を残して全体が統一されるようにします。 </ h2 >
< h3 >重要度の高い順</ h3 >
< h4 >既存のデフォルトサイズを拡大または縮小する</ h4 >
< div style = "background-color:#0F0" > div レイヤータグ。デフォルトでは 1 行全体を占めます</ div >
<スパン style = "background-color:#CF0" > span レイヤータグ、デフォルト使用法は必要なだけ</ span > < br />
< br />
<表 align = "中央" 幅= "480" 高さ= "120" 境界線= "1" セルパディング= "0" セル間隔= "0" >
< tr align = "center" >
< td 幅= "120" > < a href = " http://autohome.com " >オートホーム</a> </td>
< td width = "120" > Yiche.com </ td >
< td colspan = " 2 " >シナオート</td>
</tr>
< tr align = "center" >
< td > 58.com </ td >
< td >ガンジドットコム</ td >
< td 行範囲= "2" bgcolor = " # FF0033" > JD.com </td>
< td >アンジュケ</ td >
</tr>
< tr align = "center" >
< td >天猫</ td >
< td >ジュメイヨウピン</ td >
< td > vipショップ</ td >
</tr>
</表>
< br />
< href = "#top" >トップに戻る</a>
</本文>
</html>