HTMLの基本タグと構造の詳細な説明

1. HTMLの概要

1.HTML: ハイパーテキストマークアップ言語。これはプログラミング言語ではなく識別言語であり、論理演算は使用できません。タグは、インターネット上のドキュメント形式を統一し、散在するネットワークリソースを論理的な全体にリンクするために使用されます。

ハイパーテキストは、ハイパーリンクを通じて複数のメディアをリンクすることで情報を整理する方法です。

タグ: タグ。 <> で囲まれたコンテンツには、次のような特定の意味があります。

静的ウェブページ: 変更なし

動的なウェブページ: 背景と同時に変化する

2.HTMLタグ構造

1. 文書構造:

<!doctype html><!--! は宣言を意味します。このコード行の意味は次のとおりです: 次のドキュメントタグは HTML5 として解析されます -->
<html>
<!-ヘッダー。Web ページの関連設定を完了するために使用されます->
<ヘッド>
    <meta charset="utf-8"><!--中国語の文字エンコーディング--><!--meta: yuan、対応する設定を完了するために使用されます-->
    <meta name="keywords" content=""><!--ウェブサイト検索用のキーワードを設定します-->
    <meta name="description" content=""><!--ウェブサイトの説明-->
    <title>私の最初の HTML ウェブページ</title><!--タイトル-->
    <!--ウェブサイトの小さいアイコンを設定します-->
    <link rel="ショートカットアイコン" href="" type="image/png">
    <スタイル>
        /*文章スタイル*/
    </スタイル>
    <link rel="stylesheet" href="style.css"><!--外部スタイルファイルを導入するために使用-->
</head>
<!--2. 本文-->
<本文>
    <p>これは段落です</p>
</本文>
<スクリプト>
    //スクリプトコードを配置する場所</script>
</html>

2. 一般的なタグ:

<!--モバイル開発をセットアップする-->
    <meta name="viewport" content="width=デバイス幅、user-scalable=いいえ、initial-scale=1.0、maximum-scale=1.0、minimum-scale=1.0">
     <!--1.div タグ、レイアウトに使用、特定の意味なし、レイヤー化。レイヤー -->
     <div></div>
     <!--2.hx: タイトル、レベル 1 からレベル 6、レベル 1 が最大、レベル 6 が最小、自動的に太字、デフォルトのフォント サイズ -->
     <h1></h1>...<h6></h6>
     <!--3.p タグ: 段落を示します。キャリッジリターンに相当します。 -->
     <p></p>
     <!--4.br: 改行を生成する -->
     <br>
     <!--6.a タグ、リンク ジャンプ、ターゲット: _blank 新しいウィンドウ/_self 現在のウィンドウ_parent/top-->
     <a href="url address/link" title="B ステーション">テキスト</a>
     <a href="url address" target="_blank">テキスト</a>
     <a href="url アドレス" target="_self">テキスト</a>
     <a href="'#href" target="#href">テキスト</a>
     アンカーリンクのターゲット位置 href='#href' は、id='#href' と同じ属性に設定する必要があります。
     <!--7.img は外部画像を読み込むために使用され、src は読み込まれた画像または画像のパスを指定するために使用され、alt は画像の読み込みに失敗した場合に alt 内のコンテンツを表示するために使用されます。それ以外の場合は表示されません -->
     src パス alt 置換テキスト タイトル 画像 プロンプトテキスト 幅: 画像の幅 高さ: 画像の高さ 境界線 境界線 <img src="" alt="表示されない名前">
     <!--8. span の機能は div と同じで、どちらもレイアウトに使用されます。div は 1 行を占めますが、span はそうではありません。span ノートはインライン レイアウトに使用されます -->
     <span></span>
     <!--9.ul と ol は、前者は順序なし、後者は順序ありで、どちらも li タグを使用します。 -->
     <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <オル>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>
     //カスタムリストフォーカス 各ウェブサイトは基本的に下部でカスタマイズされます <dl> dl には dt と dd のみを含めることができます 1 つの dt は兄弟として複数の dd に対応します <dt></dt> 名詞 1
        <dd></dd>名詞 1 説明 1
        <dd></dd>名詞 1 説明 2
    </dl>カスタムリスト

4. タグ属性:

<!--タグ属性:
            1. 通常は属性名 = "属性値" で構成されます。 2. 追加情報として機能します。
            3. すべてのタグに属性があるわけではありません。例えば、br タグなどです -->
            以下のタイトルクラスは属性名で、その次は属性値です。<p title="paragraph" class="content" id="content">これはテスト段落です</p>

5. その他のタグ:

<!--テキスト書式設定タグ: タグを使用してテキストの外観を美しくします->
   <!--1.b と strong: はどちらも太字効果があり、行レベルのラベルです (自動的に折り返されません)。
   しかし、「強い」には強調という意味もあります。注: 強調は主に SEO の目的で使用され、キーワードの使用を事前に容易にします -->
   <b>太字</b>
   <strong>太字で強調</strong>
   <!--2 i と em: テキストを斜体にします。em には強調効果があります。これらはすべて行レベルのラベルです（自動改行なし）。
   単純な傾斜効果だけが欲しい場合は、アイコンの追加などiタグを使うことができます。 -->
   <i>傾ける</i>
   <em>斜めにして強調</em>
   <!--3.preテキストを事前フォーマットし、改行、スペース、幅を保持します。
   テキストのフォントサイズは小さくなり、ブロックレベルタグ（ブラウザでは1行を占める） -->
   <前>
       preテキストを事前フォーマットし、改行、スペース、幅を保持します</pre>
   
   <!--samll と big は、テキストを 1 サイズ縮小または拡大します (行レベルのラベルで、1 行を占めず、幅と高さを認識しません) -->
   <!-- ブラウザがサポートする最小フォント サイズは 12 ピクセルです。テキストが 12 ピクセルより小さい場合は処理する必要があります -->
   <p>私は普通です</p>
   <small>私は小さなテキストです</small>
   
   <!--sub と sup: テキストを下付き文字と上付き文字として設定します。これは、テキストの通常の表示のベースラインを調整するために使用され、テキストは自動的に小さくなります -->
   <p>通常表示: X1+X2=Y</p>
   <p>下付き文字:X<sub>1</sub>+X<sub>2</sub>=Y</p>
   <p>下付き文字:X<sup>1</sup>+X<sup>2</sup>=Y</p>
   
   行を削除 <del></del> <s></s>
   <ins></ins> <u></u> に下線を引く
   エスケープ文字: &nbsp; スペース &lt; 小なり記号 &gt; 大なり記号

6. テーブルタグとフォームタグ

テーブルタグの構造: 機能: データを表示 <table> <!--テーブルタグ-->
        <th></th> ヘッダーセル <tr>
            <td></td>セル</tr>行</table>
    属性 左揃え 中央揃え 右揃え 境界線 ボーダー セルパディング テキストとセル間の距離 セル間隔 セル間の距離 幅
     表構造タグ <thead></thead> ヘッダー領域 <tbody></tbody> 本文領域 セルの結合: 行をまたいで結合: rowspan 行と列をまたいで結合: colspan 列と列の結合 コード: 行をまたいで: 結合コードをターゲット セルとして一番上のセルに記述します 列をまたいで: 結合コードをターゲット セルとして一番左のセルに記述します 行または列をまたぐ手順:
    	1. 行または列をまたぐかどうかを決定する 2. 目的のセルを探す 3. 余分なセルを削除する

7. フォームタグ:

フォームタグ: 主な目的: ユーザー情報を収集するフォームは、フォームフィールド、フォームコントロール (要素)、プロンプト情報、ユーザー情報の送信を実現するためのフォームフィールドで構成されています <form action="" method=""></form>
    アクションの後に、アドレス メソッド、送信メソッド名、入力、入力フォーム要素が続きます。
     <入力タイプ="テキスト">
	   type 属性値: text テキスト、password、パスワード、button、ridio、ラジオボタン ()、チェックボックス (複数選択ボタン) .....
	   	 送信（送信ボタン、フォームの値をサーバーに送信）リセットはフォームボタン内のすべてのデータをクリアします通常のボタンはjsと組み合わせてファイルを使用しますアップロードファイルを使用します	   	 
	   name 属性: フォーム要素の名前。ラジオ ボタンは、複数選択を可能にするために同じ名前を持つ必要があります。 
	    			ラジオボタンとチェックボックスは同じ名前にする必要があります
	   value属性は、すべての要素が持つべき値を定義し、主にバックエンド担当者によって使用されます。	
		チェックされているのは、ページを開いたときに単一選択と複数選択のデフォルトの選択です。	
		maxlength 最大長 ドロップダウンフォーム要素の選択 使用シナリオ: 複数のオプションがあり、スペースを節約したい <select name="" id="">
							    	<オプション値=""></オプション>
							   	 </選択> 
    selectには少なくとも1つのオプションが含まれています。optionのselected = selected属性はデフォルトで選択されています。<label for=""></label>使用シナリオ：forはフォーム要素と同じid属性に対応します。テキストフィールドフォーム要素に入力テキストが大量にある場合、<textarea><textarea>通常、長さはCSSで指定されます。

HTML の基本タグと構造の詳細な説明に関するこの記事はこれで終わりです。より関連性の高い HTML の基本タグと構造については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSSフィルターにはどんな魔法の用途があるか

>>: フロントエンドページのポップアップマスクはページのスクロールを禁止します