购物车实战(表格实现)/用户注册页面（表单实现）

表格包含的内容

标签	作用
table	表格放在table标签内
caption	标题
tbody	主题
tr	行
td	列
th	列，但相对于td多了加粗居中常用于头部的标题第一行
thead	表头
tfoot	表格底部
colgroup	设置列的样式，现在用css代替

购物车实战

html部分

<body>
  <table>
    <!-- 标题 -->
    <caption>
      购物车
    </caption>
    <thead>
      <tr>
        <th>ID</th>
        <th>品名</th>
        <th>单价/元</th>
        <th>单位</th>
        <th>数量</th>
        <th>金额</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>SN-1010</td>
        <td>MacBook Pro电脑</td>
        <td>18999</td>
        <td>台</td>
        <td>1</td>
        <td>18999</td>
      </tr>
      <tr>
        <td>SN-1020</td>
        <td>iPhone手机</td>
        <td>4999</td>
        <td>部</td>
        <td>2</td>
        <td>9998</td>
      </tr>
      <tr>
        <td>SN-1030</td>
        <td>智能AI音箱</td>
        <td>399</td>
        <td>只</td>
        <td>5</td>
        <td>1995</td>
      </tr>
      <tr>
        <td>SN-1040</td>
        <td>SSD移动硬盘</td>
        <td>888</td>
        <td>个</td>
        <td>2</td>
        <td>1776</td>
      </tr>
      <tr>
        <td>SN-1050</td>
        <td>黄山毛峰</td>
        <td>999</td>
        <td>斤</td>
        <td>3</td>
        <td>2997</td>
      </tr>
    </tbody>
    <!-- 底部 -->
    <tfoot>
      <tr>
        <!-- 合并单元格用colspan。
        td colspan="4"四列单元格合并 -->
        <td colspan="4">总计：</td>
        <td>13</td>
        <td>35765</td>
      </tr>
    </tfoot>
  </table>
  <!-- 结算按钮 -->
  <div>
    <button>结算</button>
  </div>
</body>

css样式

<style>
  html {
    font-size: 16px;
  }
  table {
    /* 将单元格之间的间隙去掉 */
    border-collapse: collapse;
    /* 占据父元素70%的空间 看到百分比要想到有个对应父级*/
    width: 70%;
    /* 左右居中 */
    margin: auto;
    color: #666;
    /* 设置字体粗细 */
    font-weight: lighter;
    /* 文本居中 */
    text-align: center;
  }
  /* 表格线直接添加到单元格上 */
  table thead th,
  table td {
    border-bottom: 1px solid #ccc;
    /* 添加内边距 */
    padding: 10px;
  }
  /* 标题样式 */
  table caption {
    /* rem就是相对于html设置字体大小 */
    font-size: 1.5rem;
    /* 下边距 */
    margin-bottom: 15px;
    color: seagreen;
  }
  table th {
    font-weight: lighter;
    color: seagreen;
  }
  table thead {
    background-color: lightcyan;
  }
  /* 隔行变色 */
  /* table tbody tr:nth-of-type(even){
    background-color: #efef;
  } */
  tbody > tr:nth-child(even) {
    background-color: rgb(0, 225, 255);
  }
  /* 鼠标悬停 */
  table tbody tr:hover {
    background-color: peru;
  }
  /* 底部样式 */
  table tfoot td {
    /* 去掉下边框 */
    border-bottom: none;
    color: slateblue;
    font-size: 1.2rem;
    /* 字体加粗 */
    font-weight: bolder;
  }
  /* 结算按钮样式 */
  body div:last-of-type {
    width: 70%;
    margin: 10px auto;
  }
  body div:first-of-type button {
    /* 靠右 */
    float: right;
    width: 120px;
    height: 32px;
    background-color: seagreen;
    color: white;
    /* 去掉按钮边框 */
    border: none;
    /* 设置鼠标指针样式 */
    cursor: pointer;
  }
  /* 定义鼠标移上去得样式:hover */
  body div:first-of-type button:hover {
    background-color: coral;
    font-size: 1.1rem;
  }
</style>

注意：选中表格中得标签/元素时强烈建议写全，table > tbody > tr

用户注册页面

表单常用标签

标签	属性	作用
<form action="" method="">		表单
form	action=””	提交给谁
form	method=”GET”	表单提交方式get默认方式
<fieldset></fieldset>		fieldset标签内容的周围将绘制边框，理解为一个控件组
<legend></legend>		legend标签来为fieldset元素设置标题
<label for=""></label>	for=””必须和 input id属性一致	绑定input标签使用
<input/>	name=””	元素的名称
<input/>	id=””
<input/>	placeholder=””	入提示的文本
<input/>	autofocus	自动获取焦点它没有属性值
<input/>	required	不输入内容不让提交,一个表单在同一时刻只允许有一个元素获取焦点
<input/>	list=””	代表列表，而且要和datalist的id=””属性一样
<datalist></datalist>	id=””	定义选项列表。他的id属性一定要和input的list属性来绑定
<option></option>		定义下拉列表中的一个选项/条目。option标签通常是作为select标签或datalist标签的子标签，充当下拉列表中的一个选项
textarea		定义文本域，没有value属性
textarea	cols属性	设置textarea元素输入区域的可见宽度
textarea	rows属性	设置textarea元素输入区域的可见高度

input标签type属性	作用
type=”text”	单行文本输入框
type=”password”	密码输入框
type=”radio”	单选按钮，name属性必须相同
type=”checkbox”	复选框，建议将写成name=”hobby[]”数组形式
type=”button”：	普通按钮
type=”submit”	提交按钮
type=”file”：	文件域，出现一个选择文件的按钮
type=”hidden”：	隐藏域
type=”email”	输入”email”地址
type=”month”	年月控件
type=”date”	日期控件

实战部分

先写一个表单

<body>
  <h3>用户注册</h3>
  <!-- form+input -->
  <!-- action="" 提交给谁-->
  <!-- method="GET" 表单提交方式get默认方式-->
  <form action="" method="POST">
    <!-- 控件组 -->
    <fieldset>
      <!-- legend 组名 -->
      <legend>基本信息(必填)</legend>
      <div>
        <!-- label for="my-username"必须和 input id属性一致
          input id="my-username" -->
        <!-- 添加lable标签才能实现鼠标点击账号的时候
          焦点落在input输入框中 -->
        <label for="my-username">账号:</label>
        <!-- input中的name属性就是变量名称
          placeholder="写入提示的文本"
          autofocus --自动获取焦点 它没有属性值
          一个表单在同一时刻只允许有一个元素获取焦点
          required -- 不输入内容不让提交  
      -->
        <!-- 
          1.label for=""必须和 input id=""属性一致
          2.用lable标签(for属性可以shandiao)包含input标签：
          <label for=""><input type="text"></label>
          <label><input type="text"></label>
       -->
        <input
          type="text"
          id="my-username"
          name="username"
          placeholder="6-15位字符"
          autofocus
          required
        />
      </div>
      <div>
        <label for="email-id">邮箱</label>
        <input
          type="email"
          name="email"
          id="email-id"
          placeholder="*****@qq.com"
          required
        />
      </div>
      <!-- 密码 -->
      <div>
        <label for="email-id">密码</label>
        <input
          type="password"
          name="password1"
          id="pwd-1"
          placeholder="******"
        />
      </div>
      <div>
        <label for="email-id">确认</label>
        <input type="password" name="password2" id="pwd-2" />
      </div>
    </fieldset>
    <fieldset>
      <legend>扩展信息(选填)</legend>
      <div>
        <label
          >生日:
          <input type="date" name="birthdy" />
        </label>
      </div>
      <div>
        <!-- 单选按钮
      input的name属性必须相同 -->
        <label for="secret">性别:</label>
        <label>男<input type="radio" name="gender" value="male" /></label>
        <label>女<input type="radio" name="gender" value="female" /></label>
        <label
          ><input
            type="radio"
            name="gender"
            value="secret"
            id="secret"
            checked
          />保密</label
        >
      </div>
      <div>
        <!-- 复选框 -->
        <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理，
           所以将name名称设置为数组形式便于后端脚本处理 -->
        <label for="programme">爱好:</label>
        <label
          >打游戏<input type="checkbox" name="hobby[]" value="game"
        /></label>
        <label
          >看电影<input type="checkbox" name="hobby[]" value="shoot"
        /></label>
        <label
          >PHP<input
            type="checkbox"
            id="programme"
            name="hobby[]"
            value="programme"
            checked
        /></label>
      </div>
      <div>
        <!-- 选项列表 -->
        <label for="brand">手机:</label>
        <!-- list属性代表列表 -->
        <input type="search" list="phone" id="brand" name="brand" />
        <!-- datalist一定要有一个id属性并且一定要和input的list属性来绑定 -->
        <datalist id="phone">
          <option value="aplle"></option>
          <option value="hwei" label="华为"></option>
          <option value="mi" label="小米"></option>
        </datalist>
      </div>
    </fieldset>
    <fieldset>
      <legend>其它信息(选填)</legend>
      <!--文件上传:<input type="file"-->
      <div>
        <label for="uploads">上传头像:</label>
        <input
          type="file"
          name="user_pic"
          id="uploads"
          accept="image/png, image/jpeg, image/gif"
        />
      </div>
      <!--文本域 用extarea-->
      <div>
        <label for="resume">简历:</label>
        <!--注意文本域没有value属性-->
        <textarea
          name="resume"
          id="resume"
          cols="30"
          rows="5"
          placeholder="不超过100字"
        ></textarea>
      </div>
    </fieldset>
    <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
    <input type="hidden" name="user_id" value="123" />
    <p>
      <input type="submit" value="提交" class="btn" />
      <button class="btn">提交</button>
    </p>
  </form>
</body>

css样式

<style>
    /* body中的字体颜色设置灰色 */
    bady {
      color: #000;
    }
    /* 标题居中 */
    h3 {
      text-align: center;
    }
    /* 设置from表单宽度高度并添加上边框 */
    form {
      width: 450px;
      margin: 30px auto;
      border-top: 1px solid #aaa;
    }
    /* 设置form fieldset 背景色，边框，阴影，边框圆角，
    设置四周外边距*/
    form fieldset {
      background-color: lightcyan;
      border: 1px solid seagreen;
      box-shadow: 2px 2px 4px #bbb;
      border-radius: 15px;
      margin: 20px;
    }
    /* 设置legend 背景色，边框，圆角，本文颜色，内边距 */
    form fieldset legend {
      background-color: lightskyblue;
      border: 1px solid seagreen;
      border-radius: 15px;
      color: chocolate;
      padding: 5px 15px;
    }
    /* 设置div的外边距 所有的文本框都在div中 */
    form div {
      margin: 5px;
    }
    form p {
      text-align: center;
    }
    /* 给底部按钮设置样式 */
    form .btn {
      width: 80px;
      height: 30px;
      border: none;
      background-color: seagreen;
      color: #ddd;
    }
    /* 设置底部按钮鼠标移动上去的样式 */
    form .btn:hover {
      background-color: coral;
      color: lime;
      cursor: pointer;
      font-size: 1.1rem;
      border-radius: 15px;
    }
    /* 设置获取焦点时的样式 */
    form input:focus {
      background-color: coral;
    }
  </style>

总结
知道表格和表单的基本标签，但是要熟练应用还是有很大难度，还是要加强练习。
对于div用作表格还是没理解
感谢各位老师的付出

表格包含的内容

购物车实战

用户注册页面

实战部分

相关文章