今天我们讲解两个知识点。用表格制做购物车列表和表单实现用户注册页。我们仍然用代码和效果图来进行展示。
表格实现购物车列表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>购物车-表格</title><style>caption {margin-bottom: 20px;color: darkred;font-size: 20px;font-weight: bold;}table {width: 70%;margin: 0 auto;border-collapse: collapse;}table td,table th {border: 1px solid rgb(241, 237, 237);padding: 10px;text-align: center;}thead tr {background-color: coral;}tbody tr:nth-child(even) {background-color: darkcyan;color: white;}tbody tr:hover {background-color: yellow;}tbody tr:nth-child(even):hover {color: black;}div {width: 70%;margin: 20px auto 0;}div button {width: 150px;height: 40px;border: none;background-color: cadetblue;float: right;color: white;}div button:hover {background-color: violet;}</style></head><body><table><caption>购物车</caption><colgroup></colgroup><thead><tr><th>编号</th><th>名称</th><th>单价</th><th>数量</th><th>金额</th></tr></thead><tbody><tr><td>001</td><td>苹果</td><td>2.0</td><td>5</td><td>10</td></tr><tr><td>002</td><td>西瓜</td><td>3.0</td><td>10</td><td>30</td></tr><tr><td>003</td><td>橘子</td><td>5.0</td><td>4</td><td>20</td></tr><tr><td>004</td><td>芒果</td><td>3.0</td><td>5</td><td>15</td></tr><tr><td>005</td><td>葡萄</td><td>4.0</td><td>10</td><td>40</td></tr><tr><td>006</td><td>荔枝</td><td>10.0</td><td>10</td><td>40</td></tr><tr><td>007</td><td>草莓</td><td>4.0</td><td>10</td><td>40</td></tr></tbody><tfoot><tr><td colspan="3">总计</td><td>16</td><td>120元</td></tr></tfoot></table><div><button>立即结算</button></div></body></html>
用户注册表单
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title><style>fieldset {border: rgb(216, 159, 2) 1px solid;padding: 15px 15px;width: 50%;margin: 0 auto;margin-bottom: 30px;}legend {padding: 5px;background-color: tomato;color: white;}fieldset div {margin-bottom: 10px;}textarea {width: 300px;}.btn {width: 50%;margin: 20px auto;text-align: center;}button {width: 150px;height: 35px;line-height: 35px;color: white;background-color: tomato;border: none;cursor: pointer;}button:hover {background-color: teal;}</style></head><body><form method="POST" action=""><div><fieldset><legend>基本信息</legend><div><label for="username">帐号:</label><input name="username" id="username" type="text" placeholder="6-12位字符" required autofocus></div><div><label for="email">邮箱:</label><input name="email" id="email" type="email" placeholder="demo@demo.com" required></div><div><label for="pwd1">密码:</label><input name="pwd1" id="pwd1" type="password" placeholder="不少于6位且必须子母加数字" required></div><div><label for="pwd2">确认密码:</label><input name="pwd2" id="pwd2" type="password" required></div></fieldset><fieldset><legend>扩展信息</legend><div><label>生日:<input name="birthda" type="date" required></label><!--label中不写for，可以将表单元素放在label中，也可实现点击Label文字，表单获取焦点--></div><div><label for="secret">性别:</label><input type="checkbox" name="gender" id="male" value="male"><label for="male">男</label><input type="radio" name="gender" id="female" value="female"><label for="female">女</label><input type="radio" name="gender" id="secret" value="secret"><label for="secret">保密</label></div><div><label for="game">爱好:</label><input type="checkbox" name="hobby[]" id="sleep" value="sleep"><label for="sleep">睡觉</label><input type="checkbox" name="hobby[]" id="book" value="book"><label for="book">看书</label><input type="checkbox" name="hobby[]" id="game" value="game" checked><label for="game">游戏</label></div><!--选项列表--><div><label for="brand">手机品牌:</label><input type="search" list="phone" id="brand" name="brand"><!--上面的id和name不可与list的值一致--><datalist id="phone"><!--id要和上面的List绑定，是一致的--><option value="mi" label="小米"></option><option value="apple" label="苹果"></option><option value="huawei" label="华为"></option></datalist></div></fieldset><fieldset><legend>其它信息</legend><div><label for="pic">上传头像:</label><input type="file" name="pic" id="pic"accept="image/jpg,image/png,image/gif"></div><div><label for="resume">简历:</label><textarea name="resume" rows="5" placeholder="不超过100字"id="resume"></textarea></div></fieldset><!--隐藏域--><input type="hidden" name="userid" id="userid" value="111"><div class="btn"> <button>提交</button></div></form></body></html>
此表单将常用的表单元素都应用上了，是一个很好的测试项目。
总结
HTML5的知识点很多，但是都不复杂，多学习，勤加练习就可掌握。只看不练，等于白搭。