收藏
天蓬老师批改状态：合格
老师批语：是女生吗?很好看
<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:设置表格水平居中--><tablestyle="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><captionstyle="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><inputid="username"type="text"name="username"value=""placeholder="请输入手机正确手机号码"form="login"requiredautofocus/></div><div><label for="pwd">密码</label><inputid="pwd"type="password"name="password"value=""placeholder="不少于6位数字"form="login"/></div><!-- 布尔属性：它的值是true/false 只能是真和假，只要 出现这个属性就表示true,否者就是false --><div><!-- 邮箱文本框 --><!-- placeholder：输入框的提示信息 --><label for="my-email">邮箱</label><inputtype="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"><textareaname="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:指定统一脚本进行处理，通过参数来动态指定当前什么操作 --><buttonformaction="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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
