粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

#粵嵌我來了

粵嵌星計劃

今天是打卡

第 99天#

粵嵌寶雞文理學院教學點#

1标簽元素

**1.1基本元素--無序清單** ![在這裡插入圖檔描述](https://img-blog.csdnimg.cn/20191127234410103.png) ![在這裡插入圖檔描述](https://img-blog.csdnimg.cn/20191127234445643.png) **1.2基本元素-有序清單**

<ol>
<li>地蔔師</li>
<li>卡爾</li>
</ol>

運作結果

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.3基本元素 - 的塊标簽div和span 以及他們的差別

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.3.1div布局

一個簡單的div布局的例子

注：這裡使用了style外邊距樣式，margin-left:50px 指的是左邊距50個像素

需要對兩個圖檔進行左邊距控制

如果不使用div,則需要對每一個圖像設定邊距

使用了div後，先把兩個圖像都放在一個div裡

隻需要設定div的邊距，就可以達到兩個圖檔都移動的效果`

<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
  <br/>
 <img style="margin-left:50px" src="https://how2j.cn/example.gif"/>


<div style="margin-left:100px" >
 <img src="https://how2j.cn/example.gif"/>
  <br/>
 <img src="https://how2j.cn/example.gif"/>
</div>

運作結果

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.3.2div和span的差別

<div>
 第一個div
</div>

<div>
 第二個div
</div>

<span>
 第一個span
</span>

<span>
 第二個span
</span>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.4有背景文字的文本框

<input type="text" placeholder="請輸入賬号">
<input type="password"> 即表示密碼框

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

就是加了這樣的操作就是會顯示有密碼的現象

1.5表單

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.5radio

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

<p>今天晚上做什麼？</p>

學習java<input type="radio" name="activity" value="學習java" > <br/>
東京熱<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

1.5複選框

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

<p>今天晚上做什麼？</p>
 
學習java<input type="checkbox" value="學習java" > <br/>
東京熱<input type="checkbox" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.6下拉清單

<select >
 <option >蒼老師</option>
 <option >高樹瑪利亞</option>
 <option >遙美</option>
</select>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1.7文本域

<textarea>abc
def
</textarea>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

普通按鈕不能送出
<form action="/study/login.jsp" method="get">
賬号：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<input type="button" value="登陸">
</form>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

<form action="/study/login.jsp">
賬号：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password" > <br/>
<input type="submit" value="送出">
<input type="reset" value="重置">
</form>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

做一個登入頁面

<!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/185237.jpg") 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>

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

粵嵌星計劃打卡第99天(前端部分練習，完成一個天貓首頁 HTML+css+js+servlet+jsp(前三部分代碼聯系))

1标簽元素

繼續閱讀

粵嵌星計劃打卡第十四天（Java面向對象：面向過程和面向對象兩種程式設計思想）（面試題集錦，基礎知識辨析（hashMap及其一些列的差別））

粵嵌星計劃打卡五天（ java中常見的異常，以及解決辦法）

粵嵌星計劃打卡第二天（java基礎文法：常量和變量的定義和使用，字元串類型和數值類型）

粵嵌星計劃打卡第五十五天（Java IO系統：位元組流類：InputStream/FileInputStream/BufferedInputStream）

粵嵌星計劃打卡第二十五天（java面型對象：繼承）（io流）

粵嵌星計劃打卡第五十七天（Java IO系統：位元組輸出流：OutputStream/FileOutputStream/BufferedOutputStream）