HTML常用标签极速入门 7月2日课程作业
实例
<!DOCTYPE html> <html lang="zh-cn"> <head> <!-- 网页编码 --> <meta charset="UTF-8"> <!-- 网页标题 --> <title>大兔子作业</title> </head> <body> <!-- 标题 --> <h1>大兔子的作业</h1> <!-- 段落 --> <p>HTML常用标签极速入门 7月2日课程作业</p> <!-- a标签 --> <a href="http://blog.datuzi.top" target="_blank" title="大兔子博客">大兔子博客</a> <!-- img标签 --> <img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png" alt="php中文网"> <!-- 分隔线 --> <hr> <!-- 无序列表 --> <ul> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ul> <!-- 有序列表 --> <ol> <li>php</li> <li>javascript</li> <li>css</li> <li>html</li> </ol> <!-- 定义列表 --> <dl> <dt>标题</dt> <dd>这里是内容</dd> </dl> <!-- 换行 --> <br> <!-- 表格 --> <table border="1" cellspacing="0" cellpadding="10" width="500" align="center"> <caption>大兔子购物车</caption> <thead style="background-color: aquamarine;"> <tr> <th>编号</th> <th>商品</th> <th>单价</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>汽车皮套</td> <td>800</td> </tr> <tr> <td>2</td> <td>汽车后视镜</td> <td>3000</td> </tr> <tr> <td>3</td> <td>汽车仪表盘</td> <td>5000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">总计：</td> <td rowspan="2">8800</td> </tr> <tr> <td colspan="2">货币：￥</td> </tr> </tfoot> </table> <!-- 换行 --> <br> <!-- 表单 --> <div> <form action="" method="get"> <!-- 文本 --> <p> <label for="ursename">用户名：</label> <input type="text" name="ursename" id="ursename" placeholder="由2-8个英文或数字组成" autofocus="autofocus" /> </p> <!-- 密码 --> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="由8-16个英文或数字组成" required="required" /> </p> <!-- 邮箱 --> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="请输入您的邮箱" /> </p> <!-- 数值 --> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="70"> </p> <!-- 日期选择 --> <p> <label for="birthday">生日:</label> <input type="date" id="birthday" name="birthday"> </p> <!-- 下拉列表 --> <p> <label for="course">课程:</label> <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> <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> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <!-- 文本域 --> <p> <label for="comment">简介:</label> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="内容不超过30字"></textarea> </p> <!-- 按钮 --> <p> <button type="submit">提交</button> </p> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
