制作一个产品登录页

需求

需求 1： 产品登陆页应存在 id=”header” 的 header 元素。

需求 2： 在 header 元素内应存在 id=”header-img” 的图像， 这里通常用来放置公司的 logo。

需求 3： 在 #header 元素内，应存在一个 id=”nav-bar” 的 nav 元素。

需求 4： nav 元素中应至少包含三个 class 为 nav-link 且可点击的元素。

需求 5： 当点击 nav 内的 .nav-link 按钮时，应滚动到产品主页上相应的部分。

需求 6： 页面上应存在 id=”video” 的嵌入式视频播放区域。

需求 7： 产品登陆页应存在一个 id=”form” 的 form 元素。

需求 8： 在表单中，应存在一个 id=”email” 的 input 输入框供用户填写邮箱。

需求 9： #email 输入框内应存在描述该区域用途的占位符文字。

需求 10： #email 输入框应使用 HTML5 验证来确认输入的内容是否为邮箱。

需求 11： 在表单中，应存在一个 id=”submit” 的 input 提交按钮。

需求 12： 当点击 #submit 元素时，应将邮箱信息提交到一个静态页面（请使用这个模拟的 URL：https://www.freecodecamp.com/email-submit）。

需求 13： navbar 应保持在视口（viewport）的顶部。

需求 14： 在此 app 中，应至少使用一次媒体查询。

需求 15： 在此 app 中，应至少使用一次 CSS 的 flexbox 布局。

解决:

需求4:

a标签 href=”#some-text”

需求6:

需求11:

<input id="submit" type="submit">

需求12：

input标签name与value的区别
id是唯一标识符，不允许有重复值(类似数据表的主键)可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中，出现重复的id，会导致不可预料的错误)

name：单独地在一个网页里面，一个控件是否设置它的 name 属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 name 属性，否则，这个值是没有办法传到服务器上面得到保存的。
name是控件的名称 ，value是控件的值， id是控件的身份标志。

三者的区别：
name：控件名称
value：用户输入(或选择)的值
id：用于网页脚本编号(javascript)

CSDN链接

一句话总结：在input标签输入name属性才能将数据提交到服务器

链接：

codepen