写在前面，该博客是对黑马前端课程笔记的再整理，方便自己复习回顾，侵删
01ステージフロントエンド基礎。一覧およびフォーム
1.リスト]タブ（フォーカス）
学習目標
- 理解
- 順序なしリストのシナリオ
- シナリオの自己定義されたリスト
- アプリケーション
- 順序なしリスト構文
- カスタムリストの構文
フォームは、データを表示するために使用され、リストはレイアウトに使用されています。
-
コンセプト：
構造を搭載したコンテナ、テキストやグラフィックスの形一貫したパターンと呼ばれるリストインサイド
-
特長：
最大の特徴のリストは、同様の形式で、秩序、きちんときれいですが、彼は自由の組み合わせが高くなりますすることができます。
1.1順不同リストUL（フォーカス）
オーダーリスト項目順不同リストのさまざまなレベルの間に区別はありませんが、並置されています。次のように基本的な構文は次のとおりです。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
注意：
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
1.2順序付きリストのオール（理解）
順序付きリストは、リストの項目が特定の順序に従って配置されている定義し、それぞれが順番、のリストを持っている以下のように、基本的な構文の順序付きリストは、次のとおりです。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
ULと一致すべてのプロパティ。しかし、実際よりもはるかに少ないと順不同リスト。
1.3カスタムリスト（理解）
この用語は、多くの場合、名詞又は例示および説明のリストは、リストの前に定義されていない箇条書きリスト項目を定義するために使用されます。次のように基本的な構文は次のとおりです。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
例えば：
1.4概要
| ラベル名 | 定義 | 説明 |
|---|---|---|
<ul></ul> |
無秩序なラベル | どののみ含めることができます李ノーため、最も頻繁に使用されるリストの将来のレイアウト |
<ol></ol> |
注文したラベル | 以下のliシーケンシャル、使用を含有することができます |
<dl></dl> |
カスタムリスト | 2人の兄弟、DTとDDを有しています |
我々は2つの点限り今、レイアウトを学習する必要はありません。
- 順不同リストを使用する方法を学習しますときにカスタムリストを使用する際に、学びます
- コードの書き方を順不同リストとカスタムリスト？
- 具体的に我々だけでレイアウトを見て、私たちは、レイアウトで完全にCSSに学びます。
2.フォームラベル（マスター）
目標：
- あなたは、最も一般的に使用されるクラスの登録フォームを書くことができます
- あなたは、入力フォーム共通の属性を言うことができます
役割：
フォームの目的は、収集ユーザ情報です。
当社のウェブサイトでは、我々はまた、ユーザと対話する必要があり、収集のユーザー情報は、この時間はまた、フォームを必要としています。
HTMLにおいて、フォームは、3つの部分は、情報及びフォームフィールドを構成することを示唆している（また、フォーム要素として知られている）完全なフォーム・コントロールは、典型的です。
フォームコントロール：
このような単一行のテキスト入力ボックス、パスワード入力ボックス、チェックボックスなど、実際のフォーム機能項目は、ボタン、リセットボタンなどを提出含まれています。
メッセージ：
フォームは、通常、説明のテキストを含める必要があり、そしてフィル操作を促します。
フォームフィールド：
方法は、フォームデータ処理プログラム、及びデータを定義するURLを介してサーバに送信することができ、メッセージ、フォームコントロールの全てを収容するための容器と等価です。あなたがフォームフィールドを定義しない場合、フォームデータは、バックエンドサーバへ転送することはできません。
2.1入力制御（フォーカス）
-
構文：
<input type="属性值" value="你好">- 入力手段の入力
- <入力/>タグは、単一のタグです
- コントロールの種類を指定するために使用される異なるタイプの属性セットのプロパティ値
- また、他のタイプの属性プロパティがあります
-
共通の属性：
1. typeプロパティ
- このプロパティの値は、入力フォームの種類が属するかを決定します。
- 例えば、タイプ=「text」は、ユーザ名、ニックネームなどへのテキストボックスは述べています。
- そのようなタイプのよう=内容を示す「パスワード」パスワードボックスは、ユーザによる入力が表示されていないです。
用户名: <input type="text" />
密 码：<input type="password" />
2.値プロパティ値
用户名:<input type="text" name="username" value="请输入用户名">
- テキスト値のデフォルト値。いくつかはちょうどそれは、この値で設定することができ、フォームはいくつかの単語を表示するデフォルトのページを開きたいです。
3. name属性
用户名:<input type="text" name=“username” />
背景はname属性によって、この形で見つけることができるように、フォームの名前です。フォームでの多くのページには、名前主な機能は、異なる形態を区別するために使用されます。
-
name属性の後ろの値は、私たち自身の定義です。
-
ラジオがグループである場合は、ラジオボックスの友人の複数から選択1を実装することができるように、我々は彼らに同じ名前の名前の名前を与える必要があります
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
- name属性は、我々は今、あまり使用していますが、我々はAJAXと背景を学ぶとき、必見です。
4.プロパティを確認しました
- 選択されたデフォルト値を示します。ラジオボタンやチェックボタンでより一般的。
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
この上で、それがこの男を選択し、デフォルトのラジオボタンを表し
5.入力属性の概要
| プロパティ | 説明 | 効果 |
|---|---|---|
| タイプ | フォームの種類 | コントロールの種類を指定するために使用されます |
| 値 | フォームの値 | デフォルトのテキスト表示を形成します |
| 名前 | フォーム名 | フォームでの多くのページには、名前主な機能は、異なる形態を区別するために使用されます。 |
| 確認 | デフォルトで選択 | ラジオやチェックボタンスタートが選択されたことを示しています |
2.2ラベルラベル（理解）
目標：
ラベルlabel主な目的は、ユーザーエクスペリエンスを向上させることです。ユーザーに最高のサービスを改善するため。
コンセプト：
入力要素のラベルタグは、ラベル（タグ）を定義します。
役割：
ときラベルが時にバインドされたフォーム要素が入力フォーカスを取得するフォーム要素を結合するために使用、ラベルをクリックしてください。
要素を結合させる方法は？
- 最初の使用は、直接入力フォームが含まれるラベルを使用することです。
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
単一のフォームを選択するための適切な
- 属性の二次利用は、フォーム要素が結合されてラベルを指定します。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
概要
私たちは、ラベルテキスト内のタグをクリックすると、カーソルが指定したフォームの内側に配置されます
2.3 TextAreaコントロール（テキストフィールド）
- 構文：
<textarea >
文本内容
</textarea>
-
役割：
あなたは簡単にTextAreaコントロールで複数行のテキスト入力ボックスを作成することができます。
COLS =「行あたりの文字数」の行は=私たちは、実際の開発を持っていない「行の数が表示されました」
テキストボックスとテキストフィールドの違い
| フォーム | 名前 | 違い | デフォルト値が表示されます | 以下のためのシーン |
|---|---|---|---|---|
| 入力タイプ=「テキスト」 | テキストボックス | テキストの行のみ | シングルラベルは、デフォルト値は値で表示されます | ユーザー名、ニックネーム、パスワード、など |
| TEXTAREA | テキストフィールド | あなたは複数行のテキストを表示することができます | ジタグは、デフォルト値は中間のタブに書き込まれます | メッセージボード |
2.4ドロップダウンリストを選択
目的：
複数のオプションがある場合はスペースを節約するために、ユーザーが選択できるように、我々はコントロールの定義を選択し、ドロップダウンリストを使用することができます。
構文：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- 注意：
- の<SELECT>オプション含む少なくとも一対
- あなたが選択した=オプションで「選択」を定義すると、現在選択されているアイテムは、デフォルトのアイテムです。
- しかし、我々は以下の実際の開発を使用します。
3.フォームのフォームフィールド
-
どのようにユーザーの情報収集は、サーバに渡されますか？
フォームのフォームフィールドにより、
-
目的：
ラベルフォームがユーザー情報の収集と伝達を可能にするために、フォームフィールドを定義するために使用されるHTMLでは、フォームのすべての内容がサーバーに送信されます。
構文：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
共通の属性：
| プロパティ | プロパティ値 | 効果 |
|---|---|---|
| アクション | URLアドレス | データ受信を指定すると、フォームを処理するためのサーバプログラムのURLアドレス。 |
| 方法 | 取得/ポスト | 提出フォームデータセットは、GETまたはPOSTその値は、使用されています。 |
| 名前 | 名前 | 同じページの複数のフォームを区別するために、フォームの名前を指定します。 |
注意：
各フォームには独自のフォームフィールドを持っている必要があります。我々はページをやっている、書き込み結果を見ますが、バックグラウンドのAjaxの相互作用は、必要なフォームフィールドを形成しなければならない場合は、後で時間を学んだしていないません。
2.6チームの合意
要素のプロパティ
- 二重引用符を使用するには、要素の属性値の構文
- 要素の属性値はに書かれたすべての単語を書いたことができます
推奨：
<input type="text" />
<input type="radio" name="name" checked="checked" />
推奨しません：
<input type=text />
<input type='text' />
<input type="radio" name="name" checked />
4.統合されたケース（登録ページ）
5.チェックドキュメント
ドキュメントは、多くの場合、非常に良い学習習慣で相談してください。
W3C：http://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/
6.まとめ
