文章目录

1 写在前面
2 HTML网页设计
2 CSS样式表
3 JavaScript脚本语言
3.1 JavaScript的基本语法

静态网页是指可以由浏览器解释执行而生成的网页，其开发技术主要有：HTML、JavaScript和CSS。
(1)HTML是一组标签，负责网页的基本表现形式；
(2)JavaScript是在客户端浏览器运行的语言，负责在客户端与用户的互动；
(3)CSS是一个样式表，起到美化整个页面的功能。

1 写在前面

1、静态网页是指没有后台数据库、不含程序、不可交互的网页。
2、静态网页是以htm或html结尾的html文件编写的。在程序设计中一般又把html网页称为静态网页。
3、HTML是Hypertext Markup Language的缩写，中文也就是超文本链接标示语言。
4、HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
5、相关的一系列技术：HTML、JavaScript和CSS。
（1）HTML：HTML是一组标签，负责网页的基本表现形式；
（2）JavaScript：JavaScript是在客户端浏览器运行的语言，负责在客户端与用户的互动。
（3）CSS：CSS是一个样式表，起到美化整个页面的功能。

2 HTML网页设计

2.1 HTML文档结构与基本语法

网页结构：

设计完成该网页的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>contentEditable Test</title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 直接指定contentEditable="true"表明该元素是可编辑的 -->
	<div contenteditable="true" style="width: 500px;border: 1px solid black">
		疯狂Java讲义
		<!-- 该元素的父元素有contentEditable="true"属性，因此该表格也是可编辑的 -->
		<table style="width: 420px;border-collapse: collapse;" border="1">
			<tr>
				<td>疯狂Java讲义</td>
				<td>疯狂Android讲义</td>
			</tr>
			<tr>
				<td>轻量级Java EE企业应用实战</td>
				<td>经典Java EE企业应用实战</td>
			</tr>
		</table>
	</div>
	<hr>
	<!-- 这个表格默认是不可编辑的，双击之后该表格变为可编辑状态 -->
	<table id="target" ondblclick="this.contentEditable=true;" style="width: 420px;border-collapse: collapse;" border="1">
		<tr>
			<td>HTML 5</td>
			<td>Ruby</td>
		</tr>
		<tr>
			<td>C/C++</td>
			<td>Python</td>
		</tr>
	</table>
</body>
</html>

2.1.1 HTML标记

用HTML编写的超文本文档称为HTML文档（文件），是一个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名，可供浏览器解释执行的网页文件。

网页文件是利用HTML所规定的标签定义网页中的各种元素的性质和特点，从而完成网页所要求的功能。

1、标签的分类（类型）
在网页上要展示的不同元素，需要采用不同的标签给出定义和说明。主要有：
（1）定义网页结构的标签；
（2）定义网页头部的标签；
（3）定义网页网体内容的标签，该类标签中主要包含：
|——文字、行、段落、列表标签；
|——表格、图形；
|——超链接、视频、音频；
|——表单。
（4）标签的使用格式
标签有单表和双标签。示例如下：

<!-- 单标签：例如，换行标记 -->
<br/>
<!-- 双标签：例如，标题标记 -->
<h1 属性及其属性值>内容</h1>

2、标记的属性
基本语法：<标记名称属性名1="属性值" 属性名2="属性值" ….. >
语法说明：属性应写在首标记内，并且和标记名之间有一个空格分隔。
例如：标记<hr>的作用是在网页中插入一条水平线，但是，要绘制什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜色的限制，就需要标记的属性。 <hr size="5px" align="center" color="blue" width="80%">，其中：align为属性，center为属性值（表示居中）；color为颜色属性，其属性值为blue（蓝色）；size为字体大小属性，其属性值为5px。

3、注释标记
注释标记用于在HTML源码中插入注释。注释会被浏览器忽略。
基本语法：

2.2 HTML基本标记与使用

2.2.1 结构标签

<html>
<head>
	<title></title>
</head> 
<body>
	<!-- 主体部分代码 -->
</body>
</html>

示例：

2.2.2 文本与段落标记

2.2.3 列表标签

列表标签分两类：有序标签和无序标签。
（1）有序列表标记：<ol></ol>
|——格式：

<ol type="序号类型">
<li>...</li>
<li>...</li>
...
</ol>

<ul type="类型样式">
<li>...</li>
<li>...</li>
...
</ul>

其中，属性TYPE指定列表项前的项目符号的样式，其取值为
|——disc：实心圆点（默认值）；
|——circle：空心圆点；
|——square：实心方块。

示例：

<html>
	<head>
		<title>有序列表与无序列表</title>
	</head>
	<body>
		<b>班级新闻</b>
		<ul type="disc">
			<li>最新课程表</li>
			<li>关于普通话考试的通知</li> 
			<li>div+css高级应用学习</li>
		</ul>
		<hr width="100%" size="1" color="red"> 
		<strong>报名</strong>
		<ol type="A">
			<li>报名时间：3月16—21 日。</li>
			<li>报名地点：所在院系办公室。</li>
			<li>报名费用：按物价局规定85元/人/次（含培训费用），报名时交齐。</li> 
		</ol>
	</body>
</html>

2.2.4 超链接标签

超链接是指从一个对象指向另一个对象的指针，它可以是网页中的一段文字也可以是一张图片。实现从一个页面到另一个页面的跳转。
格式：<a href="url" >超链接名称或图片</a>，其中属性href为指定链接的目标（另一个网页的路径）。

2.2.5 图片标记

格式：<img src="url" height="" width ="">
其中，属性src：指定图像源的URL路径，alt：替代文本，height：图片的高度，width：图片的宽度。
示例：

<html>
	<head>
		<title>超链接页面</title>
	</head>
	<body>
		<h4>超链接标签的使用</h4>
		<a href="http://www.mount-tai.com.cn/nature.shtml" >泰山风景介绍</a>
		<hr width="100%" size="1" color="red">
		<h4>图片链接标记的使用</h4>
		<a href="http://www.mount-tai.com.cn/nature.shtml" >
			<img src="image/taishan.jpg" width="80px" height="80px" alt="请点击该图片">
		</a> 
		<br/> 泰山风景介绍 
	</body>
</html>

2.2.6 定时刷新或跳转

（1）定时自刷新
基本语法：<meta http-equiv="refresh" content="1" />，该语句表示，页面每隔一秒刷新一次，其中属性content的值，代表间隔的时间。
（2）定时自动跳转，
基本语法：<meta http-equiv="refresh" content="3;url=http://www.sohu.com" />，该语句表示，页面3秒后自动转到搜狐主页。

注意：上述标签一般放在head标签中。

2.2.7 表格

表格由行、列、单元格组成，一个表格是由<table>、<tr>、<td>或<th>标记来定义的，分别表示表格、表格行、单元格。
（1）基本语法：

<table>
	<caption>表格标题</caption>
	<tr><th>列名一</th><th>列名二</th>...</tr>
	<tr><td>数据一</td><td>数据二</td>...</tr>
</table>

（2）表格属性（<table>属性）

示例：

<html>
	<head>
		<title>表格标记举例</title>
	</head>
	<body>
		<table width="70%" border="1" align="center">
			<tr>
				<th colspan="3">期中成绩表</th>
			</tr>
			<tr>
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
			</tr>
			<tr>
				<td>张三</td>
				<td colspan="2">100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>98</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王晓彬</td>
				<td rowspan="2">97</td>  
				<td>78</td>
			</tr>
			<tr>
				<td>成大才</td>
				<td>94</td>
			</tr>
		</table>
	</body>
</html>

2.3 HTML表单标签与表单设计

表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。

2.3.1 form标记及其属性

表单使用<form>和</form>来定义的，<form>标记有属性：name、method、action、target等属性。
语法格式：

<form name="表单名" method="提交方法" action="处理程序">
...
</form>

其中，属性name是表单对象名称。

2.3.2 input标记及其属性

基本语法：<input name="输入域名称" type="域类型" value="输入域的值">
<input>标记主要有六个属性：type，name，size，value，maxlength，check。其中，name和type是必选的两个属性。name：属性的值是响应程序（由form标记中的action属性指定）中的变量名。type的主要类型如下：

2.3.3 下拉列表框：select、option

在表单中，通过和标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。
基本语法：

<select name="" size="" multiple>
	<option value="" selected>...</option>
	<option value="">...</option>
	...
</select>

2.3.4 多行文本框textarea标记

基本语法：

<textarea name="" rows="" cols="" wrap="off|virtual|physical">
	初始值
</textarea>

其中：
|——rows设置输入域的行数；
|——cols设置输入域的列数；
|——wrap设置是否自动换行。

2.4 表单设计案例——学生入校注册页面设计

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>学生信息注册界面</title>
	<meta charset="utf-8">
</head>
<body>
	<h1 align="center">学生信息注册</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>姓名:</td>
				<td><input type="text" name="studentname" value="" /></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input>
				</td>
			</tr>
			<tr>
				<td>出生日期:</td>
				<td><input type="text" name="birthday" value="" />&emsp;按格式yyyy-mm-dd</td>
			</tr>
			<tr>
				<td>学校:</td>
				<td><input type="text" name="school" value="" /></td>
			</tr>
			<tr>
				<td>专业:</td>
				<td>
					<select name="major">
						<option value="ICS">信息与计算科学</option>
						<option value="CS">计算机科学</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>体育特长:</td>
				<td>
					<input type="checkbox" name="PE" value="篮球" />篮球&emsp;
					<input type="checkbox" name="PE" value="足球" />足球&emsp;
					<input type="checkbox" name="PE" value="排球" />排球&emsp;
					<input type="checkbox" name="PE" value="游泳" />游泳
				</td>
			</tr>
			<tr>
				<td>上传照片:</td>
				<td><input type="file" name="image" size="30" /></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password" value=""/></td>
			</tr>
			<tr>
				<td>个人介绍:</td>
				<td><textarea name="self-introduction" rows="5" cols="18" wrap="virtual"></textarea></td>
			</tr>
		</table>
		<input type="submit" value="submit" />&emsp;<input type="reset" value="reset" />
	</form>
</body>
</html>

2.5 HTML框架标签与框架设计

框架将浏览器窗口分割为几个窗口，下图就是一个框架，该框架被分为4个窗口。

2.5.1 窗口的分割与设置

分割框架的语法结构：

<frameset rows="高度1,高度2..." 或者 cols="宽度1,宽度2...">
	<frame src="网页1">
	<frame src="网页2">
	...
</frameset>

2.5.2 子窗口的设置

基本语法：< frame src="html文件的位置" name="子窗口名称" scrolling="yes或no或auto">

2.5.3 target属性

在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
target属性使用格式：<a href="目标网页地址“ target="显示目标网页的子窗口名字">超链接文字</a>

2.6 框架设计案例——多媒体播放系统设计

设计如图所示的页面，被划分为3个子窗口，上面的窗口为页面功能提示区，下左部分为不同类型播放的功能选项，下右部分为播放系统显示播放信息窗口。图示显示的是，当单击“图像显示”时，所显示的图像。
在这里插入图片描述将以下文件放在同一个目录中，运行main.html即可。
main.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>多媒体播放功能</title>
	<meta charset="utf-8">
</head>
<frameset rows="30%,70%">
	<frame src="index.html" name="index">
	<frameset cols="30%,70%">
		<frame src="src.html" name="src">
		<frame src="index.html" name="realize">
	</frameset>
</frameset>

</html>

index.html:

<h1 align="center">多媒体播放系统</h1>

src.html:

<a href="image.html" target="realize">图像显示</a><br/>
<a href="video.html" target="realize">视频播放</a><br/>
<a href="music.html" target="realize">音乐播放</a>

image.html

<img src="D:\Users\victor\Pictures\wallpaper\壁纸.png" width="980px" height="480px"/>

video.html:

<video src="D:\Users\victor\Downloads\某人的目光.mp4" controls="controls" type="video/mpeg">您的浏览器不支持 video 标签。</video>

music.html:

<audio controls="controls">
  <source src="D:\Users\victor\Music\P.S.我爱你 - A-Lin.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

2 CSS样式表

CSS是Cascading Style Sheets（层叠样式表），也就是通常说的样式表。CSS是一种美化网页的技术。

2.1 CSS样式表的定义与使用

定义选择器的基本语法：selector{属性:属性值;属性:属性值;......}
说明：
|——CSS选择器分为3种类型：
|————标记选择器，通过HTML标签定义选择器。
|————类别选择器，使用class定义选择器。
|————ID选择器，使用id定义选择器。
|——属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。例如：
|————p {background-color:blue;color:red} //定义标记p选择器
|————.cs1{font-family:华文行楷;font-size:15px} //定义类别选择器.csl
|————#cs2{color:yellow} //定义ID选择器#cs2

2.1.1 CSS样式表的定义

CCS样式表的定义实际就是定义CCS选择器。
1、标记选择器——通过HTML标签定义样式表
（1）基本语法格式：引用样式的对象{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
2、类别选择器——使用class定义样式表
（1）格式1：标签名.类名{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
（2）格式2：.类名{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
3、ID选择器——使用id定义样式表
（1）基本语法：#id名称{标签属性:属性值标签属性:属性值;标签属性:属性值;......}

2.1.2 样式表的使用

在HTML中使用CSS的方法有4种方式：行内式、内嵌式、链接式、导入式。
1、行内式：利用style属性直接为元素设置样式。
示例：

<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>
<p style="color:#000000;font-style:italic;">正文内容2</p>

2、内嵌式
需要先定义有关的选择器，然后再使用。利用<style>和</style>标签对，将样式表（选择器）定义在<head>和</head>标签对之间。
示例：

<html>
	<head>
		<title>页面标题</title>
		<style type="text/css">
			p{
				color:#0000FF;
				text-decoration:underline;
				font-weight:bold; 
				font-size:25px;
			}
			.info{
				font-size:12px;
				color:red;
			}
		</style>
	</head>
	<body>
		<p>这是第1行正文内容...</p>
		<p class="info">这是第2行正文内容...</p>
	</body>
</html>

3、链接式
将定义好的CSS单独放到一个以.css为扩展名的文件中，再使用<link>标签链接到所需要使用的网页中，在<head>与</head>之间。<link>标签链接到网页的格式：<link href="*.css文件路径" type="text/css" rel="stylesheet">
4、导入式
该方式与链接式方法类似，只是通过import导入到页面中。
import导入格式为：<style type="text/css">@import url(*.css文件路径);</style>

2.2 CSS常用属性

主要有字体属性、颜色属性、背景属性、文本段落属性等。

2.2.1 字体属性

2.2.2 颜色和背景属性

2.2.3 文本段落属性

2.3 案例——利用CCS对注册页面实现修饰

设计如图所示的注册网页，该页面没有修饰，不够美观，采用CCS修饰页面，重新设计页面。
在这里插入图片描述

第1步：按所给出的原始界面，设计HTML文档；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>注册界面</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>填写注册信息</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>用户名:*</td>
				<td><input type="text" name="studentname" /><span>用户名由字母开头，后跟字母、数字或下划线！</span></td>
			</tr>
			<tr>
				<td>密码:*</td>
				<td><input type="password" name="password1" /><span>设置登录密码，至少6位！</span></td>
			</tr>
			<tr>
				<td>确认密码:*</td>
				<td><input type="password" name="password2" /><span>请重新输入你的密码！</span></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input><span>请选择你的性别!</span>
				</td>
			</tr>
			<tr>
				<td>邮箱地址:*</td>
				<td><input type="text" name="email" />请填写您的常用邮箱，可以用此邮箱找回密码!</td>
			</tr>
			<tr>
				<td>基本情况: </td>
				<td><textarea name="self-introduction" rows="5" cols="50" wrap="physical"></textarea></td>
			</tr>
		</table>
		<input type="radio" name="agreement" />我已经仔细阅读并同意用户使用协议<br/>
		<input type="submit" value="submit" />&emsp;<input type="reset" value="reset" />
	</form>
</body>
</html>

第2步：设计CCS文档。在该文档中包含所需要的格式控制，从而形成修饰后的页面；

h1{
	text-align:center;
	color:orange;
}

table tr span{
	color:red;
}

form span{
	color:blue;
}

.input{
	text-align:center;
}

第3步：利用CSS文档中定义的样式重新设计原始网页，形成新网页。
在第一步中添加<link href="style.css" type="text/css" rel="stylesheet">

3 JavaScript脚本语言

JavaScript是一种脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。

JavaScript代码可以直接嵌套在HTML网页中，它响应一系列的事件，当一个JavaScript函数响应的动作发生时，浏览器就执行对应的JavaScript代码。

3.1 JavaScript的基本语法

1、数据类型
JavaStript有主要数据类型有：int、float、string（字符串）、boolean、null(空类型)。
2、变量
（1）变量声明，格式：var 变量名=值;（变量声明可以省略）
（2）数组的声明：数组的声明有三种方式
|——var array1=new Array(); //array1是一个默认长度的数组
|——var array2=new Array(10); //array2是长度为10的数组
|——var array3=new Array(" aa",12,true); //array1是一个长度为3的数组，且元素类型不同
3、运算符
在JavaScript中提供了算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符。这些运算符与Java语言中的支持的算符运算符及其功能相同。
4、控制语句
JavaScript中的控制语句有：分支语句（if、switch），循环语句（while 、do-while、for），这些语句的语法规则和使用与java语言中的要求一样。
5、函数的定义和调用
在JavaScript中，函数需要先声明定义，然后再调用函数。在JavaScript定义函数，有两种实现方式：
（1）在Web页面中直接嵌入JavaScript；
（2）链接外部JavaScript文件。

3.2 JavaScript的事件

在浏览器中网页与客户的交互都是通过“事件”引发的，当一个事件发生时，例如“用户单击某个按钮”，浏览器认为在这个按钮上发生了一个click事件，然后根据该按钮所定义的事件处理函数，执行相应的JavaSript脚本。

3.2.1 JavaScript的事件

3.2.2 在HTML中引用（指定）事件处理函数

在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。
使用格式：<标签各有关属性及其属性值 on事件名称="函数名称(参数)">
示例：通过input输入标签，引发一个单击事件，该事件的处理函数名是onClick()，其要完成的功能是通过函数test()实现的，而函数test()的功能是显示一个提示窗口（由windows的alert方法完成），并提示“事件引发一操作，并成功执行了这个操作！”。

<html>
	<head> 
		<title>单击按钮事件示例</title>
		<script language="javascript">
			function test(){
			window.alert("事件引发一操作，并成功执行这个操作！");
			}
		</script> 
	</head>
	<body>
		<form action="">
			<input type="Button" value="警告对话框" onclick="test()"><br/>  
		</form> 
	</body>
</html>

3.3 JavaScript的对象

JavaScript中设有内置对象，常用的内置对象：String，Date；浏览器的文档对象：window 、navigator、screen、history、location、 documen等对象。

3.3.1 window对象属性常用方法

3.3.2 location对象

Location对象实现网页页面的跳转。在HTML中使用标记<a>和</a>来实现页面的跳转，在JavaScript中，利用location对象实现页面的自动跳转。使用格式：window.location.href="网页路径";
例如：跳转到搜狐网页：window.location.href="http://www.sohu.com";

3.3.3 history对象

history对象可以访问浏览器窗口的浏览历史，通过go、back、forward等方法控制浏览器的前进和后退。

3.3.4 document对象

每个HTML文档被加载后都会在内存中初始化一个document对象，该对象存放整个网页HTML内容，从该对象中，可获取页面表单的各种信息。
1、获取表单域对象
获得表单域对象的主要方法：通过表单访问、直接访问。假设有表单：

<form action="" name="form1">
	<input type="text" name="t1" value="">
</form>

则获取输入域对象：
（1）通过表单访问
|——var fObj=document.form1.t1;
|——var fObj=document.form1.elements["t1"]
|——var fObj=document.forms[0].t1;
（2）直接访问
|——var fObj=document.getElementsByName("t1")[0]
|——var fObj=document.getElementsById("t1");
|——var fObj=document.all("t1").value
2、获取表单域的值
由于表单域类型不同，其获取表单域值的方法也不同，常用的方法有(若表单域对象为fObj)：
（1）获取文本域、文本框、密码框的值
|——var v=fObj.value;
（2）获取复选框的值
|——例如：对于如下的一组复选框：

<input type="checkbox" name="c1" value="1"/>
<input type="checkbox" name="c1" value="2"/>

利用JavaScript取值的方法：

var fObj=document.form1.c1; //form1为表单的名字
var s="";
for(var i=0;i<fObj.length;++i){
	if(fObj[i].checked==true){
		s=s+fObj[i].value;
	}
}

（3）获取单选按钮的值
例如：对于如下的一组单选按钮：

<input type="radio" name="p" checked/>加
<input type="radio" name="p"/>减

利用JavaScript取值的方法如下：

var fObj=document.form1.p;     //form1为表单的名字
for(var i=0;i<fObj.length;++i){
	if(fObj[i].checked){
		break;
	}
}
switch(i){
case 0:...;break;
case 1:...;break;
case 2:...;break;
case 3:...;

（4）获取列表框的值
|——对于单选列表框，用如下方法取出值：

var index=fObj.selectedIndex; //fObj为列表对象，取出所选项的索引，索引从0开始
var val=fObj.options[index].value; // 取出所选项目的值

|—— 对于多选列表，取值需要循环：

var fObj=document.form1.s1;   //form1为表单的名字
var s="";
for(var i=0;i<fObj.options.length;++i){
	if(fObj[i].options[i].selected==true){
		s=s+fObj.options[i].value;
	}
}

3.4 案例——JavaScript实现输入验证

根据图所给出的不同信息的输入要求，利用JavaScript进行表单数据有效性验证，当不符合要求时，通过警告框，给出提示，并重新输入。

【分析】输入表单的验证就是对表单中输入的数据进行检验，如果表单中填入的数据不符合要求，则禁止提交，并给用户适当的提示信息，以便用户重新输入。只有当所有输入的数据符合所要求后，才允许提交，并进入表单标签的action属性所指定的处理程序，即：<form action="提交后，进入的处理页面">。
（1）需要验证的表单输入域和要求：
|——用户名：用户名是否为空，是否符合规定的格式（用户名由字母开头，后跟字母、数字或下划线！）；
|——密码：密码长度是否超过6，两次密码输入是否一致。
|——邮箱地址：邮箱地址必须符合邮箱格式。
（2）必须注意提交表单并实现输入验证的方式
提交方式为：<input type="button" value="提交" onClick="响应函数">，另外，在验证函数中，当都满足格式后，实现提交：document.forms[0].submit();
代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>注册界面</title>
	<meta charset="utf-8">
	<link href="style.css" type="text/css" rel="stylesheet">
	<script>
		function test(){
			var username = document.getElementsByName('username')[0].value;
			var password1 = document.getElementsByName('password1')[0].value;
			var password2 = document.getElementsByName('password2')[0].value;
			var email = document.getElementsByName('email')[0].value;
			var n=0;
			var regusername = /[a-zA-Z][\w]+$/;
			var regemail = /[a-zA-Z0-9][\w]+@[a-zA-Z]+[\\.](com|org|cn)$/;
			if(!regusername.test(username)){
				document.getElementById('usernameError').innerHTML='用户名格式错误';
			}else{
				document.getElementById('usernameError').innerHTML='';
				n = n + 1;
			}
			if(password1.length < 6){
				document.getElementById('password1Error').innerHTML='密码少于6位';
			}else{
				document.getElementById('password1Error').innerHTML='';
				n = n + 1;
			}
			if(password1!=password2){
				document.getElementById('password2Error').innerHTML='前后密码不一致';
			}else{
				document.getElementById('password2Error').innerHTML='';
				n = n + 1;
			}
			if(!regemail.test(email)){
				document.getElementById('emailError').innerHTML='邮箱格式错误';
			}else{
				document.getElementById('emailError').innerHTML='';
				n = n + 1;
			}
			if(n == 4){
				document.foms[0].submit;
			}
		}
		function testreset(){
			document.getElementById('usernameError').innerHTML='';
			document.getElementById('password1Error').innerHTML='';
			document.getElementById('password2Error').innerHTML='';
			document.getElementById('emailError').innerHTML='';
		}
	</script>
</head>
<body>
	<h1>填写注册信息</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>用户名:*</td>
				<td><input type="text" name="username" /><span>用户名由字母开头，后跟字母、数字或下划线！</span><strong id='usernameError'></strong></td>
			</tr>
			<tr>
				<td>密码:*</td>
				<td><input type="password" name="password1" /><span>设置登录密码，至少6位！</span><strong id='password1Error'></strong></td>
			</tr>
			<tr>
				<td>确认密码:*</td>
				<td><input type="password" name="password2" /><span>请重新输入你的密码！</span><strong id='password2Error'></strong></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input><span>请选择你的性别!</span>
				</td>
			</tr>
			<tr>
				<td>邮箱地址:*</td>
				<td><input type="text" name="email" /><span>请填写您的常用邮箱，可以用此邮箱找回密码!</span><strong id='emailError'></strong></td>
			</tr>
			<tr>
				<td>基本情况: </td>
				<td><textarea name="self-introduction" rows="5" cols="50" wrap="physical"></textarea></td>
			</tr>
		</table>
		<div class="input">
			<input type="radio" name="agreement" /><span>我已经仔细阅读并同意用户使用协议</span><br/>
			<input type="button" value="submit" onclick="test()"/>&emsp;<input type="reset" value="reset" onclick="testreset()" />
		</div>
	</form>
</body>
</html>

原文链接：https://blog.csdn.net/weixin_43762330/article/details/105923678