快捷学习HTML列表，表格，表单

学习目标：列表，表格，表单

• 一天掌握 HTML列表，表格，表单

---

学习内容：列表

1. 有序列表
2. 无序列表
3. 自定义列表

       <!-- 有序列表 -->
           <!-- 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>
       <!-- 无序列表 -->
           <!-- type:disc 实心圆 默认
                circle 空心圆
                square 实心方框 -->
       <ul type="square">
           <li>无序列表</li>
           <li>无序列表</li>
           <li>无序列表</li>
           <li>无序列表</li>
           <li>无序列表</li>
       </ul>
       <!-- 自定义列表 -->
       <dl>
           <dt>标题标签</dt>
           <dd>自定义列表</dd>
           <dd>自定义列表</dd>
           <dd>自定义列表</dd>
           <dd>自定义列表</dd>
           <dd>自定义列表</dd>
       </dl>
       <!-- 注意: ul/ol下只用li li可以套任意标签 -->

---

学习内容二：表格table

        1.定义表格

        2.定义行

        3.定义标题

        4定义列

    <!-- 表格 -->
        <!-- table: 定义表格
        tr:定义行
        th:定义标题
        td:定义列
        rowspan:合并行 使用时:值为几,就把对应几行的td删掉
        colspan:合并列 使用时:值为几,就删除本行后的几个td
        bgcolor:背景颜色
        给一行中任意一个列加高,整行都是一个高,按最大值撑开
        给一列中任意一个行加宽,整列都是一个宽,按最大值撑开 -->
    <table align="center" border="1" width="400">
        <tr>
            <th bgcolor="red" height="60">表格标题</th>
            <th>表格标题</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>        

学习内容三：表单form

        1.输入框input

        2.下拉框select

        3.文本域textarea

    <!-- 表单 form-->
        <!-- input -->
        <!-- type
            text:任意字符 文本框
            password:输入密码:显示为 .....
            number: 只能输入数字
            -
            radio:单选按钮
                name属性 name属性相同时,为同一组单选选项组
                checked 默认选中,选多个时,选中最后拥用该属性的那个
            checkbox:多选
                name属性 name属性相同时,为同一组多选多选项
                checked 默认选中,选多个时,就是多个选中

                name属性:传数据时,让接收方知道我们传的谁的数据
                value属性:值
            submit:提交按钮
            file:提交文件按钮
            form:action属性是:提交地址 -->
    <form action="demo.html">
        姓名：
        <input type="text" name="username">
        密码:
        <input type="password" name="passwored">
        数字:
        <input type="number" name="num">
        单选按钮：
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
        <input type="radio" name="sex" checked value="qita">其他
        多选按钮:
        <input type="checkbox" name="happy" value="eat">吃
        <input type="checkbox" name="happy" value="he">喝
        <input type="checkbox" name="happy" value="wan">玩
        <input type="checkbox" name="happy" value="le">乐
            <!-- 下拉框 select -->
        <!-- select - option--选项
            - value 选项值
            属性 selected默认选项 -->
        下拉框:
        <select name="" id="">
            <option value="" selected></option>
            <option value="beijing">北京</option>
            <option value="taiyuan">太原</option>
            <option value="shanghai">上海</option>
            <option value="hangzhou">杭州</option>
        </select>           
        <br>
        <!-- 文本域 -->
        文本域:
        <textarea name="" id="" cols="30" rows="3"></textarea>
        <!-- 提交按钮 -->
        提交:
        <input type="submit">
        <!-- 提交文件按钮 -->
        提交文件:
        <input type="file">
    </form>