![[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是超文本标记语言，用于编写HTML文件，常见于超文本链接的后缀；HTTP是超文本传输协议，一般在超文本链接的打头部分，用于客户端向服务器端发送请求，服务器再按照协议处理请求，将处理的结果回传至客户端。可以理解为翻译器，客户端输入机器处理某项工作可以识别的语言，服务器按照规定的协议处理接收到的内容并回复客户端需要的内容。
2、制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
</head>
<body>
<ul>
<li><a href="https://www.php.cn/">首页</a></li>
<li><a href="https://www.php.cn/course/list/29.html">PHP视频课</a></li>
<li><a href="https://www.php.cn/course/1071.html"><img src="https://img.php.cn/upload/course/000/000/001/5d9f0b79ad447136.jpg" alt="第九期录播课"></a></li>
</ul>
</body>
</html>
解释：
html根元素标签
lang=’en’网站页面的内容为英文
<head>
源信息
</head>
charset=”UTF-8”编码语言的类型
title为网页的标题内容
body内的为网页展示的内容
3、制作一张商品信息表，要求用到标题，头部与底部，行与列方向的合并
`<!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='#add8c6'>
<th>编号</th>
<th>商品名称</th>
<th>采购数量</th>
<th>单价(单位：元）</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2' align='center'>1</td>
<td align='center'>铅笔</td>
<td align='right'>100</td>
<td align='right'>3</td>
<td align='right'>300</td>
</tr>
<tr>
<td align='center'>文具盒</td>
<td align='right'>300</td>
<td align='right'>8</td>
<td align='right'>2400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3' align='center'>合计：</td>
<td align='right'>400</td>
<td align='right'>2700</td>
</tr>
</tfoot>
</table>
</body>
</html>`
4、制作一张完整的用户注册表单，要求尽可能多的用到学到的表单控件
<!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='username'>姓名：</label>
<input type='text' id='username' name='username' value=''
</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='26' max='80'>
</p>
<p>
<label for=''>科目班级分类:</label>
<select name='coures' id=''>
<optgroup label=“文科”>
<option value='' selected>地理</option>
<option value='' selected>政治</option>
<option value='' selected>历史</option>
</optgroup>
<optgroup label=“理科”>
<option value='' selected>化学</option>
<option value='' selected>物理</option>
<option value='' selected>生物</option>
</optgroup>
</select>
</p>
<p>
<label for=''>性别：</label>
<input type='radio' name='gender' id='male'>
<label for='male'>男</label>
<input type='radio' name='gender' id='female' checked>
<label for='female'>女</label>
</p>
<p>
<label for='game'>爱好</label>
<input type='checkbox' name='hobby' value='reading' id='reading'><label for='reading'>看书</label>
<input type='checkbox' name='hobby' value='swimming' id='swimming'><label for='swimming'>游泳</label>
</p>
<p>
<label for='photo'>头像上传：</label>
<input type='file' name='photo' id='photo'>
</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 style="float:left;margin-right:15pxi;">
<li><a href='demo2.html' target='content'>采购明细表</a></li>
<li><a href='demo3.html' target='content'>学生信息表</a></li>
</ul>
<iframe srcdoc='<h2>欢迎使用管理后台</h2>' framborder='1' name='content' width='530' height='400'></iframe>
</body>
</html>`
6，总结：为什么推荐使用语义化的标签？
语义标签有利于页面优化，搜索引擎看到标签就知道页面的内容，网页容易被收录，符合W3C的标准。语义标签是块级容器，独占一行，垂直排列,方便编辑和查看内容。!
7、手抄作业，拍照图片
1029-1
1029-2
1029-3
1029-4