フロントエンド開発の基礎 3.HTMLタグ（後編）

1.テーブルラベル

1.1 テーブルの主な機能

このフォームは主に次の目的で使用されます。データの表示と表示なぜなら、データ表示を非常に規則的で非常に読みやすくできるからです。特にバックグラウンドでデータを表示する場合、テーブルを上手に使用できることが非常に重要です。明確でシンプルな表は、複雑なデータを体系的に表示できます。

概要:テーブルはページをレイアウトするために使用されません。表示データの。

1.2 テーブルの基本構文

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

1. <table> </table>テーブルを定義するために使用されるラベルです。
2. <tr> </tr>ラベルはテーブル内の行を定義するために使用され、<table> </table>ラベル内でネストする必要があります。
3. <td> </td>テーブル内のセルを定義するために使用され、<tr></tr>ラベル内でネストする必要があります。
4. 文字 td はテーブル データ、つまりデータ セルの内容を指します。

1.3 ヘッダーセルのラベル

一般に、ヘッダー セルはテーブルの最初の行または列に配置されます。ヘッダー セルのテキスト コンテンツは太字で中央揃えで表示されます。ラベルは、HTML テーブル (テーブル ヘッドの略語) コードのヘッダー部分を表し<th>ます
。

<table>
 <tr>
 <th>姓名</th>
 ...
 </tr>
 ...
</table>

効果：

名前

概要:ヘッダー セルもセルであり、重要性を強調するために表の最初の行でよく使用されます。ヘッダー セル内のテキストは太字で中央揃えになります。

1.4 テーブルのプロパティ

table タグ属性のこの部分は、実際の開発では一般的に使用されません。後で CSS を通じて設定します。
目的は 2 つあります。

1. これらの英単語は後で CSS で使用するので覚えておいてください。
2. テーブルの佇まいを直感的に感じていただけます。

1.5 テーブル構造タグ

使用シナリオ: テーブルは非常に長くなる可能性があるため、テーブルのセマンティクスをより適切に表現するために、テーブルを 2 つの部分 (テーブル ヘッダーとテーブル本体) に分割できます。テーブル タグでは、それぞれ次のラベルを使用します。 area
, <thead>label <tbody>table メインエリア これにより、テーブル構造をより明確に区別できます。

1. <thead></thead>: テーブルのヘッダーを定義するために使用されます。内側にタグが付いている必要があります。通常は最初の行にあります。
2. < tbody></tbody>: テーブルの本体を定義するために使用され、主にデータ オントロジーを配置するために使用されます。
3. 上記のタグはすべて<table></table>タグ内に配置されます。

1.6 セルを結合する

特殊な状況下では、複数のセルを 1 つのセルに結合することができます。ここでは、学生は単純にセルを結合します。

1. セルを結合する方法 行
   全体を結合: rowspan="結合されたセルの数"
   列全体を結合:colspan="結合されたセルの数"
   

2. 対象セル
   クロス行：一番上のセルが対象セル、マージコードを書く
   クロスカラム：一番左のセルが対象セル、マージコードを書く
   

3. セルを結合する手順

   1. まず、行間または列間でマージするかどうかを決定します。
   2. 対象のセルを見つけて、結合方法＝結合するセルの数を記述します。例: <td colspan=“2”></td>。
   3. 余分なセルを削除します。

2. タグをリストする

テーブルはデータを表示するために使用され、リストは次のようになります。レイアウトに使用されるの。
リスト最大の特徴は、すっきりと整然としており、レイアウトとしてより自由で便利になります。
さまざまな使用シナリオに応じて、リストは次の 3 つの主要なカテゴリに分類できます。順序なしリスト、順序付きリスト、カスタム リスト。

2.1 順序なしリスト (強調)

<ul>タグは、HTML ページ内の項目の順序なしリストを表します。リスト項目は通常、箇条書きで表示され、リスト項目は<li>タグを使用して定義されます。
順序なしリストの基本的な構文形式は次のとおりです。

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>

1. 順序なしリストのさまざまなリスト項目の間に順序レベルはなく、並列です。
2. <ul></ul>ネストできるのは 内のみです<li></li>。<ul></ul>タグ内に他のタグやテキストを直接入力することはできません。
3. <li>との間は</li>、すべての要素を保持できるコンテナに相当します。
4. 順序なしリストには独自のスタイル属性が設定されますが、実際に使用する場合は CSS を使用して設定します。

2.2 順序付きリスト (理解)

順序付きリストは順序付けされたリストであり、その個々のリスト項目は特定の順序で配置および定義されます。HTML タグでは、<ol>タグは順序付きリストの定義に使用され、リストの並べ替えは数値で表示され、<li>タグはリスト項目の定義に使用されます。
順序付きリストの基本的な構文形式は次のとおりです。

<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>

1. <ol></ol>ネストできるのは 内のみです<li></li>。<ol></ol>タグ内に他のタグやテキストを直接入力することはできません。
2. <li></li>すべての要素を保持できるコンテナに相当します。
3. 順序付きリストには独自のスタイル属性が設定されますが、実際に使用する場合は CSS を使用して設定します。

2.3 カスタマイズリスト（要点）

カスタム リストの使用シナリオ:
カスタム リストは、用語や名詞を説明するためによく使用されます。定義リストのリスト項目の前に黒丸はありません。

HTML タグでは、<dl>このタグは説明リスト (または定義リスト) を定義するために使用され、<dt>(項目/名前の定義) および<dd>(各項目/名前の説明) とともに使用されます。
その基本的な構文は次のとおりです。

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>

1. <dl></dl><dt>とのみを含めることができます<dd>。
2. <dt><dd>桁数に制限はありません。通常、1 つは<dt>複数の桁に対応します<dd>。

HTML タグでは、<dl>このタグは説明リスト (または定義リスト) を定義するために使用され、<dt>(項目/名前の定義) および<dd>(各項目/名前の説明) とともに使用されます。

3. フォームタグ

3.1 フォームが必要な理由

フォームの使用目的は、ユーザー情報を収集するため。
Web ページでは、ユーザーと対話したり、ユーザー情報を収集したりする必要もありますが、その際にフォームが必要になります。

3.2 フォームの構成

HTML では、通常、完全なフォームは次のもので構成されます。フォームフィールド、フォームコントロール（フォーム要素とも呼ばれます）、およびツールチップ3つの部分で構成されています。

3.3 フォームフィールド

フォームフィールドは、フォーム要素を含む領域です。HTML タグでは、<form>タグはユーザー情報を収集および配信するためのフォーム フィールドを定義するために使用されます。
<form> 範囲内のフォーム要素情報をサーバーに送信します。

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

共通の属性:

ここで覚えておくべき点は 2 つだけです。

1. フォーム要素を記述する前に、それを含むフォーム フィールドが必要です。
2. フォームフィールドはフォームタグです。

3.4 フォームコントロール（フォーム要素）

フォーム フィールドにはさまざまなフォーム要素を定義できます。これらのフォーム要素は、ユーザーがフォームに入力または選択できるようにするコンテンツ コントロールです。

3.4.1 input 入力フォーム要素

インプットは英語で入力を意味し、フォーム要素の<input>ラベルではユーザー情報を収集するために使用されます。
タグには<input>type 属性があり、さまざまな type 属性値に応じて、入力フィールドには多くのフォームがあります (テキスト フィールド、チェック ボックス、マスクされたテキスト コントロール、ラジオ ボタン、ボタンなど)。 。

<input type="属性值" />

• ラベルはシングルラベルです
• type 属性は、異なるコントロール タイプを指定するために異なる属性値を設定します。

タイプ属性値と属性の説明は次のとおりです。

type 属性に加えて、タグには他にも多くの属性があり、よく使用される属性は次のとおりです。

1. nameとvalueは各フォーム要素が持つ属性値で、主にバックエンド担当者が使用します。
2. name はフォーム要素の名前であり、ラジオ ボタンとチェック ボックスが同じ名前の値を持つ必要があります。
3. selected 属性は主にラジオ ボタンとチェック ボックスに使用され、その主な機能は、ページを開いた直後にデフォルトでフォーム要素を選択することです。
4. maxlength は、ユーザーがフォーム要素に入力できる最大文字数であり、通常はほとんど使用されません。

3.4.2 ドロップダウン フォーム要素の選択

ページ内で、ユーザーが選択できるオプションが複数あり、ページ領域を節約したい場合は、<select>ラベル コントロールを使用してドロップダウン リストを定義できます。
構文:

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

1. <select>少なくとも 1 つのペアが含まれています<option>。
2. <option>selected="selected" が で定義されている場合、現在の項目がデフォルトの選択項目になります。

3.4.3 textarea テキストエリア要素

利用シーン:ユーザーが大量のコンテンツを入力する場合、テキストボックスフォームは使用できませんが、現時点ではラベルを使用できます。
フォーム要素では、ラベルは複数行のテキスト入力を定義するために使用されるコントロールです。
複数行のテキスト入力コントロールを使用すると、さらにテキストを入力できます。このコントロールは、掲示板やコメントでよく使用されます。
文法：

<textarea rows="3" cols="20">
 文本内容
</textarea>

1. タグを使用すると、<textarea>複数行のテキスト入力ボックスを簡単に作成できます。
2. Cols="各行の文字数"、rows="表示行数"、実際の開発では使用せず、サイズ変更にはすべてCSSを使用します。

3.4.4タグ

<label>タグは入力要素のラベル (ラベル) を定義します。
<label>タグはフォーム要素をバインドするために使用されます。<label>タグ内のテキストをクリックすると、ブラウザは自動的にフォーカス (カーソル) を移動するか、
対応するフォーム要素を選択して、ユーザー エクスペリエンスを向上させます。
構文:

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

コア:<label>タグの for 属性は、関連要素の id 属性と同じである必要があります。

4. ドキュメントを確認する

ドキュメントを頻繁に参照することは非常に良い学習習慣です。
推奨URL：

• 百度: http://www.baidu.com
• W3C : http://www.w3school.com.cn/  MDN:
• https://developer.mozilla.org/zh-CN/