1 HTML標籤：表單標籤

1.1表單

概念：用於採集用戶輸入的數據。用於和服務器進行交互
- form：用於定義表單。可以定義一個範圍，範圍代表採集用戶數據的範圍
  - 屬性：
    *action：指定提交數據的URL
    *method：指定提交方式，一共7種，常用有2種
    get：
    - 請求參數會在地址欄中顯示。會封裝到請求行中
    - 請求參數大小有限制
    - 不太安全
    post：
    - 請求參數不會在地址欄中顯示。會封裝在請求體中
    - 請求參數大小沒有限制
    - 較爲安全
    *表單項中的數據想要被提交：必須指定其name屬性

1.2 表單項標籤：

input：可以通過type屬性值，改變元素戰士的樣式
- type屬性：
  - text：文本輸入框，默認值
  - password：密碼輸入框
  - radio：單選框
    1. 想要多個單選框實現單選效果，則多個單選框的name屬性值必須一樣。
    2. 一般會給每一個單選框value屬性，指定其被選中後提交的值
    3. checked屬性，指定默認值
  - checkbox：複選框
    1. 一般會給每一個框value屬性，指定其被選中後提交的值
    2. checked屬性，指定默認值
  - file：文件選擇框
  - hidden：隱藏域，用於提交一些信息
  - 按鈕：
    1. submit：提交按鈕。可以提交表單
    2. buttom：普通按鈕
    3. image：圖片提交按鈕，src屬性指定圖片的路徑
  - label：指定輸入項的文字描述信息
    *label的for屬性一般會和input的id屬性對應，如果對應了，則點擊label區域，會讓input輸入框獲取焦點
  - select：下拉列表
    *子元素：option，指定列表項
  - textarea：文本域
    *cols：指定列數，每一行有多少個字符
    *rows：默認多少行

2 CSS：頁面美化和佈局控制

2.1 概念：Cascading Style sheets層疊樣式表

層疊：多個樣式可以作用在同一個html元素上，同時生效

2.2 好處

功能強大
將內容展示和樣式控制分離
1. 降低耦合度，解耦。
2. 讓分工協作更容易
3. 提高開發效率

2.3 CSS的使用：CSS與html結合方式

內聯樣式：
- 在標籤內使用style屬性指定css代碼
- 如：<div style="color:red;">hello css</div>
內部樣式：
- 在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼
- 如：
  <style> div{color:blue;}</style>
  <div>hell css</div>
外部樣式：
1. 定義css資源文件
2. 在head標籤內，定義link標籤，引入外部資源文件
  -*a.css文件
  div{color:green;}
  <link rel="stylesheet" href="css/a.css">
  <div>hell css</div>

注意：
1. 1，2，3種方式，css作用範圍依次增大
2. 1方式不常用，後期常用2，3
3. 第三種可以寫爲<style>@import "css/a.css";</style>

2.4 css語法：

格式：
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
…
}
選擇器：篩選具有相似特徵的元素
注意：每一對屬性要使用;隔開，最後一對屬性可以不加;

2.5 選擇器：篩選具有相似特徵的元素

分類：
- 基礎選擇器
  優先級：行內樣式>id>類>元素(就近原則)
  1. id選擇器：選擇具體的id屬性值的元素，建議在一個html頁面中id值唯一
    語法：#id屬性值{}
  2. 元素選擇器：選擇具有相同標籤名稱的元素
    語法：標籤名稱{}
  3. 類選擇器：選擇具有相同的class屬性值的元素。
    語法：.class屬性值{}
- 擴展選擇器
  1. 選擇所有元素： *{}
  2. 並集選擇器：選擇器1,選擇器2{}
  3. 後代選擇器：選擇器1 選擇器2{}
    *篩選選擇器1下的所有子孫元素
  4. 子選擇器：選擇器1>選擇器2{}
    *篩選選擇器1下的選擇器2元素
  5. 屬性選擇器：元素名稱[屬性值=“屬性值”]{}
    *選擇元素名稱，屬性名=屬性值的元素，=屬性值可以省略
  6. 僞類選擇器：元素:狀態{}
    *選擇一些元素具有的狀態
    如<a></a>狀態
    1. link:初始化的狀態
    2. hover：鼠標懸浮狀態
    3. active：正在訪問狀態
    4. visited：被訪問過的狀態
      a.link{color:red}

2.6 屬性

字體、文本
- font-size：字體大小
- color：文本顏色
- text-align：對齊方式
- line-height：行高
背景
- bcakground
邊框
- border：設置邊框，符合屬性
尺寸
- width：寬度
- height：高度
盒子模型：控制佈局
- margin：外邊框
- padding：內邊框
  *默認情況下內邊距會影響整個盒子的大小
  *box-sizing:border-box;設置盒子的屬性。讓width和height就是最終盒子的大小
- float：浮動
  *left
  *right

2.7 用戶註冊頁面案例

<!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;
            margin: auto;
        }
        /*左邊*/
        .rg_left{
            float: left;
            margin: 15px;
        }
            /*新用戶註冊*/
            #p1{
            color: #FFD026;
            font-size: 20px
            }
            /*USER REGISTER*/
            #p2{
            color: #A6A6A6;
            font-size: 20px
            }
        /*中間*/
        .rg_center{
            float: left;
        }
        /*右邊*/
        .rg_right{
            float: right;
            margin: 15px;
        }
            /*已有賬號*/
            .rg_right>p{
                font-size: 15px;
            }
            /*立即登錄*/
            .rg_right>p>a{
                color: pink;
            }
        .td_left{
            width: 150px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#phone,#birthday,#yanzhengma{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #yanzhengma{
            width: 110px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

    <div class="rg_layout">
        <div class="rg_left">
            <p id="p1">新用戶註冊</p>
            <p id="p2">USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="get">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用戶名</label></td>
                            <td class="td_right"><input type="text" placeholder="請輸入賬號" id="username"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密碼</label></td>
                            <td class="td_right"><input type="password" placeholder="請輸入密碼"  id="password"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right" ><input type="email" placeholder="請輸入Email" id="email"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" placeholder="請輸入真實姓名"  id="name"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="phone">手機號</label></td>
                            <td class="td_right" ><input type="text" placeholder="請輸入您的手機號" id="phone"></td>
                        </tr>
                        <tr>
                            <td class="td_left">性別</td>
                            <td class="td_right">
                                <input type="radio" name="sex" checked>男
                                <input type="radio" name="sex">女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right" ><input type="date" id="birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="yanzhengma">驗證碼</label></td>
                            <td class="td_right" ><input type="text" id="yanzhengma" placeholder="請輸入驗證碼"><img id="tupian" style="vertical-align: middle;height: 32px" src="img/verify_code.jpg"></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input style="width: 150px;height: 40px; background-color: #FFD026;border: 0px" type="submit" value="註冊"></td>
                        </tr>

                    </table>
                </form>
            </div>
        </div>

        <div class="rg_right">
            <p>已有賬號? <a href="#">立即登錄</a></p>
        </div>
    </div>

</body>
</html>

day08【HTML&CSS】

今日內容

1 HTML標籤：表單標籤

1.1表單

1.2 表單項標籤：

2 CSS：頁面美化和佈局控制

2.1 概念：Cascading Style sheets層疊樣式表

2.2 好處

2.3 CSS的使用：CSS與html結合方式

2.4 css語法：

2.5 選擇器：篩選具有相似特徵的元素

2.6 屬性

2.7 用戶註冊頁面案例

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

公司剛入職了一名 Java 中級開發，短短 4 行代碼居然湊齊了 3 個 bug！我哭了~~

公衆號5月C#/.NET熱文一覽

git 下載大陸鏡像地址

Vue form綁定數據後只能顯示不能編輯

day18【黑馬旅遊網web】

SSM配置文件

Java基礎之—反射（非常重要）

maven默認jdk版本的修改方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結