使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。 验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。 通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。 通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。 通过实验了解Ajax的编程方法，掌握Ajax编程技巧。
Eclipse
(写出主要的内容) 1）请参考教材的第2-4章内容，认真阅读分发的源代码，并根据教材上的提示，完成源代码中没有实现的功能。 2）开发一个用户注册界面，要求：用户名基于Ajax检测是否重复，年龄需用JavaScript检查格式是否正确。
编写用户注册页面步骤： 1.先写好整体的DIV框架
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户注册表单验证代码</title> <link href="login.css" rel="stylesheet" /> <script language='javascript' src="login.js"></script> </head> <body> <div class='body_main'> <!-- start main content --> <div class='index_box' style='margin-top:20px;'> <div class='box_title'> <div class='text_content'> <h1>用户注册表单验证代码</h1> </div> </div> <div class='box_main'> <div id="register" class="register"> <!-- <form id="form" action="http://sc.chinaz.com/" method="post" onSubmit="return check();"> --> <div id="form_submit" class="form_submit"> <div class="fieldset"> <!-- 用户名 --> <div class="field-group"> <label class="required title">用户名</label> <span class="control-group" id="name_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="name" name="name" maxLength="11" value="" > </div> </span> <label class="tips">请输入您的用户名，3~16位小写字母或数字组成</label> </div> <!-- 年龄 --> <div class="field-group"> <label class="required title">年龄</label> <span class="control-group" id="age_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="age" name="age" maxLength="11" value="" > </div> </span> <label class="tips">仅用于注册使用</label> </div> <!-- 电话号码 --> <div class="field-group"> <label class="required title">手机号码</label> <span class="control-group" id="mobile_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" > </div> </span> <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label> </div> <!-- 邮箱 --> <div class="field-group"> <label class="required title">邮箱</label> <span class="control-group" id="email_input"> <div class="input_add_long_background"> <input class="register_input" type="text" id="email" name="email" maxLength="50" value="" > </div> </span> <label class="tips">请输入您常用的邮箱</label> </div> <!-- 设置密码 --> <div class="field-group"> <label class="required title">设置密码</label> <span class="control-group" id="password1_input"> <div class="input_add_long_background"> <input class="register_input" type="password" id="password" name="password" maxLength="20" value="" /> </div> </span> <label class="tips">请使用6~20个英文字母（区分大小写）、符号或数字</label> </div> </div> </div> <div id="div_submit" class="div_submit"> <div class='div_submit_button'> <input id="submit" type="submit" value="注册" class='button_button disabled'> </div> </div> </div> </div> <div class='box_bottom'></div> </div> </div> </body> </html>2.将写好的框架进行CSS美化
body { margin: 0; padding: 0; background: url("../images/body_bg.png") repeat 0 0 #F2F2F2; width: 100%; height: 166px; color: #333333; font: 12px/18px "tahoma", "Microsoft YaHei", "arial", "SimHei", "SimSun"; } input.button_button { background: url('../images/buttom.png') no-repeat; margin: 0; width: 106px; height: 35px; border: 0; font-size: 15px; font-weight: 600; color: #FFFFFF; text-shadow: 0 -1px 0 #535353; padding: 0 0 3px 0; text-align: center; font-weight: bold; line-height: 33px; text-indent: 20px; } /*index start*/ .body_main { margin: 0 auto; width: 992px; } .index_box .box_title { background: url('../images/box_top.png') no-repeat scroll center top transparent; width: 991px; height: 80px; padding: 0; } .index_box .box_title .text_content { text-align: center; padding: 20px 0 10px 0; } .index_box .box_title .text_content h1 { font-weight: normal; } .index_box .box_main { border: solid #D0D0D0; background: #ffffff; border-width: 0 1px 0 1px; width: 988px; ; min-height: 50px; overflow: hidden ; } .index_box .box_bottom { background: url('../images/box_bottom.png') no-repeat scroll center top transparent; width: 991px; height: 7px; padding: 0; } /*regist*/ .register { float: left; padding: 25px 50px; } .register .form_submit { float: left; border-bottom: 1px solid #bfbfbf; width: 888px; } .register .form_submit .fieldset { float: left; } .register .form_submit .fieldset .field-group { float: left; height: 55px; } .register .form_submit .fieldset .field-group .title { float: left; width: 120px; text-align: right; margin: 4px 0 0 0; font-size: 14px; } .register .form_submit .fieldset .field-group .control-group { float: left; width: 350px; margin: 0 10px; } .register .form_submit .fieldset .field-group .tips { float: left; width: 250px; color: #bfbfbf; } .wrong { float: left; width: 250px; color: red; } .register .div_submit { float: left; width: 875px; margin: 10px 5px; } .register .div_submit .div_submit_button { float: right; } /*end regist*/ .fieldset .input_add_background { background: url("../images/input.jpg") no-repeat scroll 100% 100% transparent; background-position: center; height: 30px; width: 157px; float: left; margin: 0 2px 0 0; } .fieldset .input_add_background input.register_input_ot { background-color: #f9f9f9; border: 0 none; color: #4F4F4F; font-size: 12px; height: 18px; outline: medium none; width: 145px; padding: 1px; margin: 5px; } .fieldset .input_add_long_background { background: url("../images/input_long.jpg") no-repeat scroll 100% 100% transparent; background-position: center; height: 30px; width: 286px; float: left; margin: 0 0 15px 0; } .fieldset .input_add_long_light_background { background: url("../images/input_long_light.jpg") no-repeat scroll 100% 100% transparent; background-position: center; height: 30px; width: 286px; float: left; } .fieldset .input_add_long_background input.register_input { background-color: #f9f9f9; border: 0 none; color: #4F4F4F; font-size: 12px; height: 18px; outline: medium none; width: 270px; padding: 1px; margin: 5px; } .fieldset .input_text { display: inline-block; position: absolute; vertical-align: top; margin: 6px 0 0 10px; z-index: 2; font-style: italic; color: #BFBFBF; }3.进行表单验证
window.onload = function() { var age = document.querySelector("#age"); var name = document.querySelector("#name"); var mobile = document.querySelector("#mobile"); var email = document.querySelector("#email"); var password = document.querySelector("#password"); var submit = document.querySelector("#submit"); var regname = /^[a-z0-9_-]{3,16}$/; var regage = /^[0-9]{1,3}$/; var regmobile = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/; var regemail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/; var regpassword = /^[a-zA-Z0-9_-]{6,18}$/; name.onblur = function() { if (!regname.test(name.value)) { alert("请按要求输入3~16位小写字母或数字组成的用户名"); // this.parent.sibling(".tips").style.color = red; // // tips.className = ".wrong"; } console.log(regname.test(name.value)); } age.onblur = function() { if (!regage.test(age.value)) { alert("请输入正确的年龄"); // tips.className = ".wrong"; } } mobile.onblur = function() { if (!regmobile.test(mobile.value)) { alert("请输入正确的手机号"); // tips.className = ".wrong"; } } email.onblur = function() { if (!regemail.test(email.value)) { alert("请按格式输入常用的邮箱"); // tips.className = ".wrong"; } } password.onblur = function() { if (!regpassword.test(password.value)) { alert("请输入3~16位由字母或数字组成的密码"); // tips.className = ".wrong"; } } submit.onclick = function() { if (regname.test(name.value) & regage.test(age.value) & regmobile.test(mobile.value) & regemail.test(email.value) & regpassword.test(password.value)) { alert("注册成功"); } else { alert("请重新检查信息"); } } }现阶段效果图：
4.进行Tomcat安装及配置 链接： 5.ajax的实现 后续补充
（1）超文本标记语言的文档主要由哪些标记构成？缺少任何一部份会对文件产生什么影响？不带任何标记的文档又会怎样？
答：< html>< head>< body>< form>
（2）要想使浏览器中显示的文字分行排列，应使用何种标记处理？
答：用< table>< tr>< td>< th>
（3）HTML语言中表格、表单分别有什么作用？
答：表格是使显示规范，而表单用于提交数据
（4）层叠样式表CSS的主要作用是改变什么？
答：层叠样式表CSS主要用于改变数据的显示方式，不改变内容
（5）JavaScript语言和Java语言的主要区别有哪些？
答：使用变量不需要事先声明，变量没有类型的区别，java是面向对象的。JavaScript是基于对象的。
