HTML5 入门：表格元素、表单元素

表格元素简介

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格元素的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格1</title>
  </head>
  <body>
    <!-- 表格：数据格式化展示的工具 -->
    <!-- width设置表格宽度,border添加表格框设置表格框粗细值,align设置表格水平居中，cellspacing设置单元格边框间隙，cellpadding设置单元格内边距 -->
    <table
      border="1"
      cellspacing="0"
      cellpadding="0"
      width="500"
      align="center"
    >
      <!-- colgroup:用来定义表中的一组列表 -->
      <colgroup>
     <!-- col:占位符，即使没有样式也不能省略,可以为整列单元格添加样式,建议为class -->
        <col bgcolor="gray" />
        <col bgcolor="springgreen" />
        <col bgcolor="#00ffff" />
        <col bgcolor="#ff33ff" />
        <col bgcolor="#008765" />
        <col bgcolor="yellow" />
      </colgroup>
      <!-- caption元素定义表格标题 -->
      <caption>
        商品购销清单
      </caption>
      <!-- thead:表头部 -->
      <thead>
        <tr bgcolor="white">
          <!-- th:td的进阶plus，提供居中和字体加粗样式 -->
          <th>序号</th>
          <th>品名</th>
          <th>数量</th>
          <th>单价</th>
          <th>折扣</th>
          <th>总价</th>
        </tr>
      </thead>
      <!-- tbody:表主体，有时浏览器会默认加上 -->
      <tbody>
        <tr>
          <td>1</td>
          <td>键盘</td>
          <td>100</td>
          <td>400</td>
          <td>0.8</td>
          <td>32000</td>
        </tr>
        <tr>
          <td>2</td>
          <td>手机</td>
          <!-- 单元格垂直合并rowspan，数量代表合并单元格数量 -->
          <td rowspan="2">30</td>
          <td>1000</td>
          <td>0.7</td>
          <td>21000</td>
        </tr>
        <tr>
          <td>3</td>
          <td>电脑</td>
          <td>6000</td>
          <td>0.8</td>
          <td>144000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- 单元格水平合并colspan，数量代表合并单元格数量 -->
          <td colspan="0">合计:</td>
          <td colspan="4" bgcolor="gray"></td>
          <td>197000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

效果图：

表格元素

表单元素简介

HTML 表单是用户和 web 站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到 web 站点。表单元素是允许用户在表单中输入内容,比如：文本框（input）、文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。其中文本框的 type 属性也呈现语义化的功能

表单元素的使用

<body>
  <div style="margin: 100px auto 0 auto;">
    <h3>用户注册</h3>
    <!-- action:表单提交数据到服务器的地址如：login.php -->
    <!-- GET、POST：提交数据的方式，GET为明文数据以键值对的形式出现在URL里 -->
    <form action="login.php" method="post">
      <!-- fieldset:用于对表单中的控制元素进行分组 -->
      <fieldset>
        <!-- legend:用于表示fieldset的内容标题是内置的子元素 -->
        <legend>必填项</legend>
        <div>
          <!-- 文本框 -->
          <label for="userName">用户名:</label>
          <input
            type="text"
            id="userName"
            value=""
            placeholder="不少于4个字符"
            required
            autofocus
          />
        </div>
        <div>
          <!-- 密码框 -->
          <label for="pwd">密码:</label>
          <input
            type="password"
            name="password"
            id="pwd"
            widthmin="8"
            placeholder="密码应不少于8位"
            required
          />
        </div>
        <!-- required 为布尔值属性，规定此框为必填项 -->
        <div>
          <!--radio:单选按钮  每个按钮控件的name属性必须一样-->
          <label for="secret">性别：</label>
          <input type="radio" name="gender" id="male" /><label for="male"
            >男</label
          >
          <input type="radio" name="gender" id="female" /><label for="female"
            >女</label
          >
          <input type="radio" name="gender" id="secret" checked /><label
            for="secret"
            >保密</label
          >
        </div>
        <div>
          <!-- checkbox:复选按钮，基本属性和单选相似 -->
          <lable for="">爱好:</lable>
          <input type="checkbox" name="hobby[]" id="code" /><label for="code"
            >编程</label
          >
          <input type="checkbox" name="hobby[]" id="sport" /><label for="sport"
            >运动</label
          >
          <input type="checkbox" name="hobby[]" id="movie" /><label for="movie"
            >电影</label
          >
        </div>
        <div>
          <!-- file:文件域用于上传文件 -->
          <label for="user_img">头像</label>
          <input
            type="file"
            name="user_img"
            id="user_img
            "
          />
          <!-- hidden:隐藏域 -->
          <!-- 限制文件大小，给服务器做参考,这个数据不需要也不允许用户提供 -->
          <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
          <!-- 用户id一般通过隐藏域发送 -->
          <input type="hidden" name="user_id" value="1024" />
        </div>
        <div>
          <!-- datalist:预定义复合框/下拉列表 -->
          <label for="my_course">课程：</label
          ><input type="text" name="" id="my_course" list="course" />
          <!-- 将文本框与下拉列表进行绑定,通过文本框属性list与下拉列表id进行绑定 -->
          <datalist id="course">
            <option value="html5">html5</option>
            <option value="css3">css3</option>
            <option value="javascript">javascript</option>
            <option value="vue.js">vue.js</option>
            <option value="php">php</option>
            <option value="laravel">laravel</option>
          </datalist>
        </div>
        <!-- 邮箱文本框 -->
        <div>
          <label for="email">邮箱：</label
          ><input type="email" name="my_email" id="email" />
        </div>
        <!-- 日期时间输入框 -->
        <div>
          <label for="birthday">生日：</label
          ><input type="date" name="my_birthday" id="birthday" />
        </div>
        <!-- 数值控制输入框 -->
        <div>
          <label for="age">年龄:</label
          ><input type="number" name="my_age" min="18" id="age" />
        </div>
        <!-- 调色板输入框 -->
        <div>
          <label
            for="
            color"
            >颜色：</label
          ><input type="color" name="my_color" id="color" />
        </div>
      </fieldset>
      <fieldset>
        <legend>选填项</legend>
        <div>
          <label style="display: block;" for="self">自我介绍：</label
          ><textarea name="self" id="self" cols="40" rows="10"></textarea>
        </div>
      </fieldset>
      <button type="submit">提交</button>
    </form>
  </div>
 </body>