table实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是4月23的作业-表格</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="500" align="center"> <!--表头--> <thead> <tr bgcolor="#add8e6" > <th width="50">编号</th> <th width="100">分类</th> <th width="200">名称</th> <th width="50">单价</th> <th width="50">数量</th> <th width="100">金额</th> </tr> </thead> <!--表格主体--> <tbody align="center"> <tr> <td>1</td> <td rowspan="3">教材</td> <td>语文书</td> <td>59</td> <td>1</td> <td>59</td> </tr> <tr> <td>2</td> <td>数学书</td> <td>69</td> <td>1</td> <td>69</td> </tr> <tr> <td>3</td> <td>英语书</td> <td>45</td> <td>2</td> <td>90</td> </tr> <tr> <td>4</td> <td>杂志</td> <td>演讲与口才</td> <td>29</td> <td>1</td> <td>29</td> </tr> </tbody> <tfoot> <tr align="center"> <td colspan="4" align="center">合计</td> <td>5</td> <td>247</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
用户注册 form
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <div style=" width: 300px; margin: 0 auto; border: 1px solid lemonchiffon; padding: 10px;"> <h3>用户注册</h3> <form action="" method="post"> <!--text 单行文本--> <p><label for="username">账号</label> <input type="text" name="username" id="username" autofocus placeholder="最长不能超过10个字符" required> </p> <p> <label for="password">密码</label> <input type="password" name="password" id="password" placeholder="6-12个字符"> </p> <p><label for="email">邮箱</label> <input type="email" name="email" id="email" placeholder="a@a.com"></p> <p><label for="age">年龄</label> <!--min max 最小值和最大值--> <input type="number" name="age" id="age" min="12" max="70"></p> <p> <label for="birthday">生日</label> <input type="date" name="birthday" id="birthday"> </p> <p> <!--下拉列表，下拉框--> <!--name在select，value在 option--> <label for="course">课程</label> <!--size 可调整同时显示的行数--> <select name="course" id="course"> <optgroup label="文化类"> <option value="1">语文</option> <option value="2">数学</option> <option value="3">英语</option> </optgroup> <optgroup label="艺术类"> <option value="4">书法</option> </optgroup> </select> </p> <!--多选--> <p> <label for="book">爱好</label> <input type="checkbox" name="hobby[]" value="book" id="book"><label for="book">看书</label> <input type="checkbox" name="hobby[]" value="book" id="run"><label for="run">跑步</label> <input type="checkbox" name="hobby[]" value="book" id="talk"><label for="talk">演讲</label> <input type="checkbox" name="hobby[]" value="movies" id="movies" checked><label for="talk">看电影</label> </p> <!--单选--> <p> <label for="male">性别</label> <input type="radio" value="male" name="gender" id="male"><label for="male">男生</label> <input type="radio" value="female" name="gender" id="female"><label for="female">男生</label> <input type="radio" value="secrecy" name="gender" id="secrecy" <label for="secrecy">保密</label> </p> <p><label for="jianjie">简介</label> <textarea name="jianjie" id="jianjie" rows="5" cols="33" maxlength="100" placeholder="不超过100个字"></textarea> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
网站后台 iframe
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站后台管理</title> </head> <body> <h1>网站后台管理</h1> <ul style="float: left;"> <li><a href="table.html" target="main">栏目管理</a> </li> <li><a href="form.html" target="main">商品管理</a> </li> <li><a href="table2.html" target="main">用户管理</a> </li> <li><a href="form2.html" target="main">系统设置</a> </li> </ul> </p> <iframe srcdoc="<h3>网站后台管理</h3>" frameborder="0" width="1000" height="700" name="main" style="float: left;"></iframe> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>容器的用法</title> </head> <body> <div>这是我的问候：</div> <p> 今天<span style=" font-size: 2em; color: crimson;" > 热 </span>吗？</p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例