表格、表单

1. 表格

   <!-- 表格容器 -->
    <!-- cellspacing:表格间距；cellpadding:表格内边距； -->
    <table border="1" cellspacing="0" cellpadding="15" width="500px">
      <!-- 表格的每一列，未设置的不能删除，列的占位符 -->
      <col />
      <col bgcolor="red" span="2" />
      <col />
      <col />
      <!-- 表格标题 -->
      <caption>
        学生成绩
      </caption>
      <!-- 表格表头 -->
      <thead>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
      </thead>
      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>20201010</td>
          <td>陈一</td>
          <!-- 表格垂直方向合并 -->
          <td rowspan="2">一年级2班</td>
          <td>96</td>
        </tr>
        <tr>
          <td>20201021</td>
          <td>王二</td>
          <td>87</td>
        </tr>
        <tr>
          <td>20201042</td>
          <td>张三</td>
          <td>一年级5班</td>
          <td>93</td>
        </tr>
        <tr>
          <td>20201013</td>
          <td>李四</td>
          <td>一年级3班</td>
          <td>76</td>
        </tr>
      </tbody>
      <!-- 表格底部 -->
      <tfoot>
        <tr>
          <!-- 表格水平方向合并 -->
          <td colspan="3" style="font-weight: 700; text-align: center;">
            总成绩
          </td>
          <td>352</td>
        </tr>
      </tfoot>
    </table>
    <hr />

   
2. 表单，表单域分组

    <!-- 表单元素，表单的内部元素称为控件元素 -->
    <form>
      <h4>会员信息</h4>
      <fieldset>
        <legend>基本信息(必填)</legend>
        <div style="margin: 10px 0;">
          <lable for="user_name">用户名：</lable>
          <!-- label的for值与input的id值一样，表示绑定；type="text"表示文本框，type="submit"表示提交； -->
          <!-- name表示当前文本框对应的变量名，name值不能出现连接符“-”，可使用下划线“_”；value表示默认值，value值会覆盖掉placeholder的值；placeholder表示给用户的提示信息； -->
          <!-- required表示必填项；autofocus表示自动获取焦点，但当只有一个表单控件时不写； -->
          <input
            id="user_name"
            type="text"
            name="userName"
            value=""
            placeholder="不少于2个字符"
            required
            autofocus
          />
        </div>
        <div style="margin: 10px 0;">
          <label for="pwd">密码：</label>
          <!-- type="password"表示密码； -->
          <input
            id="pwd"
            type="password"
            name="pass_word"
            value=""
            placceholder="不少于10个字符"
            required
          />
        </div>
        <div style="margin: 10px 0;">
          <label for="my-email">邮箱：</label>
          <input type="email" name="email" placeholder="123456.@qq.com" />
        </div>
        <div style="margin: 10px 0;">
          <label for="secret">性别：</label>
          <!-- type="radio"表示单选按钮；单选按钮的每一个选项按钮的name属性值必须一样;checked表示默认选中状态 -->
          <input id="" type="radio" name="gender" id="male" /><label for="male"
            >男</label
          >
          <input id="" type="radio" name="gender" id="female" /><label
            for="female"
            >女</label
          >
          <input id="" type="radio" name="gender" id="secret" checked /><label
            for="secret"
            >保密</label
          >
        </div>
        <div style="margin: 10px 0;">
          <label for="">爱好：</label>
          <!-- 复选框会返回多个值，name的属性值应该使用数组形式；每一个复选框后的label的for值与其前面的input的id值保持一致 -->
          <input type="checkbox" name="hobby[]" id="programe" /><label
            for="programe"
            >编程</label
          >
          <input type="checkbox" name="hobby[]" id="game" /><label for="game"
            >游戏</label
          >
          <input type="checkbox" name="hobby[]" id="travel" /><label
            for="travel"
            >旅游</label
          >
          <input type="checkbox" name="hobby[]" id="read" /><label for="read"
            >阅读</label
          >
        </div>
        <div style="margin: 10px 0;">
          <label for="user-img">头像</label>
          <input type="file" name="user_img" id="user-img" />
          <!-- 上传图片时可限制文件大小，用隐藏域填写，但这个数据是给服务器做参考的，不需要也不允许用户提供 -->
          <!-- 1k=1024byte,1m=1024k,1G=1024M,1T=1024G -->
          <!-- 限制上传文件的大小如8M；value值是以字节为单位的；name值为最大的_文件上传_尺寸，表示上传文件的最大尺寸； -->
          <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
          <!-- 用户id一般也是通过隐藏域发送到服务器 -->
          <input type="hidden" name="user_id" value="111" />
        </div>
        <div style="margin: 10px 0;">
          <!-- label的for值与input的id值绑定 -->
          <label for="my-course">课程：</label>
          <!-- input的list值与detalist的id值绑定 -->
          <input id="my-course" type="text" list="course" />
          <datalist id="course">
            <option value="html5">html5</option>
            <option value="css3">css3</option>
            <option value="js">js</option>
            <option value="php">php</option>
          </datalist>
        </div>
      </fieldset>
      <!-- fieldset表示表单控件分组 -->
      <fieldset style="margin: 20px 0;">
        <legend>其它信息(选填)</legend>
        <div style="margin: 10px 0;">
          <label for="my-birthday">生日：</label>
          <input type="date" name="birthday" />
        </div>
        <div style="margin: 10px 0;">
          <label for="my-age">年龄：</label>
          <!-- min表示最小18，max表示最大65，step表示每次递增5 -->
          <input type="number" name="age" min="18" max="65" step="5" />
        </div>
        <div style="margin: 10px 0;">
          <label for="my-color">调色板：</label>
          <input type="color" name="pick_color" />
        </div>
        <div style="margin: 10px 0;">
          <label for="">所在城市</label>
          <select name="city" id="">
            <option value="北京">北京</option>
            <!-- selected表示默认选项 -->
            <option value="河北省" selected>河北省</option>
            <option value="山东省">山东省</option>
            <option value="云南省">云南省</option>
            <option value="山西省">山西省</option>
            <option value="重庆市">重庆市</option>
          </select>
        </div>
        <div style="margin: 10px 0;">
          <!-- size="7"表示当前有7个选项;multiple表示多选,按住ctrl进行多选 -->
          <!-- 事件属性：用on开始跟一个事件名称，它的值是js表达式。事件改变时弹出option对应的值 -->
          <select name="edu" id="" onchange="alert(this.value)">
            <option value="">--学历--</option>
            <option value="小学">小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>
            <option value="大学">大学</option>
            <option value="研究生">研究生</option>
          </select>
        </div>
      </fieldset>
      <div style="margin: 10px 0;">
        <!-- 内联框架：frameborder边框 -->
        <iframe
          src="https://j.map.baidu.com/f2/wyj"
          frameborder="1"
          width="600"
          height="500"
        ></iframe>
      </div>
      <div style="margin: 10px 0;">
        <!-- iframe实现网站后台的原理 -->
        <ul>
          <li><a href="1.html" target="content">系统设置</a></li>
          <li><a href="" target="content">商品管理</a></li>
          <li><a href="" target="content">分类管理</a></li>
        </ul>
        <iframe
          srcdoc="<h3>网站后台</h3>"
          frameborder="1"
          name="content"
          width="600"
          height="500"
        ></iframe>
      </div>
      <button>提交</button>
    </form>