今天第一天上课,感觉还不错,有点多,上完了就基本上不记得了好赖凭着我聪明的大脑,过人的智慧完成了这次作业。
学习使我快乐 实际效果
写笔记 表格
<table> </table> 表格定义标签 <thead> </thead> 表头 <tbody> </tbody> 表格主体 <tfoot> </tfoot> 表底 <tr> </tr> 表行 <td> </td> 表格 rowspan="3" 合并表格 <td colspan="3">
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> .blackund:red; </style> </head> <body> <h1 align="center">表格学习</h1> <table border="1" cellspacing="0" align="center"> <thead> <tr> <th width="50">序号</th> <th width="80">名词</th> <th width="50">数量</th> <th width="50">金额</th> <th width="50">总计</th> <th width="50" rowspan="3">合并</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>邓紫棋</td> <td>3</td> <td>100</td> <td>300</td> </tr> <tr> <td>2</td> <td>范冰冰</td> <td>4</td> <td>500</td> <td>2000</td> </tr> <tr> <td>3</td> <td>杨幂</td> <td>4</td> <td>100</td> <td>400</td> </tr> <tr> <td>4</td> <td>李冰冰</td> <td >3</td> <td>100</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计:14</td> <td colspan="2">总额:1000元</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单 我觉得这是今天最难搞的一个了,看完以后我已经忘了讲的什么东西了,好赖凭着我聪明的大脑,过人的智慧完成了这次作业。
表单写笔记
<form> action 发送数据到文件 method 提交方式 </form> autofocus 自动光标 丨 placeholder 提示文字丨 required 必选丨 min 最小 丨 max 最大 input中使用 <select size="1" > </select> 下拉框 size 默认选择 <optgroup label="学习:"> </optgroup> 分组 <option value="1" selected>学习</option> selected默认选择 <input type="checkbox" name="meizhi" value="meizhi">小姐姐 checkbox复合选框 <input type="radio" name="nvren" value="nvren" id="nvren" checked><label for="nvren">保密</label> checked默认选择
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <h1 align="center" style="color: deeppink">注册页面</h1> <!--input 输入控件标签,type type:单行文本框 pasword:密码 email:邮箱 age:年龄 date:日期标签 required必须填写 placeholder文字提示 autofocus光标移入 min最小输入 max 最大--> <div id="main"> <form action="index.html" method="post" align="center" style="color:deeppink;" id="form"> <p> <label name="username" id="username" >账号:</label> <input type="text" id="username" name="username" placeholder="账号" required autofocus> </p> <p> <label name="password" id="password" >密码:</label> <input type="password" id="password" name="password" required; autofocus placeholder="密码"> </p> <p> <label name="email" id="email" >邮箱:</label> <input type="password" id="email" name="email" placeholder="邮箱"> </p> <p> <label name="age" id="age" >年龄:</label> <input type="number" id="age" name="age" placeholder="年龄" min="18" required> </p> <p> <label name="shengri" id="shengri" >生日:</label> <input type="date" id="shengri" name="shengri" autofocus placeholder="生日" > </p> <p> <label name="xuexi" id="xuexi" >学习:</label> <select id="xuexi"> <option value="1">php</option> <option value="2">jsp</option> <option value="3" selected>asp</option> </select> </p> <p> <label for="meizhi">爱好:</label> <input type="checkbox" name="meizhi" value="meizhi" id="meizhi"><label for="meizhi">小姐姐</label> <input type="checkbox" name="dafeiji" value="dafeiji" id="dafeiji"><label for="dafeiji">打飞机</label> <input type="checkbox" name="kanpian" value="kanpian" id="kanpian"><label for="kanpian">看片</label> </p> <p> <label for="nanren">性别: </label> <input type="radio" name="nanren" value="nanren" id="nanren"><label for="nanren">男生</label> <input type="radio" name="nvren" value="nvren" id="nvren"><label for="nvren">女生</label> <input type="radio" name="nvren" value="nvren" id="nvren" checked><label for="nvren">保密</label> </p> <p> <button type="submit" value="提交">提交</button> <button type="reset" value="重置" >重置</button> </p> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
后台 凭着我聪明的大脑,过人的智慧完成了这次作业。
后台写笔记
target 定义name属性标签
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理</title> </head> <body> <h3>后台管理</h3> <hr> <ul style="float: left;"> <li><a href="biaoge.html" target="xuexi">表单</a> </li> <li><a href="reg.html"target="xuexi">注册会员</a> </li> <li><a href="index.html"target="xuexi">会员登录</a> </li> </ul> <iframe srcdoc="后台管理" frameborder="" width="300" height="500" style="float:left" name="xuexi"></iframe> <br> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例