批改状态:未批改
老师批语:
完成表格的跨行合并功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1" cellspacing="0" width="600"> <!--caption:表头--> <caption><b>购物车</b></caption> <thead> <tr bgcolor="#87ceeb"> <th height="30">编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>分类</th> </tr> </thead> <tbody align="center"> <tr> <td width="50" height="28">1</td> <td width="200">有备无患的奔驰专用机油</td> <td width="70">800</td> <td width="50">1</td> <td width="80">800</td> <td width="80">汽车</td> </tr> <tr> <td height="28">2</td> <td>能看清鞋子的京东摄像头</td> <td>150</td> <td>2</td> <td>300</td> <!--rowspan合并行--> <td rowspan="2">数码</td> </tr> <tr> <td height="28">3</td> <td>带暖手宝功能的笔记本电脑</td> <td>4500</td> <td>2</td> <td>9000</td> </tr> </tbody> <tfoot align="center"> <tr> <!--colspan合并列--> <td colspan="3" height="28">合计</td> <td>5</td> <td>11000</td> <td></td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
2. 独立完成一个用户注册表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加油</title> </head> <body> <!--form必须带的两个属性标签:action、method--> <form action="" method="get"> <h1>调查表</h1> <label for="username">账号:</label> <input type="text" name="username" id="username" autofocus> <br> <br> <label for="password">密码:</label> <input type="password" name="password" id="password" > <br> <br> <!--label for="femal" 可以达到效果:当用户点击性别时,自动跳到女那个选项,checked是默认选择这个选项的意思--> <label for="femal">性别:</label> <input type="radio" name="sex" id="male" value="male">男 <input type="radio" name="sex" id="femal" value="femal">女 <input type="radio" name="sex" id="secrety" value="secrety" checked>保密 <br> <br> <!--label引用的id里的值,name可以设置成数组标签,label的效果就是点这个字,然后选上这个框,实现字和框绑定--> <label for="daima">爱好:</label> <input type="checkbox" name="hobby[]" id="youyong" value="youyong"><label for="youyong">游泳</label> <input type="checkbox" name="hobby[]" id="paobu" value="paobu"><label for="paobu">跑步</label> <input type="checkbox" name="hobby[]" id="daima" value="daima"><label for="daima">代码</label> <input type="checkbox" name="hobby[]" id="qiche" value="qiche" checked><label for="qiche">游泳</label> <br> <br> <label for="xingzuo">星座:</label> <!--select标签的默认属性标签是selected,--> <!--select标签的那么标签是在select标签里,name的值是在option标签里--> <select name="xingzuo" id="xingzuo"> <!--当value值为空时,不选择--> <option value="">请选择</option> <!--当值较多时,可以用optgroup分组标签--> <!--optgroup需要带label标签--> <optgroup label="好的"> <option value="shuiping">水瓶</option> <option value="juxie">巨蟹</option> <option value="tianxie">天蝎</option></optgroup> <optgroup label="坏的"> <option value="mojie">摩羯</option> <option value="tianchen">天秤</option></optgroup> </select> <br> <br> <button type="submit" value="submit">提交</button> <button type="reset" value="reset">重置</button> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
3. 制作一个简易的后台首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加油2</title> </head> <body> <h2>管理</h2> <!--ul无序列表,ol有序列表--> <ul> <!--target,让目标在哪里显示,可以自定义--> <li><a href="http://www.baidu.com" id="baidu" target="chizhi">百度</a></li> <li><a href="http://www.sogou.com" id="sogou" target="chizhi">搜狗</a></li> <li><a href="http://www.so.com" id="360" target="chizhi">360</a></li> </ul> <!--srcdoc本地链接,会让字出现在画中画中--> <iframe srcdoc="<h2>管理</h2>" frameborder="1" width="500" height="450" id="dizhi" name="chizhi"></iframe> <!--span是放在文字内的元素--> <p>我的朋友是<span style="color: red">二狗</span></p> </body> </html>
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号