最近参加了一个Web开发的客户端基础技术测试，虽然对于做前台开发的程序员来说比较简单，但对于一直做后台代码编写的程序员想掌握前台开发的基础来说，应该是一个比较好的Demo。对于Web初学者来说，也是一个概括比较全的示例。
先看看具体要求，这里直接把测试要求发了上来。需要注意的是，不能使用Dreamware或者Visual Studio智能工具，最好使用记事本纯手工编写，最多使用EditPlus辅助一下。
知识技能主要涉及:HTML[50分] , CSS[20分] , JAVASCRIPT[30分]
*************************************************************************
请纯手工编写一个HTML页面,
实现会员注册资料填写的界面,
并用CSS控制其页面元素的外观,
使用JavaScript在表单提交前进行表单数据有效性验证.
*************************************************************************
具体要求如下:
页面文件名:UserReg.htm
[HTML:5分]
整个页面或页面局部使用表格进行布局
[HTML:30分]
对注册表单的要求:
注册项目 表单元素 有效性要求
用户名 文本框 非空,不少于八位字符
密码 密码框 非空,不少于八位字符,不得为纯数字字符
确认密码 密码框 与密码一致
性别 单选按钮[一组两个] 必须选择其中之一
婚否 复选框 无
年龄 列表框 必须提供
职业 可多选的列表框 无
相片 文件选择上传按钮 相片文件必须是JPG图片*.jpg
个性签名 多行文本框 不超过200个字符
职业列表框中的选项请自行设计,但至少提供五项.
[HTML:10分]
表单内应该提供
[确认注册]提交按钮
[重新填写]重置按钮
[关闭窗口]命令按钮
[HTML:5分]
表单之外,放置一个超链接,文本为 登录 ,指向UserLogin.htm页面.
另一超链接,文本为 返回首页 ,指向Index.htm页面
CSS样式应用的要求:
[CSS:5分]
为所有文本输入的表单元素[含文本框,密码框,多行文本框]定义一个 类选择器 ,并应用.
要求:边框为1像素的绿色细线边框,文本颜色为蓝色.
[CSS:5分]
为所有的按钮[含提交,重置和命令按钮]定义一个 类选择器 ,并应用.
要求:边框为1像素的蓝色细线边框,文本颜色为白色,文本加粗,背景颜色为#abcdef.
[CSS:5分]
使用HTML标记选择器以及锚伪类选择器,对页面内所有的超链接进行外观控制.
要求 :
超链接的文字字号为14px
仅在鼠标悬停状态时才有下划线,其它状态时没有下划线.
访问过的超链接有灰色边框.
[CSS:5分]
适当使用样式表,对整个页面,表格及内部的行,单元格进行外观控制.
页面的普通文字大小为14px,字体为宋体
注册项目提示的文字字号为16px加粗显示,表单元素有效性验证的提示文本字号12px倾斜显示,
且为红色.
JAVASCRIPT应用的要求:
[JAVASCRIPT:10分]
年龄列表框中的选项包含从18岁到60岁的年龄,使用脚本动态生成.
其中
[JAVASCRIPT:15分]
提交按钮被点击后,进行表单数据有效性验证,
如果有效性规则验证通过,则表单以POST方式提交到DoReg.htm页面;
如果有一项或多项规则未通过,则使用对话框警告用户,并阻止提交.
重置按钮被点击后 ,表单数据应该恢复到初始状态.
[JAVASCRIPT:5分]
关闭按钮被点击后,页面所在的浏览器窗口应关闭.
其它的要求:
[5分]
如果代码格式良好,命名规范,有适当的注释,则额外加5分.
下面是我所完成的一个效果：
下面是我的实现代码：
相关说明：
为了简单起见，我将Javascript 和CSS 都集成到HTML 当中来了。在实际的开发中，建议还是将他们分别用单独的文件存放，再在HTML 中引用进来。
CSS 的外部引用：
在HTML的<head>中添加<link rel="stylesheet" type="text/css" href="style.css">，然后把CSS 写在style.css文件中即可。
Javascript 的外部引用：
在HTML的<head>中添加<script type="text/javascript" src="Queue.js"></script>，然后把Javascript 写在Queue.js文件中即可。
也可以动态加载JS脚本(参考)：
动态加载JS脚本的4种方法
如何在HTML文件中正确的引用js文件中的函数
另外，为了阅读的方便，我在代码中添加了许多的注释。关于注释，在HTML、Javascript 和CSS 中都有所差异：
HTML 中使用： <!-- HTML的注释 -->
Javascript 中使用： /* JavaScript的注释 */ 和 // JavaScript的注释
CSS 中使用： /* CSS的注释 */
( 关于HTML、Javascript 和CSS 的注释是我在应用后的总结，错漏之处还请斧正！)
示例下载