收藏
批改状态：合格
老师批语：html标签众多, 但是常用的并不多, 对于课堂上未提及的标签, 可以通过手册进行自学
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html_0702实例作业</title> </head> <body> <!-- 无序列表实例演示 --> <h3>饮品清单</h3> <ul> <li>咖啡</li> <li>奶茶</li> <li>果汁</li> <li>汽水</li> </ul> <!-- 实例演示表格的用法及行列合并 --> <table border='1' cellpadding='5' cellspacing='0' > <caption><h3>文具信息</h3></caption> <!-- 表头 --> <thead> <tr> <th>编码</th> <th>商品</th> <th>库存</th> <th>单价(元)</th> </tr> </thead> <tbody> <tr align='center'> <td width='70'>001</td> <td width='70'>铅笔</td> <td width='70'>123</td> <td width='70'>1</td> </tr> <tr align='center'> <td>002</td> <td>圆珠笔</td> <td>222</td> <td>2</td> </tr> <tr align='center'> <td>003</td> <td>尺子</td> <td>121</td> <td>2</td> </tr> <tr align='center'> <td>004</td> <td>圆规</td> <td>99</td> <td>5</td> </tr> </tbody> <tfoot> <tr align='center'> <td colspan='2'>总计</td> <td>565</td> <td>10</td> </tr> </tfoot> </table> <!-- 表单实例演示 --> <h3>用户注册</h3> <form action="#" method='post' name='register'> <p> <label for="username">账号:</label> <input type="text" id='username' name='username' placeholder='不超过8个字符' > </p> <p> <label for="password">密码:</label> <input type="password" id='password' name='password' placeholder='6-12个字母或数字' > </p> <p> <label for="emali">邮箱:</label> <input type="emali" id='emali' name='emali' placeholder='examail@mail.com' > </p> <p> <label for="age">age:</label> <input type="number" id='age' name='age' min='16' max='70' > </p> <p> <label for="bisthday">bisthday:</label> <input type="date" id='bisthday' name='bisthday' > </p> <p> <label for="course">课程:</label> <!-- 默认显示是一个,可以用size设置--> <select name="course" id="course" size="1"> <!-- 选择支持分组--> <optgroup label="前端:"> <option value="0">请选择</option> <option value="1">HTML5</option> <option value="2">CSS3</option> <!-- selected: 设置默认选项--> <option value="3" selected>JavaScript</option> </optgroup> <optgroup label="后端:"> <option value="4">PHP</option> <option value="5">MySQL</option> <option value="6">ThinkPHP</option> </optgroup> </select> </p> <!-- 复选框--> <p> <label for="programme">爱好: </label> <!-- 点击"爱好"标签会自动定位到"撸代码"选项上--> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <!-- checked: 默认值--> <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label> </p> <!-- 单选按钮--> <p> <label for="male">性别: </label> <!-- 点击"性别"标签会自动定位到"男生"选项上--> <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label> <!-- checked: 默认值--> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <!-- 文本域--> <p> <label for="comment">简介:</label> <!-- 文本域其实就是一个多行文本框--> <!-- 不要设置value属性, 返回的文本在value属性中--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea> </p> <p> <!-- 按钮--> <input type="submit" name="submit" value="提交"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="reset" name="reset" value="重置"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <input type="button" name="button" value="按钮"> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
