前端基础（二）：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）渲染效果图及实现说明