![[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是一个超文本语言，需要遵循html语法，由W3C规范。主要是由浏览器打开给用户看的。
http是访问协议其中的一种，可以通过HTTP协议访问html然后浏览器解析出来
制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
<!doctype html> <html lang="zn-cn"> <head> <title>制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素</title> </head> <body> <ul> <li><a href="http://www.baidu.com">首页</a></li> <li><a href="###">女装</a></li> <li><a href="###">男装</a></li> <li><a href="###">百货</a></li> </ul> <div> <a href="https://www.php.cn/xiazai/gongju"><img src="https://img.php.cn/upload/article/000/000/003/5b45c06b5c808348.png"></a> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并</title> </head> <body> <table border="1" width="500" cellspacing="0" cellpadding="5"> <!--table是一个表格的声明，border:边框为1px,width宽度500px, cellspacing:表格元素的边距为0， cellpadding表格单元边界与单元内容之间的间距5px(最好不要规定 cellpadding，而是使用 CSS 来添加内边距)--> <caption> <h3>产品库存</h3> <!--caption:为表格添加一个标题--> </caption> <thead> <tr bgcolor="#999"> <!--bgcolor:表头，使用此元素可以限定在开头位置--> <th>序号</th> <th>颜色</th> <th>价钱</th> <th>库存</th> </tr> <!--tr:表示一行，th:表示表头一列，td:表示表格一列--> </thead> <tr> <td>1</td> <td>黑色</td> <td>80</td> <td>1</td> </tr> <tr> <td>2</td> <td>白色</td> <td>80</td> <td>3</td> </tr> <tr> <td>1</td> <td>红色</td> <td>80</td> <td>5</td> </tr> <tfoot> <!--tfoot:为表格生成表脚，限制在表格的底部--> <tr> <td colspan="2">统计：</td> <!--colspan：合并2个单元格--> <td>240</td> <td>9</td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件</title> </head> <body> <form method="post" action="http://www.baidu.com" > <!--method:提交方式，action:提交地址--> <p> <label for="username">账号：</label> <!--label: 控件标题, 为了使点击标题自动获取控件焦点,它的for属性与控件id属性必须一致--> <input type="text" name="username" id="username" placeholder="必填"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="不的少于6位"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" name="age" min="16" max="80"> <!--number:只能输入数值的框；只能输入在一个数值范围的框--> </p> <p> <label for="">地区</label> <select name="" id=""> <optgroup label="广东"> <option value="">广州</option> <option value="">深圳</option> </optgroup> <optgroup label="湖南"> <option value="">长沙</option> <option value="">湘潭</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="aihao[]" value="lvyou" id="lvyou"><label for="lvyou">旅游</label> <input type="checkbox" name="aihao[]" value="yinyue" id="yinyue"><label for="yinyue">音乐</label> <input type="checkbox" name="aihao[]" value="dushu" id="dushu"><label for="dushu">读书</label> </p> <p> <label>性别：</label> <input type="radio" name="xb" id="n" checked><label for="n">男</label> <!--checked:为默认选项--> <input type="radio" name="xb" id="nv"><label for="nv">女</label> </p> <p> <label for="photo">头像上传：</label> <input type="file" name="photo" id="photo"> </p> <p> <label>个人简介：</label> <textarea rows="10" cols="30"></textarea> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
