今日の内容：
HTMLタグ：formタグ
CSS：ページレイアウトコントロールや造園
HTMLタグ：formタグ
フォーム：*コンセプト：ユーザーの入力のためのデータを収集。そして、サーバの対話のために。*
フォーム：フォームを定義するために使用されます。範囲を表すユーザデータの収集範囲の範囲を定義することができます
：*プロパティ
*アクション：提出するデータは、URL指定された
指定申請：*方法
*分類：7の合計、一般的に使用される二種類の
* GET：
1.リクエストパラメータアドレスをバー表示。これは、（HTTPプロトコルを説明した後に）要求ラインをカプセル化します。
2.要求パラメータのサイズが制限されています。
3.安全性の低いです。
POST *：
2.要求パラメータはなくなり、アドレスバー。これは、（HTTPプロトコルを説明した後に）リクエストボディにカプセル化されます
。サイズリクエストパラメータが限定されるものではありません。
3.より安全。オーダー表件のデータを提出する：あなたはname属性を指定する必要があります
*フォームアイテムのラベル：*入力：type属性は、表示要素のスタイルを変更することができます
*プロパティのタイプ：
*テキスト：テキスト入力ボックスは、デフォルト値
*プレースホルダ：入力ボックス、内容の変更は、自動的にメッセージをクリアし、入力ボックスを指定するメッセージ
*パスワード：パスワード入力ボックス
*ラジオ：ラジオボタン
*注：
1.ラジオの効果を達成するために複数のラジオボタンを取得します、ボックスのname属性値の複数が同じでなければなりません。
2.一般的には、一つ一つのボックスはvalue属性の指定に提出した後、選択した値が提供して提供します
。3.属性を確認し、デフォルト値を指定することができますが
、チェックボックス：チェックボックス*
*注：
1.一般的には、一つ一つのボックスを与えるだろう提供value属性が提出した後、選択した値を指定します
。2.属性を確認し、デフォルト値を指定することができ
、ファイル選択ボックス：*ファイル
*隠さ：非表示フィールド提出された情報の一部についてを。
*ボタン：
*送信：送信ボタン。フォームを送信することができます
*ボタン：通常のボタン
画像は、ボタンを提出：*画像の
パス* src属性が指定する画像
*ラベル：指定されたエントリ情報のテキスト記述
*注：
*属性と一般的にid属性値の入力に対応するためのラベル。対応ならば、ラベルエリアをクリックして、入力フォーカス入力ボックスを取得します。*選択：ドロップダウンリスト
*子要素：オプション、指定されたリスト項目
* TEXTAREA：テキストフィールド
* COLS：指定した列の数、各ライン文字数
*行：行のデフォルト数。
CSS：ページレイアウトコントロールや造園
複数のスタイルは、同じhtml要素に作用することができるだけでなく、発効：コンセプト：カスケードスタイルシートカスケードスタイルシート*スタック
利点：
。強力な
コンテンツのプレゼンテーションとスタイル制御別々の*は、結合を低減します。開発効率を向上させるための分業のために、それが容易になります* *デカップリングCSSの使用：CSSとHTMLの結合様式
- インラインスタイル
指定されたタグでスタイル属性のCSSコード
として：<divのスタイル=「色：赤;」>こんにちは、CSS </ div>- *内部スタイルヘッドタグ、タグボディコンテンツ定義スタイルタグ、スタイルタグでは、そのような*としてのCSSコードである：
<スタイル>
DIV {
色：青;
}
</スタイル>
の<div>ハローCSS </ div>- 外部スタイル
定義CSSリソースファイル。
headタグでは、リンクタグの定義、外部リソースの導入はファイル
のような：
a.cssファイル：
DIV {
色：グリーン;
}
<リンクのrel =「このスタイルシート」のhref =「CSS / a.css」>
の<div>こんにちはCSS </ div>
<div>のCSSのHello </ div>注：範囲を増加させる* 1,2,3-方法CSS効果
* 1モードが使用されていない、後者の一般的に使用されるフォーマット2、* 3 3のように書くことができる：
<スタイル>
@import「CSS / a.css」;
< /スタイル>CSS構文：*フォーマット：{セレクタ
属性名1：1つの属性値、
プロパティ名2：属性値2;
...} *セレクタ：同様の特性を有するフィルタエレメント*注：各プロパティの*必須、離間、最後の属性を追加することはできません。セレクタ：同様の特性を有するフィルタエレメントは、分類は、*
1基本セレクタ
1セレクタID：id属性値固有ID値の特定の要素を選択するHTMLページを推奨。
*構文：#ID属性値{}
2.要素の選択：同じラベル名を持つ要素を選択する
構文*：タグ名{}
*注：IDセレクタ要素は、優先度セレクタよりも高い
選択クラス3：クラス要素は、同じ属性値を有する選択されました。
*文法：.classファイル属性値{}
*注：選択した要素上の選択クラスセレクタ優先
2.拡張セレクター：
1.すべての要素を選択する：
*構文：* {}
2.セレクタと：
* {2}を選択するセレクタ
フィルタエレメントセレクタセレクタ要素12：3子セレクタ
*構文：セレクタセレクタ1} {2
4.親セレクター：フィルタセレクタ親要素を2セレクタ1
*構文：セレクタ1> {2}セレクタ
5セレクタ属性：要素名選択要素、属性名=属性値
*構文要素名[属性名=「属性値」] {}
6。擬似クラスの選択：ステータスを有するいくつかの要素を選択する
構文*：エレメント：{ステータス}
など*：<A>
*ステータス：
*リンク：初期状態
*訪問：訪問状態
*アクティブ：アクセスされた状態
*ホバー：マウス懸濁液プロパティ
- 行の高さ：フォント、テキスト*フォントサイズ：フォントサイズ*色：文字色*テキスト整列：*行の高さの道
- 背景*背景：
- ボーダー*国境：プロパティに沿って、境界線を設定します
- サイズ*幅：幅*高さ：高さ
- ボックスモデル：コントロールのレイアウト*マージン：マージン*パディング：パディング
*デフォルトのマージンは、ケース内箱の全体の大きさに影響を与える
*ボックスサイズ：ボーダー・ボックス 、 プロパティのボックスセット、幅と高さは究極のボックスであるので、大き
フロート：フロート
左
右
ケース：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
