本文使用简单的 html标签+div+css+JavaScript 实现带有表单提交和图片轮播效果的商城网站设计，效果如下图，源码下载github链接（以下仅列举设计过程中的部分注意点）
一、搭建网站首页
- 首页的所有内容可以放置在一个大的table标签中，再通过嵌入表格划分模块，并使用div+css在各个模块中添加居中等css效果
- 商品列表模块添加图片
如下图在table的单元格中插入图片可以居中显示，且在下方有文字说明
需要使用align的居中属性，并设置width的值为百分比
二、搭建网站注册页面
-
表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来
-
表单提交的是value里的内容，所以表单中除了file类型都需要设置value值用于上传到后台
-
默认勾选属性在option标签中是selected而不是checked
-
按钮不需要name属性
-
H5有required属性，规定该文本区域是必填的
三、搭建网站后台管理页面
- **使用框架结构标签
四、JS完成表单校验
-
在form标签添加onsubmit事件,并为其绑定一个函数
- 书写函数，用于获取用户输入的数据（获取数据时需要在指定位置定义一个id）
-
对用户输入的数据进行判断（使用document.getElementById(“”).value与判断值比较）
-
控制表单提交：若输入数据非法，提示错误信息并通过返回一个false阻止表单提交
- 利用正则表达式验证邮箱
五、bootstrap的登入表单
- 在html头中引入bootstrap库文件
- 在body中写入登入表单代码
六、JS实现图片轮播
- 定时器：BOM浏览器对象模型中window窗口对象的定时器方法， 结果都将返回一个唯一的id值，一般用于清除定时器
setInterval("run",3000)方法为每隔3秒执行一次run方法 setTimeout("run",3000)方法为3秒后执行一次run方法 -
在body标签中添加onload事件，并绑定一个带有定时器和更换图片源文件位置的函数
- 套用jquery代码实现手风琴轮播效果
效果图：
七、JS实现页面定时弹出广告
-
预期效果：与JS实现轮播图片相同，通过onload绑定一个显示图片的定时操作函数，计时结束后执行显示广告图片函数，之后清除定时操作，再重新隐藏广告图片
-
使用 display属性的block/none值 在页面指定位置 显示/隐藏 一个广告图片
-
清除定时操作
-
特别注意setInterval方法返回的id值赋值给的成员变量不能用var修饰，因为JS的函数中如果成员变量用var修饰的话就成为局部变量，则不能在其他函数中调用
八、用JS完善注册表单校验
-
在input标签中添加onclick聚焦事件和onblur离焦事件，完成当鼠标点击输入框和鼠标点击另一个输入框后提示不同的内容
-
代码重用：相同的代码不变，不同的代码用变量代替
九、JS完成表单各行换色与高亮
-
表格标签中包含的 thead， th ，tbody 标签
- JS可以书写匿名函数
-
注意当一个script标签中书写两个相同的 window.onload = funciton(){} ，则最新的会覆盖之前的
- 通过onmouseover/onmouseout 鼠标悬停和移除事件设置表格当前行数高亮
- 获取标签后设置css样式
十、使用JS完成注册表单的省市二级联动
- onchange：当用户改变内容时使用这个事件（二级联动）
-
使用方法传参的方式：this.value 获取用户选择的省份的value值，this代表当前操作对象
-
使用一个二维数组来储存省份和城市（从数据库中导入），并通过遍历数组来获取省份与用户选择的省份比较，如果相同了继续遍历该省份下所有的城市。
-
DOM文档对象模型中创建节点、文本节点、添加子节点等常用的方法
- JS内置对象中Array对象的数组长度可变，数组的长度为最大角标加1
