HTML前端基础（列表及表单的使用方法）

1.有序列表

    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    <!-- 有序列表 ol
        type: 1 A a I i
        reversed: 倒序顺序
        start: 设置初始值
    -->

2.无序列表

    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

<!-- 无序列表 ul
        type: disc 实心圆 默认
              circle 空心圆
              square 实心方框
    -->

3.自定义列表

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

4.表格

!-- 表格 
        table >  定义表格
        tr    >  定义行
        th    >  定义标题
        td    >  定义列

        rowspan: 合并行  使用时：值为几，就把对应几行的td删掉
        colspan: 合并列  使用时：值为几，就删除本行后的几个td
        bgcolor: 背景颜色

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

<table border="1" align="center" width="600">
        <tr>
            <th bgcolor="red" 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>

<!-- type
            text: 任意字符 文本框
            password：输入密码：显示为 ···
            number: 只能输入数字

            radio: 单选 
                name属性 name属性相同时，为同一组单选选项组
                checked 默认选中，选多个时，选中最后拥有该属性的那个
            checkbox：复选
                name属性 name属性相同时，为同一组复选选项组
                checked 默认选中，选多个时，就是多个都选中

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

            form:action: 提交地址


        -->

5.单选按钮

<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<input type="radio" name="sex" value="qita">其他

6.多选按钮

<input type="checkbox" name="b" value="chi" checked>吃
<input type="checkbox" name="b" value="he"checked>喝
<input type="checkbox" name="b" value="wan">玩
<input type="checkbox" name="b" value="le">乐

7.下拉框

select name="吃">
                <option value="" selected></option>
                <option value="1" >糖醋里脊</option>
                <option value="2" >红烧肉</option>
                <option value="3" >红烧排骨</option>
                <option value="4" >糖醋鲤鱼</option>
</select>

8.文本域

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

9.提交

<input type="submit">
<input type="file">