![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：表格很棒
Collection
Collection
一、 描述HTML与HTTP是什么,他们之间有什么联系?
html是超文本标记语言，http是超文本传输协议，在web中信息一般是使用html格式以超文本方式传送的，使用的是http协议。
二、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li><a href="#"><img src="https://www.php.cn/static/images/logo.png" alt="首页">首页</a></li> <li><a href="#"><img src="#" alt="">php</a></li> <li><a href="#"><img src="#" alt="">java</a></li> <li><a href="#"><img src="#" alt="">python</a></li> <li><a href="#"><img src="#" alt="">html</a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
三、制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table border="1" width="55%" cellspacing="0" cellpadding="1"> <caption> <h3>班型价格</h3> </caption> <!-- 表头 --> <thead> <tr bgcolor="#ffffe0"> <th>编号</th> <th>班型</th> <th>单价</th> <th>折扣</th> <th>金额</th> </tr> </thead> <!-- 主体 --> <tr> <td rowspan="4" align="center">数学</td> </tr> <tr> <td>A班</td> <td>869</td> <td>0.8</td> <td>869</td> </tr> <tr> <td>B班</td> <td>1819</td> <td>0.8</td> <td>3638</td> </tr> <tr> <td>C班</td> <td>1350</td> <td>0.85</td> <td>1350</td> </tr> <tr> <td rowspan="4" align="center">语文</td> </tr> <tr> <td>A班</td> <td>869</td> <td>0.8</td> <td>869</td> </tr> <tr> <td>B班</td> <td>1819</td> <td>0.8</td> <td>3638</td> </tr> <tr> <td>C班</td> <td>1350</td> <td>0.85</td> <td>1350</td> </tr> <!-- 底部 --> <tr> <td colspan="3" align="center">合计:</td> <td>4</td> <td>58597</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
四、制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3>报名信息登记</h3> <form action="login.php" method="POST"> <p> <label for="username">姓名:</label> <input type="text" id="username" name="username" value="zhiping"> </p> <p> <label for="telephone">手机号:</label> <input type="text" id="telephone" name="telephone" placeholder="请输入手机号..."> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">课程</label> <!-- 下拉列表 --> <select name="" id=""> <optgroup label="前端"> <option value="">请选择</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">足球</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">羽毛球</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">乒乓球</label> </p> <p> <label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <label for="photo">头像上传:</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="reset" value="按钮"> <button type="button">注册</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
五、制作一个网站后面, 要求使用`<iframe>`内联框架实现
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul style="float: left; margin-right: 20px;"> <li><a href="toutiao.html" target="content">导航</a></li> <li><a href="toutiao.html" target="content">商品信息</a></li> <li><a href="toutiao.html" target="content">注册</a></li> </ul> <iframe srcdoc="<h1>srcdoc加入html标签</h1>" frameborder="1" name="content" width="88%" ></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
六、总结: 为什么推荐使用语义化的标签?
便于培养良好的编程习惯以及符合现在搜索引擎爬虫的抓取，是seo代码优化的重要部分
七、手抄作业
白天上班，手抄作业晚上补上，报备一下，麻烦老师了。