![[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
1. 描述HTML与HTTP是什么,他们之间有什么联系?
（1）HTML：超文本标记语言（使用htm超文本标记语言编写的文档以‘.html’为扩展名）
（2）HTTP：超文本传输协议（是一套客户端与服务器端都必须遵循的请求和响应的标准或规范
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
（1）导航使用到的是无序列表 ul标签，li标签，a标签，img标签
（2）下面我们来看看实例，实例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表的导航实例</title> </head> <body> <ul> <li><a href="https://www.php.cn"><img src="images/logo.png" alt="logo"></a></li> <li><a href="https://www.php.cn"><img src="images/1.png" alt="首页"></a></li> <li><a href="https://www.php.cn"><img src="images/2.png" alt="视频教程"></a></li> <li><a href="https://www.php.cn"><img src="images/3.png" alt="入门教程"></a></li> <li><a href="https://www.php.cn"><img src="images/4.png" alt="社区问答"></a></li> <li><a href="https://www.php.cn"><img src="images/5.png" alt="技术文章"></a></li> <li><a href="https://www.php.cn"><img src="images/6.png" alt="编程词典"></a></li> <li><a href="https://www.php.cn"><img src="images/7.png" alt="资源下载"></a></li> <li><a href="https://www.php.cn"><img src="images/8.png" alt="工具下载"></a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
（1）HTML <caption>元素展示一个表格的标题， 它常常作为<table>的第一个子元素出现，同时显示在表格内容的最前面。
（2）HTML<thead>元素定义了一组定义表格的列头的行。
（3）HTML元素<tbody>元素在一个<table>元素中可以出现一个或者更多.代表表格的主体内容
（4）HTML元素<tfoot>定义了一组计算表格中各列总和
下面我们开看看：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品信息表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption><h3>商品信息表</h3></caption> <thead> <tr> <th>编号</th> <th>商品名称</th> <th>运行内存</th> <th>机身存储</th> <th>操作系统</th> <th>机身颜色</th> <th>分辨率</th> <th>单价（元）</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">华为 HUAWEI Mate20 X (5G) 7nm工艺5G旗舰芯片</td> <td>8GB</td> <td>256G</td> <td>Android(安卓)</td> <td>宝石蓝</td> <td>全高清FHD+</td> <td>6199</td> </tr> <tr> <td>2</td> <td>8GB</td> <td>128GB</td> <td>Android(安卓)</td> <td>宝石蓝</td> <td>全高清FHD+</td> <td>5199</td> </tr> <tr> <td>3</td> <td>华为 HUAWEI Mate 20 麒麟980AI智能芯片</td> <td>6GB</td> <td>64GB</td> <td>Android(安卓)</td> <td>亮黑色</td> <td>全高清FHD+</td> <td>3199</td> </tr> <tr> <td>4</td> <td rowspan="2">华为 HUAWEI Mate 30 5G 麒麟990 5G全网通版</td> <td>8GB</td> <td>128GB</td> <td>Android(安卓)</td> <td>罗兰紫</td> <td>全高清FHD+</td> <td>5499</td> </tr> <tr> <td>5</td> <td>8GB</td> <td>256GB</td> <td>Android(安卓)</td> <td>星河银</td> <td>全高清FHD+</td> <td>6199</td> </tr> <tr> <td>6</td> <td>华为 HUAWEI Mate 30 5G 麒麟990 5G全网通版</td> <td>8GB</td> <td>256GB</td> <td>Android(安卓)</td> <td>星河银</td> <td>全高清FHD+</td> <td>6199</td> </tr> <tr> <td colspan="8" align="center">以上商品价格仅供参考，请以官网价格为准</td> </tr> </tbody> <tfoot></tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
（1）<form>元素定义 HTML 表单,HTML 表单用于搜集不同类型的用户输入
（2）表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户免费注册</title> </head> <body> <h3>免费注册</h3> <form action="login.php" method="post"> <p> <!--label中的for与input的id相同，点击用户名鼠标光标会跳到输入框中--> <label for="username">用户名：</label> <input type="text" name="username" id="username" value="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <p> <label for="password">确认密码：</label> <input type="password" name="password" id="password" placeholder="请确认密码"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" min="16" max="68" "> </p> <p> <label for="">课程：</label> <select name="coures" id=""> <optgroup label="前端"> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> <option value="">其他</option> </optgroup> <optgroup label="后端"> <option value="" selected>PHP</option> <option value="">MySQL</option> <option value="">Larvael</option> <option value="">其他</option> </optgroup> </select> </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="movie">兴趣爱好：</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="running" id="running"><label for="running">跑步</label> <input type="checkbox" name="hobby[]" value="study" id="study"><label for="study">学习</label> <input type="checkbox" name="hobby[]" value="writing" id="writing"><label for="writing">写作</label> <input type="checkbox" name="hobby[]" value="movie" id="movie"><label for="movie">看电影</label> </p> <p> <label for="">头像上传：</label> <input type="file" name="photo" id="photo"> </p> <p> <input type="reset" name="reset" value="重置"> <input type="submit" name="submit" value="提交"> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用<iframe>内联框架实现
（1）frameborder:是否显示边框，1(yes),0(no)
（2）height:框架作为一个普通元素的高度，建议在使用css设置。
（3）width:框架作为一个普通元素的宽度，建议使用css设置。
（4）name:框架的名称，window.frames[name]时专用的属性。
（5）scrolling:框架的是否滚动。yes,no,auto。
（6）src：内框架的地址，可以使页面地址，也可以是图片的地址。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台模板 内联框架</title> </head> <body> <ul style="float: left;"> <li><a href="1.html" target="content">网站导航</a></li> <li><a href="2.html" target="content">商品信息</a></li> <li><a href="3.html" target="content">用户注册</a></li> </ul> <iframe srcdoc="<h3>这是一个后台管理</h3>" frameborder="1" name="content" width="600" height="700"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
（1）有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
（2）结构更好，更利于开发人员的维护(可维护性更高，因为结构清晰,易于阅读)
