巧记Table与Form，代码其实很简单。

表的使用

• 要点1：thead/tbody/tfooter ==等同于HTML文档
• 要点2：tr-代表行，语言标签；th,表头单元格；td，一个单元格。
• 要点3：td必须放置在tr标签中
• 要点4：合并行 colspan 合并列 rowspan

• 要点5：如果行/列已经合并，下面对应的单元格就要删除/注释。

    <table class="lesson" border="1">
        <caption>课程表</caption>
        <thead>
            <tr>
            <th colspan="2"></th>
            <!-- <th></th> -->
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>2</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>3</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>4</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <td colspan="7" >中午休息</td>
            </tr>
            <tr>
                <td rowspan="3">上午</td>
                <td>5</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>6</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐 </td>
                <td>英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>7</td>
                <td>课外活动</td>
                <td colspan="4">课外活动</td>
            </tr>
        </tbody>

  FORM的使用技巧及要点

• 使用结构部分
  <form action="提交地址" method="提交方式" target="_blank"></form>
• 知识点1.action 表单信息提交地址，信息提交成功会跳转去该地址
• 知识点2.method 提交方式 get=明文传值 post需要跟对应php/js配合

input表单元素

• 结构部分
  <input type="text" value="请输入中文" name="word"/>

• 类型/type：
  text/文本（string），checkbox/多选、file/文件、hidden/隐藏域、image/图片、password/密码、radio/单选、reset/重置、submit/提交、button/按钮、textarea/文本域、Email/邮件、select/下拉菜单…

  <form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
  </form>

• hidden隐藏域（不常用）：
  用途：
  送信息的时候，携带一些需要后端接收，但不需要用户看到的内容
  该请求一定是需要通过表单的form进行提交的

  <div>
            <label for="user-pic">头像</label>
            <!-- 在前端页面中看不到，他的值供后端处理时使用 -->
            <input type="hidden" name="MAX_FILE_SIZE" value="80000">
            <input type="file" name="user_pic" id="user-pic">
            <!-- 头像占位符 -->
            <div class="user-pic" style="grid-column: span 2;"></div>
  </div>

• label标签 帮助扩大点击区域，而不是只有点击表单元素有效

1. 缺点：必须把文字和表单元素都放在label里面
2. 果不想在一起~ 也可以利用标签上的属性 for 与表单元素id绑定

<label>
<input type="radio" name="gender" value="女">女
</label>

或者

<label  for="man">男</label>
<input id="man" type="radio" name="gender" value="男">

下拉菜单select 下拉表单 && option 选项，checked为默认选项

<select>
<option>上海市</option>
<option>北京</option>
<option>重庆</option>
<option>天津</option>
</select>

2020/12/09课程