ノート-JavaWeb旅6を学びます

表のタグ：

テーブル：テーブルを定義

幅：幅

ボーダー：ボーダー

CELLPADDING：とからセルの内容を定義します

CELLSPACING：セル間の距離を定義します。

BGCOLOR：背景色

TR：定義行---プロパティは背景色で定義されてもよい、位置合わせ、および

TD：-----セルを定義COLSPAN：マージされた列のROWSPAN：マージライン

目：ヘッダーセルを定義します

：表のタイトル

：テーブルの最初の部分を示します

：身体の一部を示す表

：テーブルの足の一部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--borer边框-->
    <!--width 表格宽度-->
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#006400">
        <thead> <!--表示表格头部分，不会在页面中有任何的样式-->
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>

        <tbody><!--表示表格的身体部分-->
        <tr bgcolor="#b22222">
            <td>1</td>
            <td>小龙女</td>
            <td>100</td>
        </tr>
        </tbody>

        <tfoot>
        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>50</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

トラベルケース列の演習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旅游网</title>
</head>
<body>
    <table  width="100%" align="center">
        <!--第一行-->
        <tr>
            <td>
                <img src="tupian/image/top_banner.jpg" width="100%" alt="">
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr>
                        <td>
                            <img src="tupian/image/logo.jpg" alt="">
                        </td>

                        <td>
                            <img src="tupian/image/search.png" alt="">
                        </td>

                        <td>
                            <img src="tupian/image/hot_tel.jpg" alt="">
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
        <!--第三行-->
        <tr>
            <td>
                <table width="100%" align="center" bgcolor="#ffd700">
                    <tr align="center" height="45">
                        <td>
                            <a href="https://www.cnblogs.com/train99999/">首页</a>
                        </td>
                        <td>
                            门票
                        </td>
                        <td>
                            酒店
                        </td>
                        <td>
                            香港车票
                        </td>
                        <td>
                            出境游
                        </td>
                        <td>
                            国内游
                        </td>
                        <td>
                            港澳游
                        </td>
                        <td>
                            报团定制
                        </td>
                        <td>
                            全球自由行
                        </td>
                        <td>
                            收藏排行榜
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
        <!--第四行-->
        <tr>
            <td>
                <img src="tupian/image/banner_3.jpg" alt="">
            </td>
        </tr>
        <!--第五行-->
        <tr>
            <td>
                <img src="tupian/image/icon_5.jpg" alt="">
                精选
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第六行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;899</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第七行-->
        <tr>
            <td>
                <img src="tupian/image/icon_6.jpg" alt="">
                国内游
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第八行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="tupian/image/guonei_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第九行-->
        <tr>
            <td>
                <img src="tupian/image/icon_7.jpg" alt="">
                境外游
                <hr color="#ffd700">
            </td>
        </tr>
        <!--第十行-->
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td rowspan="2">
                            <img src="tupian/image/jiangwai_1.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>

                    <tr>

                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                        <td>
                            <img src="tupian/image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
                            <font color="red">&yen;699</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--第十一行-->
        <tr>
            <td>
                <img src="tupian/image/footer_service.png" width="100%">
            </td>
        </tr>
        <tr>
            <td align="center" bgcolor="#ffd700">
                <font color="gray" size="2">
                    嘻嘻嘻嘻嘻有限公司
                    版权所有Copyright 2006-2019&copy;,All Right Reserverd 苏ICP备16007882
                </font>
            </td>
        </tr>
    </table>
</body>
</html>

HTMLタグ：formタグ

フォーム：対話のためにユーザとサーバによって入力されたデータを収集するための手段

from :用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围

タグから2つの属性があります。

action--、データを提出するURLを指定します

方法：一般的に使用される2、1、GET、1つのポストは、そこにある、7での提出を提出を指定します

取得：リクエストパラメータのサイズが制限されて、アドレスバーにパラメータを要求し、安全ではありません

ポスト：リクエストパラメータがアドレスバーに表示されていない、リクエストパラメータ無制限の大きさ、安全性

オーダー形式のデータが送信され、あなたはname属性を指定する必要があります。

フォーム項目タグ：

入力：type属性によって、表示要素のスタイルを変更します

プロパティのタイプ：

テキスト：デフォルトのテキスト入力ボックス、タイプ属性

パスワード：パスワードの入力ボックス、非表示のテキスト入力プロパティを指定します

ラジオ：ラジオボタン、効果を達成するために複数のラジオを取得する]チェックボックスをオンにし、複数のチェックボックスのname属性の値が同じである必要があり、通常、単一のボックスには、後に選択された指定属性ごとに値を提供します送信された値、checked属性は、デフォルト値を指定することができます

チェックボックス：チェックボックスをオフにして、一般的に一つ一つのボックスには、valueプロパティを提供与え、指定された値は、checked属性が提出した後、選択された、あなたはデフォルト値を指定することができます

ファイル：ファイルのチェックボックス

隠された：非表示フィールド

ボタン：（ボタンを提出し、フォームを送信することができます）、ボタン（プッシュボタン）を提出、画像（画像送信ボタン）
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" placeholder="请输入用户名"><br>
        密码:<input type="password" name="password"><br>
        性别:<input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female">女<br>
        爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
            <input type="checkbox" name="hobby" value="java"> Java
            <input type="checkbox" name="hobby" value="game"> 游戏
            <br>
        图片:<input type="file" name="file"><br>
        生日:<input type="datetime-local" name="birthday"><br>
        邮箱:<input type="email" name="email"><br>
        <input type="submit" value="登录">


    </form>
</body>
</html>
```

登録事例演習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="username" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="username" id="email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="username" id="name"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="username" id="tel"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="gender"  value="male">男
                    <input type="radio" name="gender"  value="female">女</td>
            </tr>
            <tr>
                <td><lable for="date">出生年月</lable></td>
                <td><input type="date" name="date" id="date"></td>
            </tr>
            <tr>
                <td><lable for="checkcode">验证码</lable></td>
                <td><input type="text" name="date" id="checkcode">
                    <img src="verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>

        </table>
    </form>
</body>
</html>

2.select：ドロップダウンリスト

子要素：オプション、指定されたリスト項目

3.textarea：テキストフィールド

COLS：列数、行あたりの文字数を指定します。

行：行数をデフォルト

CSS：スタイルシートをカスケードカスケーディングスタイルシート

CSSの使用：CSSとHTMLの結合様式

1.インラインスタイル：スタイル属性がタグにCSSコードを指定します

headタグで、タグ本体のコンテンツ定義スタイルのタグ、スタイルのCSSコードラベルされています。2.内部スタイル

3.外部スタイル：headタグで定義されたCSSリソースファイル、定義されたタグリンク、外部のリソースファイルの導入

CSSの構文：

セレクタ{

2プロパティ値;：1属性

項目2：プロパティ値2。

....

}

セレクター：選択素子と同様の特性を有します

セレクター：

カテゴリー：

1.基本セレクタ

IDセレクタ：id属性値の特定の要素を選択し、

セレクタ要素：同じラベル名を持つ要素を選択します

クラスセレクタ：同じクラスの属性セレクタの値を選択します

2.拡張セレクタ

すべての要素を選択します。*} {

セレクタ設定：1つのセレクタ、選択を{2}

子セレクタ：セレクタ要素セレクタ1 ----「セレクタセレクタ2でフィルタエレメント2 {1}

親セレクター：親要素を選択するフィルタ選択部2 ---- 1「セレクタ1>セレクタ{2}

選択属性：選択要素要素名、名=属性値----「属性名[属性名=」属性値「]属性

擬似クラスの選択：状態を有するいくつかの要素を選択----「要素：{ステータス}

ステータス：リンク：初期状態は訪問：アクティブ状態を訪問した：アクセスされた状態を置く;マウスの状態をサスペンド

属性：

フォント、テキスト：フォントサイズ、フォントサイズ、テキストの色色 - テキストアライン：行の高さの位置合わせ：行の高さ
背景：背景
ボーダー：ボーダー
サイズ：幅：幅、高さ：高さ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:green;
            font-size:30px;
            text-align:center;
            line-height: 100px;

            border: 1px solid pink;
        }
        div{
            border: 1px solid;
            height: 200px;
            width: 200px;
            background: url("img/1_Adam_4k.jpg" );
        }
    </style>
</head>
<body>
    <P>云想衣裳花想容</P>
    <div></div>
</body>
</html>

ボックスモデル

マージン：マージン、パディング：パディング

フロート：フローティング（左、右）

CSS登録例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0px;
            padding: 0px;
            box-sizing:border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE ;
            /*让div背景白色*/
            /*让div水平居中*/
            background: white;
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{

            float:left;
            margin:15px;
        }
        .rg_center{
            border:1px solid red;
            float: left;
            width:450px;

        }
        .rg_right{

            float: right;
        }
        .p_reg{
            color:#FFD026;
            font-size:20px;
        }
        .p_ur{
            color:#A6A6A6;
            font-size:20px;
        }
        .td_left{
            width:100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#tel,#name,#birthday,#checkcode{
            width:251px;
            height:32px;
            border:1px solid #A6A6A6;
            border-radius:5px;
            padding-left:10px
        }
        #btn_sub{
            width:150px;
            height:40px;
            background: #FFD026;
            border:1px solid;
        }
    </style>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p class="p_reg">新用户注册</p>
            <p class="p_ur">USER REGISTER</p>
        </div>

        <div class="rg_center">
            <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 src="img/verify_code.jpg">
                    </td>
                </tr>


                <tr>
                    <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                </tr>
            </table>
        </div>

        <div class="rg_right">
            <P >已有账号?<a href="#">立即登录</a></P>
        </div>
    </div>
</body>
</html>