![[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是什么,他们之间有什么联系?
HTML是一种语言，超文本编辑语言；HTTP是一种协议，超文本传输协议。我们可以使用http协议去访问服务器上用html写的html文件，然后浏览器对html 文件进行渲染和展示。
2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
导航我们一般使用无序列表<ul>进行制作，链接使用<a href=""></a>，图片作为链接元素是把图片<img>放到<a href=""><img></a>中，并设置alt属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航</title> </head> <body> <ul> <li><a href="https://php.cn"><img src="https://www.php.cn/static/images/logo.png" alt="https://php.cn"></a></li> <li><a href="https://www.php.cn/course/type/3.html" target="_blank">入门课程</a></li> <li><a href="https://www.php.cn/course.html" target="_blank">高级课程</a></li> <li><a href="https://www.php.cn/xiazai/" target="_blank">资料下载</a></li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
表格使用<table></table>，表格标题使用<caption></caption>，表格头部使用<thead></thead>，表格底部使用<tfoot></tfoot>，行和列的合并使用colspan和rowspan属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>精选商品信息表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="500"> <caption><h3>精选商品信息表</h3></caption> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>总计</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>iphone 11 pro</td> <td>9299</td> <td>1</td> <td>9299</td> <td rowspan="3">16897</td> </tr> <tr> <td>2</td> <td>华为 mate 30</td> <td>4999</td> <td>1</td> <td>4999</td> </tr> <tr> <td>3</td> <td>小米 9 pro</td> <td>2599</td> <td>1</td> <td>2599</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="center">合计</td> <td>3</td> <td>16897</td> <td></td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
表单使用<form>，两个关键属性action：表单要提交到的地址；method：表单提交的类型。
表单控件一般使用<input>，根据type属性决定控件的类型：text：文本框、password：密码框、email：邮箱地址、number：数字、file：文件上传、submit：提交按钮等等；
下拉列表使用<select name="..."><option value="...">...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新用户注册</title> </head> <body> <h3>新用户注册</h3> <form action="register.php" method="post"> <p> <label for="username"></label> 账号：<input type="text" id="username" name="username" value="admin"> </p> <p> <label for="password"></label> 密码：<input type="password" id="password" name="password" placeholder="最少6位"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="test@test.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="male" ><label for="male">男生</label></input> <input type="radio" name="gender" id="female" checked><label for="female">女生</label></input> </p> <p> <label for="course">感兴趣的领域：</label> <select name="course" id="course"> <optgroup label="前端"> <option value="html5">html5</option> <option value="js">JS</option> </optgroup> <optgroup label="后端"> <option value="html5">php</option> <option value="java">java</option> </optgroup> </select> </p> <p> <label for="">兴趣爱好：</label> <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">玩游戏</label></input> <input type="checkbox" name="hobby[]" id="song" value="song"><label for="song">唱歌</label></input> </p> <p> <label for="">头像上传：</label> <input type="file" name="photo" id="photo"></input> </p> <p> <button>提交</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
5. 制作一个网站后面, 要求使用<iframe>内联框架实现
内联框架多用于设计后台：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城管理后台</title> </head> <body> <ul> <li><a href="demo6.html" target="content">商品管理</a></li> <li><a href="demo7.html" target="content">订单管理</a></li> <li><a href="demo8.html" target="content">系统设置</a></li> </ul> <iframe srcdoc="<h2>商城管理后台</h2>" frameborder="1" name="content" width="500" height="500"></iframe> </body> </html>
点击 "运行实例" 按钮查看在线实例
6. 总结: 为什么推荐使用语义化的标签?
a. 语义化标签可以使内容结构化，能够获取更好的用户体验；
b. 使用语义化标签的网站更容易被搜索引擎识别，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重;
c. 语义化标签使代码的可读性增强，易于维护，便于团队开发和维护;
d. 语义化标签使代码方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；