HTML列表、表格、表单基础

一、列表

        1.有序列表

                type: 1 A a I i

                reversed: 倒序顺序

                start: 设置初始值

    <ol type="1" reversed start="10">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

        2.无序列表

                type: disc 实心圆 默认

                         circle 空心圆

                         square 实心方框

    -->
    <ul type="square">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

        3.自定义列表

    <dl>
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
    </dl>

        注意：ul/ol下只用li li可以套任意标签

二、表格

        table  定义表格 

        tr      定义行

        th     定义标题

        td     定义列

        rowspan: 合并行  使用时：值为几，就把对应几行的td删掉

        colspan: 合并列  使用时：值为几，就删除本行后的几个td

        bgcolor: 背景颜色

        给一行中任意一个列加高（height）属性，整行都是一个高，如果有冲突，按最大值撑开；

        给一列中任意一个行加宽（width）属性，整列都是一个宽，如果有冲突，按最大值撑开。

    <table border="1" align="center" width="600">
        <tr>
            <th bgcolor="pink" height="30">表格标题</th>
            <th height="60">表格标题</th>
            <th>表格标题</th>
        </tr>
        <tr  align="center" >
            <td rowspan="3">第一行第一列</td>
            <td colspan="2">第一行第二列</td>
            <!-- <td>第一行第三列</td> -->
        </tr>
        <tr  align="center" >
            <!-- <td>第二行第一列</td> -->
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr  align="center" >
            <!-- <td>第三行第一列</td> -->
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>

三、表单

        text: 任意字符 文本框

        password：输入密码：显示为 ···

        number: 只能输入数字

        radio: 单选

        name属性 name属性相同时，为同一组单选选项组

        checked 默认选中，选多个时，选中最后拥有该属性的那个

        checkbox：复选

        name属性 name属性相同时，为同一组复选选项组

        checked 默认选中，选多个时，就是多个都选中

        name属性：传数据时，让接收方知道我们传的是谁的数据。值是什么。

        value属性：值。

        submit：提交按钮

        form:action: 提交地址

 姓名 ：
        <label for="bbb">姓名</label>
        <label for="ccc">密码
            <input type="password" id="ccc" name="password">
        </label>
        
        <input type="text" id="bbb" name="username" value="大漂亮">
        密码 ：
        数字 ：<input type="number" name="number">
        单选按钮 ：
        
                <input type="radio" name="sex" value="nan">男
                <input type="radio" name="sex" value="nv">女
                <input type="radio" name="sex" checked value="qita">其他
        多选按钮 ：
                <input type="checkbox" name="a" value="chi">吃
                <input type="checkbox" name="a" value="he" checked>喝
                <input type="checkbox" name="a" value="shui" checked>睡
                <input type="checkbox" name="a" value="wan">玩
                <input type="checkbox" name="a" value="xue" checked>学习
                <br>

        下拉框             

                select 下拉框

                        select - option--选项

                                  - value：选项值

<select name="地区" id="">
                <option value="" selected></option>
                <option value="1">北京</option>
                <option value="3">上海</option>
                <option value="2">深圳</option>
                <option value="4">太原</option>
            </select>

        文本域

<textarea name="备注" id="" cols="80" rows="10"></textarea>

        提交

            <input type="submit">

            <input type="file">