前端基礎（二）：HTML之列表、表格、表單標籤

下面是小凰凰的簡介，看下吧！
💗人生態度：珍惜時間，渴望學習，熱愛音樂，把握命運，享受生活
💗學習技能：網絡 -> 雲計算運維 -> python全棧( 當前正在學習中)
💗您的點贊、收藏、關注是對博主創作的最大鼓勵，在此謝過！
有相關技能問題可以寫在下方評論區，我們一起學習，一起進步。
後期會不斷更新python全棧學習筆記，秉着質量博文爲原則，寫好每一篇博文。

一、列表標籤

1、無序列表(使用較多) —— 快捷語法 ul>li*4

<ul> <!--無序列表英語：unorder list-->
        <li>第一項</li>
        <li>第二項</li>
        <li>第二項</li>
        <li>第二項</li>
</ul>
雖然ul標籤很醜 但是在頁面佈局的時候 只要是排版一致的幾行數據基本上用的都是ul標籤

2、有序列表(瞭解) —— 快捷語法 ol>li*3

<!--有序列表英語：order list-->
<ol type="1" start="5"> <!--start = '5':序號從5開始-->
    <li>大家好！</li>
    <li>我是來自四川的小夥子！</li>
    <li>如果覺得我寫的好就點個關注吧！</li>
</ol>

<!-- type屬性：

1 數字列表，默認值

A 大寫字母

a 小寫字母

Ⅰ 大寫羅馬

ⅰ 小寫羅馬-->

渲染效果展示：

3、標題列表(瞭解)

<dl>
    <dt>標題1</dt> 
    <dd>內容1</dd>
    <dt>標題2</dt>
    <dd>內容2</dd>
    <dt>標題3</dt>
    <dd>內容3</dd>
</dl>

二、table 表格標籤

（1）table最簡單使用

<!-- 表格標籤
<thead> 表頭
<tbody> 表單數據
<tr> 一個<tr> 就是一行
<th> 加粗文本，一般用於表頭標題
<td> 正常文本，一般用於其他表格內容
    
屬性（一般加在開始標籤裏）
<table border="1">  加外邊框
<td colspan="2"></td>  水平方向佔2個單元格（合併同一行中的單元格）
<td rowspan="2"></td>   垂直方向佔2個單元格（合併同一列中的單元格）
-->
    <table>  <!-- 表格標籤裏，由<thead></thead>和<tbody></tbody> 組成 -->
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>mili</td>
                <td>1314</td>
            </tr>
            <tr>
                <td>cc</td>
                <td>520</td>
            </tr>
        </tbody>
</table>

渲染效果：

（2）添加三個重要屬性，再看效果

加上下面三個屬性，再看渲染效果:
border: 表格邊框 
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格） 

    <table border = '1'>
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
                <th>hobby</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>吳晉丞</td>
                <td>123456</td>
                <td>cloud computing</td>
            </tr>
            <tr>
                <td colspan="2">陳媛媛</td>
                <td>dancing queen</td>
            </tr>
            <tr>
                <td>華晨宇</td>
                <td>best singer</td>
                <td rowspan="2">sing song</td>
            </tr>
            <tr>
                <td>本兮</td>
                <td>singer</td>
            </tr>
        </tbody>
</table>

渲染效果：

三、form 表單標籤

1、form表單中所有標籤的屬性歸納

（1）form標籤屬性

能夠獲取前端用戶數據(用戶輸入的、用戶選擇、用戶上傳…)基於網絡發送給後端服務器

<!--
	格式：<form action= method= enctype=>
		</form>
    action屬性控制數據提交的後端路徑(給哪個服務端提交數據)
        1.什麼都不寫  默認就是朝當前頁面所在的url提交數據
        2.寫全路徑:https://www.baidu.com  朝百度服務端提交
        3.只寫路徑後綴action='/index/'  自動識別出當前服務端的ip和port拼接到前面

    form表單提交文件需要注意
        1.method屬性必須指定爲 post
        （form表單默認提交數據的方式是get請求，數據是直接放在url後面的，
　　　　　　無法保證數據安全 http://127.0.0.1:5000/index/?username=吳晉丞&password=5188891&gender=on）
　　　　　　
        2.enctype="multipart/form-data"
            enctype屬性類似於數據提交的編碼格式
            默認是urlencoded 只能夠提交普通的文本數據
            formdata 就可以支持提交文件數據 -->
            
例如：<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
	 </form>

這個標籤是表單的定義標籤，下面介紹的標籤都是接收用戶輸入的各種方法的標籤。都應該放在form標籤裏面，這樣form標籤才能傳給服務器

（2）input標籤屬性

1. name：相當於給標籤起個名,以性別爲例,男,女標籤的name值相同,'實現單選！',說明都屬於性別這個標籤,那麼表單提交時,用戶要麼選擇男,要麼選擇女進行提交
2. value：表單提交時對應項的值
3. type：實現表單中各式各樣的用戶輸入方式
4. readonly：text和password設置只讀
5. disabled：所有input均適用
6. checked：設置默認值，checked = 'checked',因爲屬性名和屬性值一致，因此可以簡寫爲checked

value和type可以聯合使用
	（1）type="button" 或 "reset" 或 "submit"時，value爲按鈕上顯示的文本內容
	（2）type="text" 或 "password" 或 "hidden"時，value爲輸入框的初始值
	（3）type="checkbox" 或 "radio" 或 "file"，value爲輸入相關聯的值

解釋下第（3）點：比如性別我們用的是radio，可選男、女，但是這只是給用戶看的，我們給後端傳輸數據時，不能傳男、女，應該傳male、female，這個value就是這個male、female
<p>gender:
         <input type="radio" name="gender" value='male' checked>男 # 給性別男設置爲默認選中
         <input type="radio" name="gender" value = 'female'>女
         <input type="radio" name="gender">其他
</p >

input中的type屬性的屬性值列表：

# label 和 input都是行內標籤。ps:input不跟label關聯也沒有問題
label 標籤的默認屬性 for：
    for的值要與相關聯的 input標籤的 id值一致

-------- 第一種:直接將input框寫在label內 --------
<label for="d1">  # label標籤主要實現點擊username，跳到d1，也就是text框裏去！
    username:<input type="text" id="d1">
</label>

-------- 第二種 通過id鏈接即可 無需嵌套 -------- 
<label for="d2">password:</label>
<input type="text" id="d2">   

input標籤 就類似於前端的變形金剛 ，通過type屬性變形
    1. text:普通文本
    2. password:密文
    3. date:日期    
    4. submit:用來觸發form表單提交數據的動作
    5. button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之後可以給它自定義各種功能
    6. reset:重置內容
    7. radio:單選
        默認選中要加checked='checked'
        <input type="radio" name="gender" checked='checked'>男
        當標籤的屬性名和屬性值一樣的時候可以簡寫
        <input type="radio" name="gender" checked>女

    8. checkbox:多選
        <input type="checkbox" checked>DBJ
    
    9. file:獲取文件 也可以一次性獲取多個
        <input type="file" multiple>
        
    10. hidden:隱藏當前input框     釣魚網站伎倆    

（3）select標籤

select 標籤 默認是單選 可以加mutiple參數變多選 默認選中selected

<!--單選-->
  <p>province：
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option> # selected設置默認選中北京（與input中的checked一樣），selected='selected',簡寫
                <option value="">深圳</option>
            </select>
  </p >

 <!-- select標籤-多選 使用 multiple 屬性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣結衣</option>
                <option value="" selected>斯佳麗</option>
                <option value="">明老師</option>
            </select>
        </p >

<p>province1:
         <!-- select標籤-多級單選列表 嵌套 <optgroup>標籤 -->
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦東</option>
                   <option value="">黃埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝陽</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
</p >

2、實戰演練

（1）html源碼

<form action="">
        <!-- 用戶輸入框 -->
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p >
        <p>
            <label for="d2">password:<input type="password" id="d2"></label>
        </p >
        <!-- 日期選擇功能 -->
        <p>birthday:
            <input type="date">
        </p >
        <!-- input標籤-單選 (將 name 的值設爲一樣的，就可實現 單選) -->
        <p>gender:
            <input type="radio" name="gender" value='male'>男
            <input type="radio" name="gender" value='female' checked>女
        </p >
        <!--input標籤-多選 -->
        <p>hobby:
            <input type="checkbox">read
            <input type="checkbox" checked>DBJ
            <input type="checkbox" checked>JBD
            <input type="checkbox">hecha
        </p >

        <!-- select標籤-單選 -->
        <p>province：
            <select name="" id="">
                <option value="">上海</option>
                <option value="" selected>北京</option>
                <option value="">深圳</option>
            </select>
        </p >
         <!-- select標籤-多選 使用 multiple 屬性 -->
        <p>前女友:
            <select name="" id="" multiple>
                <option value="" selected>新垣結衣</option>
                <option value="" selected>斯佳麗</option>
                <option value="">明老師</option>
            </select>
        </p >
         <!-- select標籤-多級單選列表 嵌套 <optgroup>標籤 -->
       <p>province1:
           <select name="" id="">
               <optgroup label="上海">
                   <option value="">浦東</option>
                   <option value="">黃埔</option>
                   <option value="">青浦</option>
               </optgroup>
               <optgroup label="北京">
                   <option value="">朝陽</option>
                   <option value="">昌平</option>
                   <option value="">沙河</option>
               </optgroup>
               <optgroup label="深圳">
                   <option value="">111</option>
                   <option value="">222</option>
                   <option value="">333</option>
               </optgroup>
           </select>
       </p >
       
       <!-- 上傳文件 multiple屬性可支持用戶能上傳多種文件 -->
        <p>文件:
            <input type="file" multiple>
        </p >
        <!-- 文本輸入框 -->
        <p>自我介紹:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <input type="submit" value="註冊">
        <!--  當你沒有使用 value屬性 指定按鈕的文本內容 不同的瀏覽器打開之後可能渲染的文本內容不一致-->
        <input type="button" value="按鈕">
        <input type="reset" value="重置">
        <button>點我</button>
    </form>

（2）渲染效果圖及實現說明