表格元素，结构，及常用属性
<tabel> <tr> <td>...</td> </tr></table>
<th></th>是<td></td>的puls,添加了加粗和居中的效果
<thead></thead>：表格头部
<tbody></tbody>：表格主体
<tfoot></tfoot>：表格底部
border：表格线
cellpadding：设置表格内边距
cellspacing：设置表格间隙
align：设置表格水平居中
bacolor：设置表格背景颜色
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=, initial-scale=1.0" /> <title>表格作业</title> <style> th { border-radius: 6px; height: 50px; color: seashell; border-right: 2px solid #fff; } td { text-align: center; border: inset; } </style> </head> <body> <!-- border：表格线 cellspacing:表格间隙 cellpadding:内边距 align:设置表格水平居中--> <table style="border-collapse: collapse;" cellspacing="0" cellpadding="10" width="80%" align="center" > <!-- 为每一列设置个性样式 --> <colgroup> <col bgcolor="#e4644a" /> <col bgcolor="#9e9e9e" /> <col bgcolor="#35c6f0" /> <col bgcolor="#8035fb" /> </colgroup> <caption style=" font-size: 22px; background: rgb(65, 129, 225); color: #fff; margin: 2px; border-radius: 6px; line-height: 50px; " > VIP会员权限 </caption> <!-- <thead>表头</thead> --> <thead> <tr> <!-- th是td的puls,添加了加粗和居中的效果 --> <th>尊享特权</th> <th>普通会员</th> <th>高级会员<sup style="color: red;">特惠</sup></th> <th>皇冠会员<sup style="color: red;">特惠</sup></th> </tr> </thead> <!-- <tbody>表格主体</tbody> --> <tbody> <tr> <td>价格</td> <td>免费</td> <td> <strong style="color: red;">￥5</strong> <sub><del>原价:15</del></sub> </td> <td> <strong style="color: red;">￥50</strong> <sub><del>原价:150</del></sub> </td> </tr> <tr> <td>广告</td> <!-- rowspan:单元格垂直合并 --> <td rowspan="2">无</td> <!-- colspan:单元格水平合并 --> <td colspan="2" bgcolor="#F06292">免广告</td> </tr> <tr> <td>腾讯视频会员</td> <td>1个月</td> <td>5个月</td> </tr> </tbody> <!-- <tfoot>表格底部</tfoot> --> <tfoot> <tr> <td>预计可省</td> <td>0</td> <td>￥10</td> <td>￥50</td> </tr> </tfoot> </table> </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> input { padding: 10px; border: 0; border-radius: 8px; } label { padding-right: 20px; border-right: 2px solid #e9e9e9; } div { padding: 20px 0; border-bottom: 2px solid #eee; line-height: 38px; } fieldset { box-shadow: 1px 1px 5px #ce93d8; border: 1px solid #ce93d8; background: #e1bee7; border-radius: 8px; } legend { font-size: 22px; } td { text-align: center; } textarea { display: block; border: 1px solid #fff; width: 99%; } button { width: 70%; margin: 5px 15%; padding: 8px; background: #64b5f6; border: none; border-radius: 6px; color: #fff; font-size: 18px; } </style> </head> <body> <!-- 表单元素 --> <form id="login"></form> <!-- 内部的元素：表单控件元素/标签 --> <!-- 单行文本框 --> <!-- type指定内型 --> <!-- 变量是保存数据的一个容器，是实现数据复用的一个重要手段，变量是由名称和值两部分组成 --> <!-- placeholder:当前文本框的提示信息 --> <fieldset> <!-- 表单分组 --> <!-- 分组标签 --> <legend>基本信息</legend> <div> <label for="username">用户名</label> <input id="username" type="text" name="username" value="" placeholder="请输入手机正确手机号码" form="login" required autofocus /> </div> <div> <label for="pwd">密码</label> <input id="pwd" type="password" name="password" value="" placeholder="不少于6位数字" form="login" /> </div> <!-- 布尔属性：它的值是true/false 只能是真和假，只要 出现这个属性就表示true,否者就是false --> <div> <!-- 邮箱文本框 --> <!-- placeholder：输入框的提示信息 --> <label for="my-email">邮箱</label> <input type="email" name="email" id="my-email" placeholder="admin@email.com" form="login" required /> </div> <div> <!-- 单选按钮 --> <label for="female">性别</label> <!-- 单选按钮的每一个选项控件的name属性的值必须完全一样 --> <input type="radio" name="gender" id="male" /> <label for="male">男</label> <input type="radio" name="gender" id="female" checked /> <label for="female">女</label> <input type="radio" name="gender" id="secret" /> <label for="secret">保密</label> </div> </fieldset> <fieldset> <legend> 选填项 </legend> <table width="100%" align="center" cellspacing="0" border-radius="1"> <thead> <tr> <th>头像</th> <th>学历</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td> <!-- 文件域 --> <!-- <label for="user-img">头像</label> --> <input type="file" name="user_img" id="user-img" /> <!-- 隐藏域 --> <!-- 限制文件上传大小，这个结果是给服务器做参考,这个数据不需要也不允许用户提供 --> <!-- 1k = 1024byte, 1m = 1024k, 1G =1024M, 1T = 1024G --> <!-- 限制上传文件的大小,最大值5M --> <input type="hidden" name="MAX_FILE_SIZE" value="5242880" /> </td> <td> <!-- <label for="">学历</label> --> <!-- 事件属性:用on开始跟一个事件名称，它的值是JS的表达式 --> <label for="edu">学历</label> <select name="edu" onchange="alert(this.value)"> <option value="1">博士后</option> <option value="2">研究生</option> <option value="3">本科</option> <option value="4">专科</option> <option value="5">高中</option> <option value="6">初中</option> </select> </td> <td> <!-- 复选框 --> <!-- 当一组数据具有共同特征时候用数组放到一起，因为它们属于同一类型,因为复选框会返回多个值，所以name属性应该使用数组的方式 --> <input type="checkbox" name="hobby[]" id="basketball" checked /> <label for="basketball">篮球</label> <input type="checkbox" name="hobby[]" id="diving" /> <label for="diving">游泳</label> <input type="checkbox" name="hobby[]" id="game" checked /> <label for="game">游戏</label> </td> </tr> </tbody> <tfoot> <tr> <td colspan="3"> <textarea name="message" id="" rows="5" placeholder="备注" ></textarea> </td> </tr> </tfoot> </table> <div> <!-- 预定义复合框/下拉列表 --> <label for="my-zy">专业</label> <!-- 将一个单行文本框与一个下拉列表进行绑定 --> <input type="text" name="my-zy" list="zy" /> <!-- datalist：预置列表，用于展示预置的输入内容 --> <!-- <datalist>与<input list="">进行绑定 --> <datalist id="zy"> <option value="搬砖">搬砖</option> <option value="挖掘机">挖掘机</option> <option value="爬虫">爬虫</option> </datalist> </div> <div> <!-- 日期/时间输入库 --> <label for="">日期</label> <input type="date" name="brithday" id="" /> </div> </fieldset> <!-- GET:用户提交的数据会以键值对的方式出现在URL地址栏中 ：用于登录不安全--> <!-- POST:数据不会以明文的方式出现在URL地址栏中 --> <!-- GET和POST可以同时出现 --> <!-- formaction:指定统一脚本进行处理，通过参数来动态指定当前什么操作 --> <button formaction="hanle.php?action=login" formmethod="POST" form="login" formtarget="_blank" > 提交 </button> <button type="reset" form="login">重置</button> <!-- <button formaction="hanle.php?action=register" formmethod="GET" form="login">注册</button> --> </body></html>
