HTML-CSS-JS-day02：复合标签

HTML常用标签之复合标签

一、列表

1）无序列表

标签：

<ul type="">
            <li></li>
            <li type=""></li>
            <li></li>
             .....          
</ul>

属性：

type 列表样式

-disc 实心圆

-circle 空心圆

-square 实心方块

2）有序列表

标签：

<ol type="">
            <li type=""></li>
            ......
</ol>

属性：

type 列表样式

-a/A

-i/I

-1

start:从第几个数开始，起始值

reversed：倒序

应用场景：列表信息，导航栏

二、表格--table

案例：

<table align="center"width="400px" border="1" cellspacing="0" cellpadding="10px">
            <caption>
                <b>学生信息表</b>
            </caption>
            <thead>
            <tr align="center"> <!--tr表示行-->
                <th>表头</th>
                <th>ID</th><!--td表示列-->
                <th>姓名</th>
                <th>年龄</th>
                <th>联系方式</th>
            </tr>
            </thead>
            
            <tbody>
            <tr align="center" bgcolor="#982999"><!--tr表示行-->
                 <th rowspan="3" align="left"  valign="top">数据</th>
                <td>1</td><!--td表示列-->
                <td>zs</td>
                <td>18</td>
                <td>18190121254</td>
            </tr>
            
            <tr align="center"><!--tr表示行-->
                 
                <td>2</td><!--td表示列-->
                <td>ls</td>
                <td>18</td>
                <td>18194656825</td>
            </tr>
            
            <tr align="center" bgcolor="#994582"><!--tr表示行-->
            
                <td>3</td><!--td表示列-->
                <td>ww</td>
                <td colspan="2">20/12345678945</td>
                
            </tr>
            </tbody>
            <tfoot> 
                        脚部（底部）：通常用于摆放分页效果
            </tfoot>
        </table>

属性：

border：边框线0不开见，1可见并且设置边框为1像素

cellspacing：单元格间的间距

cellpadding：单元格的内边距

bgcolor：（background color）背景颜色

align（水平）：left左 center 中 right 右

valign（垂直）：top上 middle中 bottom下

rowspan:跨行合并

colspan：跨列合并

caption：表格的标题

三、表单

1-定义

表单也称为数据收集表单，主要是实现客户端向服务器端提交数据

2-表单的应用场景

登录表单

注册表单

3-表单结构

<form action="" method="" name="" enctype="text/plain"></form>

​
说明：
    被form标记包裹的区域，称为表单域。
    form： 表单
属性：
    action： 表单提交的地址，为空则代表提交到当前页面
    name: 表单名
    enctype： 提交的表单数据是否需要编码
        - application/x-www-form-urlencoded
        - multipart/form-data  不编码（表单控件中出现文件上传时使用）
        - text/plain    普通文本发送
    method： 提交方式
        - get  获取       
            提交的表单数据会显示到地址栏，格式： ?name=value&name=value
            每种浏览器地址栏最大长度不一致，如果数据过大可能会导致数据丢失。
            地址栏的数据会暴露，不太安全。
        - post  发送
            表单数据会被封装在请求头信息中（载荷）
            通常post提交方式的最大数据在服务器端配置，理论上没有限制。
            相较于get提交，数据相对安全。
-------------------------------------------------------------------
表单中的相关控件:

<input type="" name="" placeholder=""/>

属性：
    type：   控件类型
       - text   文本输入框
         - password    密码输入框
         - submit   提交按钮
         - radio    定义单选框
         - checkbox   多选框
         - button 定义按钮(没有提交功能)
         - image 图片提交按钮(src引入图片,以及width(宽)/height(高))
         - email 邮箱输入框(在提交数据时进行格式检测)
         - color 定义颜色选择框
         - number  定义数字输入框
         - file 定义文件选择(用于文件上传)
         - reset 重置按钮
         - hidden   隐藏控件
    name： 控件名称，服务器接收表单数据时对应的键名称。
    placeholder：    设置提示信息
    readonly 只读(不能修改)，可以提交
    disabled 禁用(不可操作)，不可提交
    size 定义输入框的尺寸(宽度)
    maxlength 定义输入框内容的最大长度
    min(type [number])  最小值
    max(type [number])  最大值
    list: 列表项
        案例：
     

       <input type="text" name="userName" list="un"/>
            <datalist id="un">
                    <option value="张三">
                    <option value="张三丰">
                    <option value="张天爱">
                    <option value="李莫愁">
            </datalist>

----------------------------------------------------------------

<select name="" size="" multiple>
    <option value="">选项1</option>
    ...
</select>

​
说明：
    select: 下拉框
    option：下拉项
属性：
    name: 下拉框名称
    value： 传递到服务器的值
    multiple： 按住ctrl可以实现多选
    size: 下拉框的显示高度
----------------------------------------------------------------
#多行文本框

<textarea name="" rows="" cols=""></textarea>

​
属性：
    rows: 定义多行文本框的最小行
    cols: 定义文本框的最小列

    <form action="https://www.baidu.com/" name="loginForm" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>登录</legend>
                用户名：<input name="userName" type="text" placeholder="请输入用户名"/><br/>
                密&emsp;码：<input name="userPwd" type="password" placeholder="请输入密码"/><br/>
                <input type="submit" value="登录" />
            </fieldset>
        </form>
        
        <form action="localhost:8080/user/regist" method="post" enctype="multipart/form-data">
            <fieldset>
                <legend>注册</legend>
                用户名：<input name="userName" type="text" placeholder="请输入用户名"/><br/>
                密&emsp;码：<input name="userPwd" type="password" placeholder="请输入密码"/><br/>
                再次确认密码：<input name="reUserPwd" type="password" placeholder="请输入密码"/><br/>
                性别：<input type="radio" name="gender" value="1"/>男&emsp;&emsp;<input type="radio" name="gender" value="0"/>女<br/>
                爱好：
                <input type="checkbox" name="like" value="1"/>篮球&emsp;
                <input type="checkbox" name="like" value="2"/>足球&emsp;
                <input type="checkbox" name="like" value="3"/>游戏&emsp;<br/>
                请选择省份：
                <select name="sqt">
                    <option value="">---请选择省份---</option>
                    <option value="1001">四川省</option>
                    <option value="1002">重庆市</option>
                    <option value="1003">北京市</option>
                </select>
                <br />
                
                上传头像：<input type="file" name="headImg"/><br/>
                个人备注：
                <textarea name="myinfo" rows="6" cols="16" placeholder="请输入个人备注信息"></textarea>
                <br/>
                <input type="submit" value="注册"/>
            </fieldset>
        </form>