1.用表格实现购物车清单
知识点：表格的常用元素
| 序号 |
元素 |
定义 |
| 1 |
<table></table> |
表格主体 |
| 2 |
<caption></caption> |
表格标题 |
| 3 |
<colgroup></colgroup> |
对表格中的列进行格式化 |
| 4 |
<thead></thead> |
表格头部 |
| 5 |
<th></th> |
表头单元格 |
| 6 |
<tbody></tbody> |
表格主体，一个表格中可以有多个主体 |
| 7 |
<tfoot></tfoot> |
表格尾部 |
| 8 |
<tr></tr> |
表格中的行 |
| 9 |
<td></td> |
表格中的单元格 |
表格实现购物车清单代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实战-购物车</title> <style> table{ border-collapse:collapse; 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{ font-size:1.5rem; margin-bottom:10px; color:seagreen; } table th{ font-weight:lighter; color:seagreen; } table thead{ background-color:lightcyan; } /* 表格隔行变色 */ table tbody tr:nth-of-type(even){ background-color:#efef; } /* 鼠标悬停动效 */ table tbody tr:hover{ background-color:lightcyan; } table tfoot td{ border-bottom:none; color:coral; font-size:1.2rem; font-weight:bolder; } body div{ width:70%; margin:10px auto; } body div:first-of-type button{ float:right; border:none; width:150px; height:38px; background-color:aquamarine; color:white; /* 设置鼠标样式 */ cursor:pointer; } body div:first-of-type button:hover{ background-color:coral; font-size:1.1rem; } </style></head><body> <table> <caption>购物车</caption> <thead> <tr> <th>序号</th> <th>产品名称</th> <th>产品SKU</th> <th>单价/元</th> <th>规格</th> <th>数量</th> <th>金额/元</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>中性笔</td> <td>Z-0001</td> <td>2</td> <td>支</td> <td>10</td> <td>20</td> </tr> <tr> <td>2</td> <td>圆珠笔</td> <td>Y-0001</td> <td>1</td> <td>支</td> <td>10</td> <td>10</td> </tr> <tr> <td>3</td> <td>铅笔</td> <td>Q-0001</td> <td>0.5</td> <td>支</td> <td>30</td> <td>15</td> </tr> <tr> <td>4</td> <td>画笔</td> <td>H-0001</td> <td>5</td> <td>支</td> <td>60</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">总计:</td> <td>110</td> <td>345</td> </tr> </tfoot> </table> <div> <button>结算</button> </div></body></html>
实现图：
2.表单实现注册页面
知识点：表单的基本元素
| 序号 |
元素 |
定义 |
| 1 |
<form></form> |
表单主体内容 |
| 2 |
<fieldset></fieldset> |
子集段，将表单分成内容段落 |
| 3 |
<legend></legend> |
字集段标题 |
| 4 |
<label for="id"></label> |
为input做标记 |
| 5 |
<input /> |
用于收集用户信息 |
| 6 |
<datalist></datalist> |
下拉搜索索引 |
表单实现注册页面代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基本表单元素</title> <style> /* 给整体文字修改颜色 */ body{ color:#555; } /* 给h3文字居中 */ h3{ text-align:center; } /* 表单主体样式 */ form{ width:450px; margin:30px auto; border-top:1px solid #aaa; } /* 表单fieldset的样式 */ form fieldset{ border:1px solid seagreen; background-color:lightcyan; box-shadow:2px 4px #bbb; border-radius:10px; margin:20px; } /* 设置fieldset元素下的所有legend元素的样式 */ form fieldset legend{ background-color:rgb(178,231,201); border-radius:10px; color:seagreen; padding:5px 15px; } /* 设置form元素下的所有div的样式 */ form div{ margin:5px; } /* 设置提交按钮的样式 */ form .btn{ width:80px; height:30px; border:none; background-color:seagreen; color:#ddd; float:right; } form .btn:hover{ background-color:coral; color:white; cursor:pointer; } /* 设置输入框获得焦点的时候的样式 */ input:focus{ background-color:rgb(226,226,175); } </style></head><body> <h3>用户注册</h3> <form action="" method="POST"> <fieldset> <legend>基本信息（必填）</legend> <div> <!-- label的for属性要和input的id属性绑定 --> <!-- 一个表单只能有一个自动获取焦点 --> <label for = "my-username">用户名:</label> <input type = "text" id = "my-username" name = "username" placeholder = "6-15位字符" autofocus required /> </div> <div> <label for = "email-id">邮箱:</label> <input type = "email" id="email-id" name="email" placeholder = "z@haoai.cc" required /> </div> <div> <label for = "pwd-1">密码:</label> <input type = "password" id = "pwd-1" name = "password1" placeholder = "不少于6位的字母+数字" /> </div> <div> <label for = "pwd-2">确认:</label> <input type = "password" id="pwd-2" name = "password2" /> </div> </fieldset> <fieldset> <legend>扩展信息(选填)</legend> <!-- 单选按钮 --> <div> <!-- 可以把label的for属性去掉，把input写到label中 --> <!-- <label>生日: <input type="date" name="birthday" /> </label> --> <label for = "birthday">生日:</label> <input type="date" name="birthday" id="birthday" /> </div> <div> <label for="secret">性别:</label> <input type="radio" name="gender" value="male" id="male" /><label for="male">男性</label> <input type="radio" name="gender" value="female" id="female" /> <label for="female">女性</label> <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label> </div> <!-- 复选框 --> <!-- 因为复选框返回的是一个或多个值，后端用数组来处理最方便，所以将name名设置为数组形式 --> <div> <label for="programme">爱好</label> <input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" id="programme" value="programme" checked /><label for="programme">编程</label> </div> <div> <!-- 选项列表 --> <!-- input中的list属性值要和datalist的id属性值一致 --> <label for="brand">手机:</label> <input type="search" list="phone" name="brand" id="brand" /> <datalist id="phone"> <option value="apple"> </option> <option value="huawei" label="华为"></option> <option value="mi" label="小米"> </option> </datalist> </div> </fieldset> <fieldset> <legend>其他信息（选填）</legend> <!-- 文件上传 --> <div> <lable for="uploads">上传头像:</lable> <input type="file" name="user_pic" id="uploads" accept="imag/jpeg, imag.png, imag.gif" /> </div> <!-- 文本域 --> <div> <label for="resume">简历:</label> <textarea name="resume" id="resume" cols="30" rows="5" placeholder="不超过100字"></textarea> </div> <!-- 隐藏域，用于记录用户注册、登录时间等信息，不用展示在浏览器显示页面中 --> <input type="hidden" name="user_id" value="123" /> </fieldset> <button class="btn">提交</button> </form></body></html>
实现图：
总结:表格和表单都是处理数据的工具
