Java Web基础
目录
Java Web基础
HTML基础
| 标记 | 说明 |
| <h#></h#> | 标题标记，#=1,2,3,4,5,6，定义了6级标题，每级标题的字体大小依次递减， 属性align设定对齐方式：center：居中；left：左对齐（默认）；right：右对齐 |
| <b></b> | 黑体标记 |
| <i></i> | 斜体标记 |
| <strong></strong> | 加重文本标记（通常是斜体加黑体） |
| <font></font> | 字体标记：size属性，设置字体大小，取值从1到7；color属性，设计字体颜色，使用名字常量或RGB的十六进制值，face属性，设计字体字型，例如“宋体”、“楷体”等 |
| <p></p> | 段落标记：属性align指定对齐方式。 |
| <hr/> | 水平分隔线标记：属性width设置线的长度（单位像素），size设置线的粗细（单位像素），color设置线的颜色，align设置对齐方式 |
| <br/> | 插入一个回车换行符 |
列表标签分两类：有序标签和无序标签。
（1）有序列表标记：<ol></ol>
格式：<ol type="序号类型">
<li>…….</li>
<li>……</li>
…………..
</ol>
其中，属性type指定列表项前的项目编号的样式，其取值：
“1”：编号为阿拉伯数字（默认值）；
“a”：小写英文字母；
“A”：大写英文字母；
“i”：小写罗马数字；
“I”：为大写罗马数字。
（2）无序列表标记：<ul></ul>
格式：
<ul type="类型样式">
<li>…….</li>
<li>……</li>
…………..
</ul>
其中：
属性TYPE指定列表项前的项目符号的样式，其取值为
disc：实心圆点（默认值）；
circle：空心圆点；
square：实心方块。
超链接标签:
格式：
<a href="url" >超链接名称或图片</a>
其中：
属性href：指定链接的目标（另一个网页的路径）
图片标记:
格式：
<img src="url" height="" width ="">
其中：
属性src：指定图像源的URL路径
alt：替代文本；
height：图片的高度；
width：图片的宽度。
例：
<a href="http://www.mount-tai.com.cn/nature.shtml" >泰山风景介绍</a>
<a href="http://www.mount-tai.com.cn/nature.shtml" >
<img src="image/taishan.jpg" width="80px" height="80px"
alt="请点击该图片">
</a>
定时刷新或跳转：
1）定时自刷新：
基本语法：
<meta http-equiv="refresh" content="1" />
该语句表示，页面每隔一秒刷新一次，其中属性content的值，代表间隔的时间。
（2）定时自动跳转：
基本语法：
<meta http-equiv="refresh"
content="3;url=http://www.sohu.com" />
该语句表示，页面3秒后自动转到搜狐主页。
注意：上述标签一般放在head标签中。
表格：
表格由行、列、单元格组成，一个表格是由<table>、<tr>、<td>或<th>标记来定义的，分别表示表格、表格行、单元格。
（1）基本语法：
<table>
<caption>表格标题</caption>
<tr><th>列名一</th><th>列名二</th>…...</tr>
<tr><td>数据一</td><td>数据二</td>…...</tr>
……
</table>
表格属性（<table>属性）：
| 属性 | 用途 | 属性 | 用途 |
| width | 表格宽度 | cellpadding | 边距 |
| height | 表格高度 | cellspacing | 间距 |
| align | 表格水平对齐方式 | bgcolor | 表格背景颜色 |
| border | 表格边框厚度 | background | 表格背景图像 |
例：
<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>
HTML表单标签与表单设计：
表单是由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。
表单使用<form>和</form>来定义的，<form>标记有属性：name、method、action、target等属性。
语法格式：
<form name="表单名" method="提交方法" action="处理程序">
………..
</form>
基本语法：
<input name="输入域名称" type="域类型" value="输入域的值">
<input>标记主要有六个属性：
type，name，size，value，maxlength，check。
type主要有10种类型：增加<input type=“button”>：
| 名称 | 格式 | 说明 |
| 文本域 | <input type="text" name="文本字段名称" maxlength=" " size=" " value=" "> | size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数 |
| 密码域 | <input type="password" name="密码字段名称" size=" " maxlength=" " value=" " > | 当用户输入密码时，区域内将会显示“*”号代替用户输入的内容 |
| 单选按钮 | <input type="radio" name=" " value=" " checked /> | checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时，设置相同的name值 |
| 复选框 | <input type="checkbox" name=" " value=" " checked /> | checked属性用来设置该复选框默认状态是否被选中，当有多个复选框时，可设置相同的name值，也可以设置不同的name值 |
| 提交按钮 | <input type="submit" name=" " value=" "/> | 将表单内容提交给服务器的按钮 |
| 取消按钮 | <input type="reset" name=" " value=" "/> | 将表单内容全部清楚，重新填写的按钮 |
| 图像按钮 image | <input type="image" src="图片"/> | 使用图像代替submit按钮，图像的源文件名由src属性指定 |
| 文件域 | <input type="file" name=" " size=" " maxlength=" "> | 上传文件 |
| 隐藏域 | <input type="hidden" name=" " value=" " /> | 用户不能在其中输入信息，用来预设某些要传递的信息 |
下拉列表框：<select>、<option>：
在表单中，通过<select>和<option>标记可设计一个下拉式的列表或带有滚动条的列表，用户可以在列表中选中一个或多个选项。
基本语法：
<select name="" size="" multiple>
<option value="" selected>…</option>
<option value="">…</option>
……
</select>
多行文本框<textarea>标记：
基本语法：
<textarea name="" rows="" cols="" wrap="off|virtual|physical">
初始值
</textarea>
其中：
rows设置输入域的行数，
cols设置输入域的列数，
wrap设置是否自动换行。
例：
HTML框架标签与框架设计：
框架将浏览器窗口分割为几个窗口
1.窗口的分割与设置
分割框架的语法结构：
<frameset rows="高度1,高度2…"
或者 cols="宽度1,宽度2…">
<frame src="网页1">
<frame src="网页2">
…
</frameset>
2.子窗口的设置
基本语法：
< frame src="html文件的位置"
name="子窗口名称" scrolling="yes或no或auto">
3. target属性
在框架结构子窗口的HTML文档中如果含有超链接，当用户点击该链接时，目标网页显示的位置由target属性指定，若没有指定则在当前子窗口打开。
target属性使用格式：
<a href="目标网页地址“
target="显示目标网页的子窗口名字">超链接文字</a>
例：
HTML补充
补充一些标记
- <pre></pre>:保留文本原始排版方式
- <u>…</u> :下划线 <s>…</s>：删除线
- <sup>…</sup>:上标 <sub>…</sub>：下标
(4) <center>…</center>：内容居中
<blockquote>:右缩进
<nobr>:强制不换行
(5)特殊字符：
<：< ; ×：×
>：> §：§
&：& ©：©
“：" ®：®
空格： （或用全角空格） ™：™(6)定义列表，常用于解释名词
<dl>
<dt>名词1</dt><dd>解释1</dd>
<dt>名词2</dt><dd>解释2</dd>
。。。
</dl>
(7)body标签的属性
bgcolor=“#xxxxxx”：背景颜色
background=“背景图片”
text=“文本颜色”
link：链接字体颜色
vlink：访问过后的链接字体颜色
alink：设定鼠标正在单击链接时的颜色
topmargin,leftmargin:body距浏览器边界的距离。
(8)链接标签的href属性的几种形式：
内部链接：链接至同一个web应用下的其他文件，使用相对地址。
书签链接：链接至一个文件的某个位置处。
建立书签：<a name=“书签名称”/>
链接至书签：<a href=“文件名#锚记名”>
链接至同一文件时，文件名可以省略。
例：书签例子
外部链接
http://,ftp://,telnet://,mailto://,提供下载功能
脚本链接
javascript:javascript函数或语句。
空链接
“#”
(9)链接标签的target属性的取值：
_blank：链接在新窗口中显示
_parent：链接在父窗口中显示，用在框架中。
_self：链接在自身窗口中显示，它是target的默认值。
框架名称：链接在指定名字的框架中显示，用在框架中。
_top：链接在顶层窗口中显示，将忽略所有框架。
(10)图像地图：将图像划分成不同区域进行链接设置
<img src=“图像地址” usemap=“#对照表名称”/>
<map name=“对照表名称” id=“对照表名称”>
<area shape=“热区形状” coords=“热区坐标” href=“链接地址”>
。。。
</map>
由于热区坐标比较复杂难于控制，一般需要借助可视化软件进行设置。
(11)除了表格设计标签外，还有些标签表示表格结构，如：
<thead>:表头 <tbody>:表主体 <tfoot>:表尾
可对它们的显示格式单独进行设置。
它们常用属性如：bgcolor，align，valign等。
(12)内部框架iframe：
可以在一个页面定义一个区域用于显示另一个页面内容 ，同frame有相似之处。
<iframe src=“文件” width=“宽度” height=“高度”
name=“框架名称” scrolling=“auto|yes|no“
frameborder=“0|1”>
</iframe>
例：frame和iframe
(13)网页元素分组
<fieldset>
<legend>标题1</legend>
内容1
</fieldset>
<fieldset>
<legend>标题2</legend>
内容2
</fieldset>
(14)层标记：用来命名网页中特定内容，经常和css，javascript结合实现网页布局和一些动态效果。
层标签<div|span id=“层编号”>
<div>（division）是块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。由于是块级元素，在段落开始、结束处会插入一个换行。
和<div>不同，<span>是一个行内元素，不会引起换行。它是一个逻辑化的内嵌分组元素。最常见的使用方式是用它来为一段文本中的几个单词甚至某几个字符指定样式。与span类似的标签:
<label id=“标签名”>。。</label>
层的属性
id,left,top,width,height,visibility, background,bgcolor,z-index, overflow,clip,display
(15)滚动字幕
<marquee direction=“up|down|left(默认)|right"
behavior=“scroll|slide|alternate"
scrollamount=“文字每次移动的长度（像素）”
scrolldelay=“两步间的时间间隔(毫秒)"
loop=“循环次数” bgcolor=“背景颜色"
width=“宽度” height=“高度”
hspace=“距周围水平距离” vspace=“距周围垂直距离”
οnmοuseοver="this.stop()" οnmοuseοut="this.start()“
>
要滚动的文字
</marquee>
(16)多媒体标记
背景音乐：
<bgsound src=“音乐文件名” loop=“循环次数”/>
loop设置为-1，可循环播放。
添加多媒体文件(音频，视频，flash等)
<embed src=“文件名” loop=“是否循环”
hidden=“是否隐藏播放面板” autostart=“是否自动播放”/>
说明：有时考虑到兼容性，添加多媒体文件时还使用object标签，并将embed标签嵌入其中，object标签可通过可视化软件生成，不再详述。
(17)基底网址标记：设置相对链接地址的基底地址及打开方式。
<base href=“” target=“”>该标记写在head标记内。
(18)元信息标记<meta>：用于定义页面元信息，也就是指定一些name-value对。该标记也写在head标记内。包含属性：
http-equiv：用于指定元信息名称，该属性指定的名称具有特殊意义。
name：用于指定元信息名称，可随意指定。
content：用于指定元信息的值。
例1：教材中的页面定时刷新，跳转。
<meta http-equiv="refresh" content="1" />
<meta http-equiv="refresh" content="3;url=http://www.sohu.com" />
例2：禁用页面缓存：
<meta http-equiv ="Pragma" content ="no-cache">
<meta http-equiv ="Cache-Control" content="no-cache">
<meta http-equiv ="Expires" content ="0">
例3：设置网页内容类型及字符编码
<meta http-equiv=“Content-Type”
content=“text/html;charset=UTF-8”/>
例4：设置页面关键字，描述,作者 等。
<meta name=“keyword” content=“”/>
<meta name=“description” content=“”/>
<meta name=“author” content=“”/>
关于HTML5
目前HTML已经升级到HTML5版本(2010年)，HTML5是近十年来Web开发标准最巨大的飞跃。和以前版本不同，HTML5不仅用来表示Web内容，而且在HTML5上，视频、音频、图像、动画以及同计算机的交互都被标准化了。
（要说明的是，测试HTML5实例，要安装支持HTML5的浏览器，如新版本的IE(IE9以上)，FireFox，谷歌浏览器等。）
同HTML4比较，HTML5语法发生了较大变化，新增和废除了一些标签和属性，提供简单而强大的HTML5 API，以浏览器原生能力替代复杂的JavaScript代码，减少了对外部插件的需求。
例如：
(1)为了使文档更加清晰，容易阅读，增加了很多新的结构元素。
(2)吸纳了WEB FORM 2.0的标准，大大强化了表单元素的功能，使表单的开发更快捷、方便。
(3)新增了两个与表单元素相关的API：文件API和拖放API，可以实现一些有趣的功能。
(4)提供音频、视频标准接口，播放它们不再需要安装插件。
(5)提供canvas元素，可以在页面上绘制图形图像。
(6)改善了cookie存储机制，提供Web Storage存储机制及本地数据库功能。
(7)提供API支持离线应用程序开发。
(8)使用Web Worker实现Web平台上的多线程处理功能。
。。。
HTML5实例
（1）基本结构
<!doctype html>
<html>
<head>
<meta charset=“UTF-8" />
<title></title>
</head>
<body>
Html5实例
</body>
</html>
说明：红色部分是同html4不同之处，要使用html5标记，必须进行“<!doctype html>”声明，浏览器通过判断有没有这个声明，来决定解析器和渲染类型是否切换成html5模式。<meta charset=“UTF-8” />用来设置字符编码。
(2)表单元素
<input type="text" placeholder="请输入用户名"/>
请输入姓名<input type="text" list="nl" />
<datalist id="nl">
<option>张三</option>
<option>李四</option>
<option>王五</option>
</datalist>
<form>
<input type="email"/>
<input type="date"/>
<input type="number" min="0" max="100" step="5"/>
<input type="submit" value="提交"/>
</form>
（3）多媒体标签
<audio src=“音频文件” autoplay=“是否自动播放”>
<video src=“音频文件” autoplay=“是否自动播放”>
(4)利用canvas元素绘图
<!DOCTYPE HTML>
<html>
<body><canvas id="myCanvas">HTML5 图形</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 180, 200);
ctx.strokeStyle = "red";
ctx.strokeRect(40, 30, 50, 50);
</script>
</body>
</html>
效果：
CSS基础
CSS的处理思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。
因此，概括来说，CSS就是由3个基本部分—“对象”，“属性”和“值”组成的。
在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（Selector）。
定义选择器的基本语法：
selector{属性:属性值;属性:属性值;………}
（1）CSS选择器分为3种类型：
•标记选择器，通过HTML标签定义选择器。
•类别选择器，使用class定义选择器。
•ID选择器，使用id定义选择器。
（2）属性和值被冒号分开，属性之间用分号间隔，并由花括号包围。例如：
p{background-color:blue;color:red} //定义标记p选择器
.cs1{font-family:华文行楷;font-size:15px} //定义类别选择器.csl
#cs2{color:yellow} //定义ID选择器#cs2
（1）标记选择器——通过HTML标签定义样式表
标签名{属性:值; 属性:值; 属性:值;……}
（2）类别选择器——使用class定义样式表
格式1：标签名.类名{属性:值; 属性:值; 属性:值;……}
格式2：.类名{属性:值; 属性:值; 属性:值;……}
（3）ID选择器——使用id定义样式表
#id名称{属性:值; 属性:值; 属性:值;……}
在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为扩展名的文件中，在<head>与</head>之间使用<link>标签链接到所需要使用的网页中。
<link>标签链接到网页的格式：
<link href="*.css文件路径"
type="text/css"
rel="stylesheet">
例如：首先定义一个sheet_x.css文档：
h2{ color:#0000FF; }
p{ color:#FF0000; text-decoration:underline;font-weight:bold; font-size:15px;}
其次，在HTML中使用：
<html>
<head>
<title>页面标题</title>
<link href="sheet_x.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>这是正文内容1……</p>
</body>
</html>
（4）导入式：
该方式与链接式方法类似，只是通过import导入到页面中。
import导入格式为：
<style type="text/css">
@import url(*.css文件路径);
</style>
Css的继承特性、层叠特性：
继承特性：
子标记自动继承父标记的属性设置。
层叠特性：
当属性设置冲突时优先级遵循以下原则：
(1)行内>内嵌>链接
(2) id>类别>标记
(3)同级的，后面的值会覆盖前面的。
CSS常用属性：
主要有字体属性、颜色属性、背景属性、文本段落属性等。
- 字体属性：
| 属性名 | 属性含义 | 属性值 |
| font-family | 字体 | 字体类型（如“宋体”） |
| font-size: | 字体大小（字号） | 取值单位：pt（点数），例“12pt” |
| font-style | 字体风格 | normal（普通，默认值），italic斜体，oblique中间状态 |
| font-weight | 字体加粗 | normal（普通，默认值），bold（一般加粗），bolder（重加粗），lighter（轻加粗），number:100-900之间的加粗 |
| font | 字体复合属性 | 用来简化css代码，可以取值以上所有属性值，之间用空格分开 |
2．颜色和背景属性：
| 属性名 | 属性含义 | 属性值 |
| color | 颜色 | （颜色值是英文名称或16进制RGB值）例，red为#ff0000） |
| background-color | 背景颜色 | 同color属性 |
| background-image | 背景图像 | none:不用背景；url：图像地址 |
| background-position | 背景图片位置 | top，left，right，bottom，center等 |
| background | 背景复合属性 | 简化css代码，可取值以上所有属性值，之间用空格分开 |
3．文本段落属性：
| 属性名 | 属性含义 | 属性值 |
| text-decoration | 文字修饰 | none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁 |
| vertical-align | 垂直对齐 | baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐 |
| text-align | 水平对齐 | left,right,center,justify:两段对齐 |
| text-indent | 文本缩进 | 缩进值（长度或百分比 |
| line-height | 文本行高 | 行高值（长度，倍数，百分比） |
| white-space | 处理空白 | normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象 |
CSS补充
伪类选择器：
除了标签、类、id选择器外，还有一种特殊的选择器，可以为特定网页元素(如链接)的特定状态(如active，hover等)设置样式。
常用伪类选择符：
a:link, a:visited ,a:hover, a:active
例：
<html>
<head>
<style>
a:hover {
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">跳转百度</a>
</body>
</html>
每当鼠标停放在网址上时变换属性如下：
选择器的复合：
选择器除了单独使用外，还可以进行复合，常见的复合选择器有：交集选择器、并集选择器、后代选择器。
(1)交集选择器：
由两个选择器直接连接构成，其结果是两个选择器定义的元素的交集。
第一个选择器必须是标记选择器,第二个必须是类别选择器或id选择器。两个选择器间不能有空格，必须连续书写。
例：
<style type="text/css">
p {
color: blue;
}
/* 标签选择器 */
.special {
color: green;
}
/* 类选择器 */
p.special {
color: red;
}
/* 复合选择器 */
</style>
<body>
<p>普通段落文本（蓝色）</p>
<p class="special">指定了.special类别的段落文本（红色）</p>
<h3 class="special">指定了.special类别的标题文本（绿色）</h3>
</body>
(2)并集选择器：
多个选择器通过逗号连接，表示多个选择器共用一种样式。 如：
<style type="text/css">
h1, h2, h3, h4, h5, p{color:blue;font-size:15px; }
</style>
(3)后代选择器：
外层选择器写在前面，内层选择器写在后面，中间用空格分隔。表示嵌套在外层元素的内层元素使用样式。可以多层嵌套。
例：
<style type="text/css">
p span {
color: red;
}
span {
color: blue;
}
</style>
<body>
<p>嵌套使<span>用CSS（红色）</span>标记的方法</p>
嵌套之外的<span>标记（蓝色）</span>不生效
</body>
注意：这里的后代不仅限于直接后代，也会影响到各级后代，如果只想
影响直接后代，可以使用子选择器：选择器之间用>分隔。
补充几组属性：
除了书上字体、背景、段落属性外，再补充几组属性，它们与CSS的盒子模型有关：
边距属性：Margin
可直接使用margin一次定义四个方向的边距：
如：margin{10px}:上右下左均为10。
margin{5px 10px}：上下为5，左右为10
margin{5px 10px 15px}:上5，左右10，下15
margin{5px 10px 15px 20px}:上5，右10，左15，下20
填充属性：Padding ：
可直接使用padding一次定义四个方向的填充。
边框属性（Border）：
可直接使用border一次定义边框的粗细，颜色，样式。
图文混排：
项目符号和编号：
注意display, visibility的区别。
例：
<html>
<head>
<style type="text/css">
table,
td {
border: 2px solid red;
border-collapse: collapse;
text-align: center;
padding: 10px;
font-weight: bold;
}
table {
margin: 0 auto;
}
body {
text-align: center;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3">星期一菜谱</td>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>红烧茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小葱豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>油焖大虾</td>
<td>海参鱼翅</td>
</tr>
<tr>
<td>红烧肉<img src="红烧肉.jpg" </td> <td>烤全羊</td>
</tr>
</table>
</body>
</html>
注意：
border-collapse CSS属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
例：border-collapse: collapse;
border-collapse: separate;
例：
<html>
<head>
<title>体验CSS</title>
<style type="text/css">
h1 {
color: white;
background-color: blue;
text-align: center;
padding: 15px;
}
img {
float: left;
border: 1px dashed #9999cc;
margin: 5px
}
p {
font-size: 12px;
text-indent: 2em;
line-height: 1.5;
padding: 5px;
}
body {
margin: 0px;
background-color: #ccccff;
}
#p1 {
border-right: 3px red double;
}
#p2 {
border-right: 3px orange double;
}
</style>
</head>
<body>
<h1>互联网发展的起源</h1>
<img src="cup.gif" width="128" height="128" />
<p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p>
<p>
20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。
</p>
</body>
</html>
JavaScript基础
JavaScript代码可以直接嵌套在HTML网页中(<script>与</script之间>)，它响应一系列的事件，当一个JavaScript函数响应的动作发生时，浏览器就执行对应的JavaScript代码。
JavaScript的基本语法 ：
1．数据类型
JavaScript基本数据类型有：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） 一是在页面中直接嵌入JavaScript：
<script>
function 函数名(参数列表){
函数体(返回值使用return语句)
}
</script>
（2）另一种是链接外部JavaScript文件：
<script src=“*.js”> </script>
JavaScript的事件：
在浏览器中网页与客户的交互都是通过“事件”引发的，当一个事件发生时，例如“用户单击某个按钮”，浏览器认为在这个按钮上发生了一个click事件，然后根据该按钮所定义的事件处理函数，执行相应的JavaScript脚本。
JavaScript的事件：
| 事件 | 事件处理函数名 | 何 时 触 发 |
| blur | onBlur | 元素或窗口本身失去焦点时触发 |
| change | onChange | 当表单元素获取焦点，且内容值发生改变时触发 |
| click | onClick | 单击鼠标左键时触发 |
| focus | onFocus | 任何元素或窗口本身获得焦点时触发 |
| keydown | onKeydown | 键盘键被按下时触发，如果一直按着某键，则会不断触发 |
| load | onLoad | 页面载入后，在window对象上触发；所有框架都载入后，在框架集上触发；<object>标记指定的对象完全载入后，在其上触发 |
| select | onSelect | 选中文本时触发 |
| submit | onSubmit | 单击提交按钮时，在<form>上触发 |
| unload | onUnload | 页面完全卸载后，在window对象上触发；或者所有框架都卸载后，在框架集上触发 |
在HTML中引用（指定）事件处理函数：
在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。
使用格式：
<标签 各有关属性及其属性值 on事件名称="函数名称(参数)">
例：
<script language="javascript">
function test(){
window.alert("事件引发一操作，并成功执行这个操作！");
}
</script>
<form action="">
<input type="Button" value="警告对话框"
οnclick="test()"><br/>
</form>
JavaScript的对象:
JavaScript中设有内置对象，常用的内置对象：String，Date和浏览器的文档对象：
window 、navigator、screen、history、location、 document等对象。
1. window对象:
| 方 法 | 描 述 |
| alert() | 弹出一个警告对话框 |
| confirm() | 显示一个确认对话框，单击“确认”按钮时返回true，否则返回false |
| prompt() | 弹出一个提示对话框，并要求输入一个简单的字符串 |
| setTimeout(timer) | 在经过指定的时间后执行代码 |
| clearTimeout() | 取消对指定代码的延迟执行 |
| setInterval() | 周期执行指定的代码 |
| clearInterval() | 停止周期性地执行代码 |
2. location对象:
Location对象实现网页页面的跳转。
在HTML中使用标记<a></a>来实现页面的跳转，在JavaScript中，利用location对象实现页面的自动跳转。
使用格式：
window.location.href="网页路径";
例如：
跳转到搜狐网页：
window.location.href="http://www.sohu.com";
3. history对象:
| 属性、方法 | 含义 |
| Length属性 | 浏览历史记录的总数 |
| go(index)方法 | 从浏览历史中加载URL，index参数是加载URL的相对路径，index为负数时，表示当前地址之前的浏览记录，index正数时，表示当前地址之后的浏览记录 |
| forward()方法 | 从浏览历史中加载下一个URL，相当于history.go(1) |
| back()方法 | 从浏览历史中加载上一个URL, 相当于history.go(-1) |
4. document对象:
每个HTML文档被加载后都会在内存中初始化一个document对象，该对象存放整个网页HTML内容，从该对象中，可获取页面表单的各种信息。
（1）获取表单域对象:
获得表单域对象的主要方法：通过表单访问、直接访问。
假设有表单：
<form action="" name= "form1" >
<input type="text" name= "t1" value="" >
</form>
则获取输入域对象：
① 通过表单访问
var fObj=document.form1.t1;
var fObj=document.form1.elements["t1
var fObj=document.forms[0].t1;
② 直接访问
var fObj=document.getElementsByName("t1")[0]
var fObj=document.getElementById("t1");
var fObj=document.all("t1").value
（2）获取表单域的值:
由于表单域类型不同，其获取表单域值的方法也不同，常用的方法有(若表单域对象为fObj)：
① 获取文本域、文本框、密码框的值
var v=fObj.value;
② 获取复选框的值
例如：对于如下的一组复选框：
<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;
}
③ 获取单选按钮的值
例如：对于如下的一组单选按钮：
<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: ……;
④ 获取列表框的值
对于单选列表框，用如下方法取出值：
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;
}
例：结合CSS，JavaScript实现学生注册界面：
<!-- 添加CSS美化 -->
<!-- 添加JavaScript进行动态交互，判断输入是否满足注册条件（格式问题） -->
JavaScript补充（例题）
1在网页上显示当前时间，一秒刷新一次。
<div id="time"></div>
<script>
setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay())",1000);
</script>
2在网页上显示当前日期, 星期。如果时间在6:00－12:00之间，输出“早上好”；如果时间在12:00－18:00，输出“下午好”；如果时间在18:00－24:00之间，输出“晚上好”；如果时间在0:00－6:00，输出“凌晨好”。
<script>
var dnow = new Date();
var s;
dyear = dnow.getFullYear();
dmonth = dnow.getMonth();
ddate = dnow.getDate();
dday = dnow.getDay();
dhours = dnow.getHours();
if (dhours >= 6 && dhours < 12)
s = "上午好";
else if (dhours >= 12 && dhours < 18)
s = "下午好";
else if (dhours >= 18 && dhours < 24)
s = "晚上好";
else if (dhours >= 0 && dhours < 6)
s = "凌晨好";
s = s + ",今天是" + dyear + "年" + (dmonth + 1) + "月" + ddate + "日 星期" + '日一二三四五六'.charAt(dday);
document.write(s);
</script>
3延迟执行某段代码，如让网页3秒钟后转到
<script >
window.setTimeout("location.href='http://www.baidu.com'",3000);
</script>
4四种网页对话框：
（1）window.alert(“”)
（2）window.confirm(“”),
（3）window.prompt(“”,””)
如：点击某个按钮或链接跳转到http://www.sdau.edu.cn，
跳转前弹出确认对话框。
（4）
window.showModalDialog(url,argument,"dialogTop:40px;dialogLeft:1000px;dialogWidth:300px;dialogHeight:300px;status:no;");
例：
<html>
<head>
<script>
function f1() {
window.alert("警告信息!");
}
function f2() {
window.confirm("Are you sure?");
}
function f3() {
window.prompt("请输入a的值", "0");
}
function f4() {
var a = confirm("are you sure");
if (a)
location.href = "http://www.baidu.com"
}
function f5() {
var url = "4.html";
window
.showModalDialog(
url,
"",
"dialogTop:40px;dialogLeft:1000px;dialogWidth:300px;dialogHeight:300px;status:no;");
}
</script>
</head>
<body>
<input type="button" onclick="f1()" value="警告框">
<br />
<input type="button" onclick="f2()" value="确认对话框">
<br />
<input type="button" onclick="f3()" value="输入对话框">
<br />
<input name="jump" type="button" onclick="f4();" value="转向百度首页" />
<br />
<a href="http://www.baidu.com" onclick="return confirm('are you sure'); ">转向百度首页</a> <br />
<input type="button" onclick="f5()" value="modalDialog"> <br />
</body>
</html>
5利用javascript进行表单数据有效性验证
<html>
<head>
<title></title>
<script>
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g,"")
}
function f(){
var a=trim(form1.username.value);
var b=trim(form1.pwd1.value);
var c=trim(form1.pwd2.value);
var d=trim(form1.age.value);
if(a=="")
{
alert("用户名不能为空");
return false;
}
if(b==""||c=="")
{
alert("密码不能为空");
return false;
}
if(b!=c)
{
alert("两次密码不一致");
return false;
}
if(b.length<=6)
{
alert("密码长度必须大于6");
return false;
}
if(isNaN(d)||d=="")
{
alert("年龄必须为数值");
return false;
}
}
</script>
</head>
<body onload="form1.username.focus();">
在提交数据前判断<br />
(1)用户名是否为空
(2)两次密码输入是否一致
(3)密码长度是否超过6
(4)年龄输入的是否是数值
只有所有条件都满足，才将数据提交给服务器。
<form name="form1" action="http://www.sdau.edu.cn">
输入用户名:<input type="text" name="username" /><br />
输入密码:<input type="password" name="pwd1" /><br />
确认密码:<input type="password" name="pwd2" /><br />
年龄:<input type="text" name="age" size="5" /><br />
<input type="submit" value="提交" onclick="return f();" />
<input type="reset" value="重置" />
</form>
</body>
</html>
6控制文字加粗，倾斜(两种方法)
例一：
<html>
<head>
<script>
function f1(){
var s=d1.innerHTML;
d1.innerHTML="<b>"+s+"</b>";
}
function f2(){
var s=d1.innerHTML;
d1.innerHTML="<i>"+s+"</i>";
}
</script>
<title></title>
</head>
<body>
<div id="d1">
<font size="25">测试文字</font>
</div>
<input type="button" value="加粗" onclick="f1();" />
<input type="button" value="倾斜" onclick="f2();" />
</body>
</html>
例二：
<html>
<head>
<script>
var a=1,b=1;
function f1(){
if(a==1){
d1.style.fontWeight="bold";a=-a;b1.value="取消加粗";
}
else{
d1.style.fontWeight="normal";a=-a;b1.value="加粗";
}
}
function f2(){
if(b==1){
d1.style.fontStyle="italic";b=-b;b2.value="取消倾斜";
}
else{
d1.style.fontStyle="normal";b=-b;b2.value="倾斜";
}
}
</script>
<title></title>
</head>
<body>
<div id="d1">
<font size="25">测试文字</font>
</div>
<input type="button" name="b1" id="b1" value="加粗" onclick="f1();" />
<input type="button" name="b2" id="b2" value="倾斜" onclick="f2();" />
</body>
</html>
7求圆的周长、面积
<html>
<head>
<script>
function f1(){
var a=parseFloat(r.value);
var c=2*Math.PI*a;
c=Math.round(c*100)/100;
result.innerHTML="圆的周长是"+c;
}
function f2(){
var a=parseFloat(r.value);
var s=Math.PI*a*a;
s=Math.round(s*100)/100;
result.innerHTML="圆的面积是"+s;
}
</script>
<title></title>
</head>
<body>
请输入圆的半径：<input type="text" name="r" id="r" size="8" /><br />
<input type="button" value="求周长" onclick="f1();" />
<input type="button" value="求面积" onclick="f2();" />
<div id="result"></div>
</body>
</html>
8两数的加减乘除
<html>
<head>
<script>
function f(){
var n1=parseFloat(num1.value);
var n2=parseFloat(num2.value);
var i,k;
var p=document.getElementsByName("p");
for(i=0;i<p.length;i++)
if(p[i].checked)
break;
switch(i){
case 0:k=n1+n2;break;
case 1:k=n1-n2;break;
case 2:k=n1*n2;break;
case 3:k=n1/n2;
}
result.innerHTML="结果为"+k;
}
</script>
<title></title>
</head>
<body>
输入第一个数：<input type="text" size="5" name="num1" id="num1" /><br />
<input type="radio" name="p" checked />加
<input type="radio" name="p" />减
<input type="radio" name="p" />乘
<input type="radio" name="p" />除<br />
输入第二个数：<input type="text" size="5" name="num2" id="num2" /><br />
<input type="button" value="确定" onclick="f();" />
<input type="reset" value="重置" />
<div id="result"></div>
</body>
</html>
9猜数程序：网页产生一个0-200的随机整数，让用户去猜，网页给出”偏大“、”偏小“或”猜中“的提示。
<html>
<head>
<title></title>
</head>
<body onload="txt.focus()">
<input type="text" size="15" name="txt" id="txt" onKeyDown="if(event.keyCode==13) f();" />
<script>
var n = Math.floor(Math.random() * 201);
var count = 0;
function f() {
var a = parseInt(txt.value);
count++;
if (a < n) {
info.innerHTML = a + "too small";
txt.value = "";
txt.focus();
} else if (a > n) {
info.innerHTML = a + "too large";
txt.value = "";
txt.focus();
} else {
info.innerHTML = "right,猜了" + count + "次.<a href=9.html>再来一次</a>";
}
}
</script>
<div id="info">程序随机产生了一个0-200间的整数，请猜一猜,键入数值敲回车即可</div>
</body>
</html>
10复选框全选，取消全选
例一：
<html>
<head>
<script>
function selectall(){
var a=f2.choose.length;
if(a!=undefined)
{for(i=0;i<a;i++)
f2.choose[i].checked=true;
}
else
f2.choose.checked=true;
}
function unselectall(){
var a=f2.choose.length;
if(a!=undefined)
{for(i=0;i<a;i++)
f2.choose[i].checked=false;
}
else
f2.choose.checked=false;
}
</script>
<title></title>
</head>
<body>
<form name="f2">
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="button" value="全选" onclick="selectall();" />
<input type="button" value="取消全选" onclick="unselectall();" />
</form>
</body>
</html>
例二：
<html>
<head>
<script>
function selectall(){
var a=document.getElementsByName("choose");
for(i=0;i<a.length;i++)
a[i].checked=true;
}
function unselectall(){
var a=document.getElementsByName("choose");
for(i=0;i<a.length;i++)
a[i].checked=false;
}
</script>
<title></title>
</head>
<body>
<form name="f2">
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="checkbox" name="choose" />
<input type="button" value="全选" onclick="selectall();" />
<input type="button" value="取消全选" onclick="unselectall();" />
</form>
</body>
</html>
11年月日级联菜单
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function f()
{
var i;
for (i = 1900; i <= 2011; i++)
f1.y.options.add(new Option(i, i));
for (i = 1; i <= 12; i++)
f1.m.options.add(new Option(i, i));
for (i = 1; i <= 31; i++)
f1.d.options.add(new Option(i, i));
}
function g()
{
var month = parseInt(f1.m.value);
var year = parseInt(f1.y.value);
var k, i;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
k = 31;
break;
case 4:
case 6:
case 9:
case 11:
k = 30;
break;
case 2:
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
k = 29;
else
k = 28;
}
f1.d.length = 0;
for (i = 1; i <= k; i++)
f1.d.options.add(new Option(i, i));
}
</script>
</head>
<body onload="f();">
<form name="f1">
<select name="y" onchange="g()"></select>
<select name="m" onchange="g()"></select>
<select name="d"></select>
</form>
</body>
</html>
例：结合CSS，JavaScript实现学生注册界面：
<!-- 添加CSS美化 -->
<!-- 添加JavaScript进行动态交互，判断输入是否满足注册条件（格式问题） -->
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<!-- 添加CSS美化 -->
<style type="text/css">
#title {
color: #FF7B0B;
font-size: 20px;
font-weight: bod;
}
#i {
width: 350px;
height: 15px;
color: blue;
font-size: 12px;
}
table {
text-align: left;
}
#t {
text-align: right;
}
</style>
<!-- 添加JavaScript进行动态交互，判断输入是否满足注册条件（格式问题） -->
<script>
function validate() {
var name = document.forms[0].userName.value;
var pwd = document.forms[0].userPwd.value;
var pwd1 = document.forms[0].userPwd1.value;
var email = document.forms[0].userEmail.value;
var accept = document.forms[0].accept.checked;
var regl = /[a-zA-Z]\w*/;
var reg2 = /\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
if (name.length <= 0)
alert("用户名不能为空！");
else if (!regl.test(name))
alert("用户名格式不正确！");
else if (pwd.length < 6)
alert("密码长度必须大于等于6！");
else if (pwd != pwd1)
alert("两次密码不一致！");
else if (!reg2.test(email))
alert("邮件格式不正确！");
else if (accept == false)
alert("您需要仔细阅读并同意接受用户使用协议！");
else
document.forms[0].submit();
}
</script>
</head>
<body>
<form action="">
<table border="0" align="center" width="600">
<tr>
<td colspan="3" align="center" height="40" id="title">填写注册信息</td>
</tr>
<tr>
<td align="right" id="t">用户名:*</td>
<td><input type="text" name="userName" /></td>
<td id="i">用户名由字母开头，后跟字母、数字或下划线！</td>
</tr>
<tr>
<td align="right" id="t">密码:*</td>
<td><input type="password" name="userPwd" /></td>
<td id="i">设置登录密码，至少6位！</td>
</tr>
<tr>
<td align="right" id="t">确认密码:*</td>
<td><input type="password" name="userPwd1" /></td>
<td id="i">请再输入一次你的密码！</td>
</tr>
<tr>
<td align="right" id="t">性别:*</td>
<td><input type="radio" name="userSex" value="男" checked />男 <input type="radio" name="userSex" value="女" />女</td>
<td id="i">请选择你的性别！</td>
</tr>
<tr>
<td align="right" id="t">邮箱地址:*</td>
<td><input type="text" name="userEmail" /></td>
<td id="i">请填写您的常用邮箱，可以用此邮箱找回密码！</td>
</tr>
<tr>
<td align="right" valign="top" id="t">基本情况:*</td>
<td colspan="2"><textarea name="userBasicInfo" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<td colspan="3" align="center" height="40"><input type="checkbox" name="accept" value="yes" /> 我已经仔细阅读并同意接受用户使用协议</td>
</tr>
<tr>
<td colspan="3" align="center" height="40"><input type="Button" value="确认" onClick="validate()" />
<!-- <input type="submit" value="确认" /> -->
<!-- 由JavaScript判断提交的表单是否满足格式，满足后自动提交，
因此这里的提交由submit改为button按钮，交由JavaScript进行判断 -->
<input type="reset" value="取消" /></td>
</tr>
</table>
</form>
</body>
</html>
Java Web补充
标签：
html标签<td><tr><th>全称及缩写说明：
https://www.cnblogs.com/chaojiyingxiong/p/9791801.html
个人整理 HTML全部标签总集，及用法：
https://blog.csdn.net/soraduo/article/details/98178484
HTML全部标签简介：
https://blog.csdn.net/as1072966956/article/details/79936124
div：
div是一个容器标签，所以它后面必须有一个</div>，比如<div></div>，<div>用于在页面上进行分割，因此可以在<div>中使用div标签。
div的全称就是division，有时候我们也习惯叫图层，在html中，div有很多属性，正是这些属性的组成才会形成美观的板块，可以深入了解一下CSS+DIV。
innerHTML、innerText和outerHTML、outerText的区别：
参考文章：https://blog.csdn.net/liliiii/article/details/39429881
参考文章：https://blog.csdn.net/html5_/article/details/23619103
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：
例：
<div id="test1">这是div中的文字<span>这是span中的文字</span></div>
<script type="text/javascript">
console.log('innerHTML:'+test1.innerHTML);
console.log('outerHTML:'+test1.outerHTML);
console.log('innerText:'+test1.innerText);
console.log('outerText:'+test1.outerText);
</script>
控制台下效果：
innerText和outerText在获取时是相同效果 都是获取<div> </div>标签里的文本内容，去除掉了<div> ,<span>标签，只显示div,span标签里的文本内容，即 “这是div中的文字这是span中的文字”
那么对于获取来说的结构图：
对于设置对象：
innerHTMl在设置对象文本内容的时候，有插入标签，是直接把字体大小，颜色，斜体，下划线这些样式显现出来。
outerHTML跟innerHTMl效果一样，也是直接把字体大小，颜色，斜体，下划线这些样式显现出来。
innerText 跟outerText 显示结果是直接把" "里的内容包括标签原封不动的设置显示出来（只操作文本，不对样式做任何操作）。
正则表达式
什么是正则表达式：
正则表达式本身就是一种语言，这在其它语言是通用的。
正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。
str.indexOf(‘abc’); //精确匹配 只能匹配字符串“abc”
正则表达式 //模糊匹配
Where name=’zhangsan’; //精确匹配
Where name like ‘zhang%’; //姓名以zhang开始的字符串
为什么使用正则表达式 ：
1）验证邮箱
2）手机号
3）银行卡号
4）采集器
186lO659839
5）中奖信息 186****9839
6）屏蔽特殊词汇
参考文章：正则表达式 '^[a-zA-Z0-9''-'\s]{1,30}$' 代表什么意思：
https://blog.csdn.net/weixin_40818589/article/details/79708106
参考文章：正则表达式\w并不完全等于[A-Za-z0-9]：
https://blog.csdn.net/sinat_34719507/article/details/54430555
参考文章：用正则表达式将前后空格用空字符串替代:replace(/(^\s*)|(\s*$)/g, "")：https://blog.csdn.net/qq_39527503/article/details/89814024
正则表达式 '^[a-zA-Z0-9''-'\s]{1,30}$' 代表什么意思：
[A-z] 等于 [a-zA-Z] 表示匹配所有大小写字母
0-9 表示数字
" - ' 都是表示本义字符,匹配这三个符号
\s 匹配非换行的所有空白字符
以上全部在[]中代表匹配以上所有内容
然后{1,30}代表匹配1次到30次,最少1次
头尾的^和$代表匹配一个完整的字符串,如果这个字符串中出现任何一个不是[]中内容的字符这个字符串就无法匹配
最后^$匹配的定义可以是单行的也可以是多行的,这需要靠正则的选项判断、
正则表达式\w并不完全等于[A-Za-z0-9]：
一般大家在书本上还是网上资料正则表达式中\w都被介绍为匹配任何单词字符,包括字母和下划线，等效于[A-Za-z0-9]。
今天偶然间发现会员注册中出现了一个恶作剧账号"аdmin",注意到那个а了没?那是一个俄文字母,在会员注册过滤中使用\w验证并不能防止。
也就是说\w包括了英文字母以及俄文字母等，在会员注册这块我们肯定不希望类同的账号出现，要不然很容易造成会员间的误会。所以改为^[A-Za-z0-9\u4E00-\u9FA5-]{2,16}$验证，只允许数字、26个英文字母大小写、中文及其组合。
用正则表达式将前后空格用空字符串替代:replace(/(^\s*)|(\s*$)/g, "")：
^表示字符串必须以后面的规则开头, 在这里就是说字符串必须以\s*开头.
\s 是空格的意思, * 表示有0个或多个
\s* 就是有0个或多个空格
(^\s*) 表示的就是以0个空格或者多个空格开头
| 表示或的意思, 也就是满足| 左边的也成立, 满足 | 右面的也成立.
\s*同上
$ 的意思是字符串必须以前面的规则结尾
(\s*$) 的意思就是, 以0个空格或者多个空格结尾
/.../g 是正则表达式的属性, 表示全文匹配, 而不是找到一个就停止.
所以这个正则表达式替换的就是前导空格和后导空格
因为有前导空格, 就说明以0个或多个空格开头, 满足正则表达式中 | 前面的条件: (^\s*)
而如果有后导空格, 就说明以0个或多个空格结尾, 满足正则表达式中 | 后面的条件: (\s*$)
关于MIME类型（媒体类型）：
MIME类型：媒体类型：媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。
MIME 类型介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
常见 MIME 类型列表：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
