完成表格的跨行合并功能
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h3>购物车</h3> <ol> <li>有备无患的奔驰机油，1个，800元</li> <li>能看清鞋子的京东摄像头，1个，300元</li> <li>带暖手功能的笔记本电脑，2个，9000元</li> </ol> <hr> <table border="1" cellspacing="0" cellpadding="5"> <caption>购物车</caption> <thead> <tr bgcolor="#9acd32"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>产品类型</th> </tr> </thead> <tbody align="center" > <tr > <td width="50">1</td> <td width="200">奔驰机油</td> <td width="50">150</td> <td width="20">2</td> <td width="50">300</td> <td width="100">汽车用品</td> </tr> <tr > <td>2</td> <td>京东摄像头</td> <td>800</td> <td>1</td> <td>800</td> <td rowspan="3">网络产品</td> </tr> <tr > <td>3</td> <td>笔记本电脑</td> <td>4500</td> <td>2</td> <td>9000</td> </tr> </tbody> <tfoot align="center"> <tr> <td colspan="3" align="center">统计</td> <td>2</td> <td>10100</td> <td></td> </tr> </tfoot> </table> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
独立完成一个用户注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册表</title> </head> <body> <h2>用户注册表</h2> <form action="" method="post"> <p><label for="username"> 用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required autofocus> </p> <p><label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required > </p> <p><label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="70"> </p> <p><label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="123@321.com" required > </p> <p><label for="sex">性别：</label> <input type="radio" id="sex" value="nan" name="nan" ><label id="sex">男</label> <input type="radio" id="sex" value="nv" name="nv"><label id="sex">女</label> <input type="radio" id="sex" value="secret" name="secret"><label id="sex">保密</label> </p> <p><label for="birth">生日：</label> <input type="date" id="birth" name="birth"> </p> <p> <label for="aihao" >爱好：</label> <input type="checkbox" name="aihao[]" value="lvyou" ><label id="aihao">旅游</label> <input type="checkbox" name="aihao[]" value="photo"><label id="aihao">摄影</label> <input type="checkbox" name="aihao[]" value="huwai"><label id="aihao">户外运动</label> <input type="checkbox" name="aihao[]" value="home"><label id="aihao">宅</label> <input type="checkbox" name="aihao[]" value="swim"><label id="aihao">游泳</label> </p> <p><label for="skill">技能 </label> <select name="skill" id="skill"> <option value="" selected>请选择技能</option> <optgroup label="女生"> <option value="1">洗衣服</option> <option value="2" >做饭</option> </optgroup> <optgroup label="男生"> <option value="3">电器修理</option> <option value="4">奶爸</option> <option value="5">砍柴</option> </optgroup> </select> </p> <p>个人简介</p> <textarea maxlength="10" placeholder="最多输入10个字"></textarea> <hr> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <button type="submit">提交</button> <button type="button">提交</button> </form> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
制作一个简易的后台首页
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台</title> </head> <body> <ul style="float:left"> <li><a href="http://www.baidu.com" target="src">信息中心</a></li> <li><a href="http://www.163.com" target="src">绩效管理</a></li> <li><a href="http://www.baidu.com" target="src">数据展示</a></li> <li><a href="http://www.sohu.com" target="src">档案管理</a></li> <li><a href="http://www.baidu.com" target="src">修改密码</a></li> <li><a href="http://www.163.com" target="src">退出系统</a></li> </ul> <div align="left"> <iframe width="800" height="600" name="src"></iframe></div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
博客列表 >html5相关标签使用--2019年4月24日13:39:06
html5相关标签使用--2019年4月24日13:39:06
- MrLv的博客原创转载
- 2019年04月24日 13:45:41656浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议