本周内容
1.前端三剑客:Html,CSS,JS
1.1 前端Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html入门</title>
</head>
<body>
<img src="img/高圆圆.jpg" width="200px" height="400px" /><br/>
<font color="red" size="7">hello</font>
</body>
</html>
1.1.1 常用的html标签(Hyper Text Markup Language:超文本标记语言)
注释:! <!+内容>
超文本标记语言:针对字体,图片,视频等都可以设置他们对应的字体大小,颜色,图片的宽度和高度等,都可以进行操作!
文本标签:
1)标题标签h1 <h1>---内容----</h1>,而且从大到小,多级标题
2)段落标签 p <p>---内容---</p>
3)换行标签 br <br>---内容---</br>
滚动标签marquee:具有很多属性
behivor(滚动方式):
来回滚动alternate 滚动到某一边停止slide 穿插滚动 scroll
direction:滚动方向: left(默认), right,up,down;
scrollamount:滚动速度
bgcolor:背景色
列表标签
无序列表ul 和列表项li,属性type是列表项前面的标记值,默认值是disc,是一个实心圆点
有序列表ol 和 列表项li
属性type是列表项前面的标记值,默认值是1,从1开始
pre标签:原样输出
块标签div:一般将元素包起来+css样式(盒子模型)---简单的层级布局
div特点:占一行内容,自动换行
水平线标签 <hr/>
行内标签span:没有任何效果
span标签应用场景:结合js里面"原生方式表单接单",在表单后面计入span标签,动态提示"用户信息是否满足正则表达式"
上下标标签
上标sup
下标sub
居中标签 center
创建跳转标签:<a></a>
图像标签img
常见的属性:width/height:指定px(像素单位)或者百分比(根据屏幕的分辨率)
alt:替代文本,当图片失效的时候,用文字描述一下
src:加载图片资源地址(本地/远程加载:七牛云);
相对路径:同一个目录的文件引用,../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 例如同级目录中<a href = "index.HTML">index.HTML</a>
绝对路径:指带域名的文件的完整路径:就是完整的路径名称:http://www.divcss5.com/html/h50280.shtml
title:鼠标悬浮在图片上的文字提示
超链接标签
相关属性
href:加载url统一字符定位符(必须携带协议)
url的组成规则:
协议:域名或者ip地址/具体的路径
协议有http协议,file协议,thunder协议等等
target:打开资源文件的方式
_self:当前窗口直接打开(默认)
_blank:新建一个窗口打开
超链接的使用场景:
1)普通作用,俩街道href指定地址--后台地址/本地其他地址
2)作为"锚连接"使用
A.在同一个html页面中使用
第一步:打一个锚点(跳转标记)<a name=指定锚点名称></a>----标记地点
第二步:创建跳转连接<a href="#锚点名称">跳转...></a>
B.在不同html页面中使用
第一步:在另一个页面的某个位置打一个猫点(跳转标记) <a name="指定锚点名称"></a>
第二步:在当前页面中创建跳转连接 <a href="连接到指定的页面路径+#锚点名称">跳转...</a>
1.1.2 表格标签table
子标签:
caption:表格标题标签
tr:行标签
th:表格中表头元素,特殊单元格,自动加粗,自动居中
td:单元格(理解为列)
table的属性:
border:边框大小()(像素)
width/height:宽高,指定像素或者百分比
align:表格在浏览器对齐方式 left(默认),center,right
cellspacing:通过table属性: 设置单元格和边框之间间隔
cellpadding 属性规定单元边沿与其内容之间的空白(内边距)
针对单元格的操作:
1)合并行rowspan="所占格子的数量" 默认向下合并
2)合并列colspan="所占格子的数量" 默认向右合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html语句</title>
<a name="top"></a>
<a href="#foot">跳转底部</a>
</head>
<body>
<h1>常用的html标签</h1>
<h2>文本标签</h2>
<p>Java是一门面向对象编程语言
还摒弃了C++里难以理解的多继承、指针等概念</p>
<p>java的特点:简单,面向对象</p>
<p>Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、
多线程、动态性等特点.Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等</p>
欢迎学习java <br/>
今天学习java的历史<br/>
<ul type="square"><li>封装</li><li>继承</li><li>多态</li><br>
<ol type="1"><li>private</li><li>extend</li><li>implement</li>
<div>登录</div>
<div>注册</div>
<span>父类引用指向子类对象</span><br/>
X<sup>2</sup><br/>
H<sub>2</sub>O<br>
<img src="img/java之父.jfif" width="300px" height="300px" alt="当前图片表示的是java之父"
title="詹姆斯 高斯林"></br>
<a name="foot"></a>
<a href="http://www.baidu.com">跳转顶部</a>
<marquee behavior="alternate" direction="right"
scrollamount="15" bgcolor="aqua" > 加油,奥利给</marquee>
<table border="1" cellspacing="0" align="center" > //表格标签
<caption>学生表</caption>
<tr>
<th align="center">姓名</th>
<th>学号</th>
<th align="center">成绩</th>
</tr>
<tr>
<td>付新刚</td>
<td>110</td>
<td align="center" colspan="3">A</td>
</tr>
<tr>
<td>王东磊</td>
<td>120</td>
<td rowspan="2">A</td>
</tr>
<tr>
<td>刘宝寿</td>
<td>119</td>
<td>A</td>
</tr>
</table>
</body>
</html>
1.1.3 表单标签form
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件:包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
表单域:他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
属性
1)action:提交到地址url(本地地址或者远程服务地址/本地静态页面)
2)method:表单提交方式
1）get方式
2）post方式
注意:表单标签的所有表单项都需要实现name属性
应用场景:在应用于登录,注册,搜索功能时使用表单标签
面试题:get和post的区别:
（post请求需要服务器的支持，get可以不需要）
1.get请求时参数会提交到地址栏上，而post请求不会（post请求会将数据存放在请求体中）
2.get请求相对于post而言，不那么安全
3.get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器有关）
4.get请求比post请求快（大概是2倍左右）
5.get请求有缓存（会将数据存放在游览器中，即本地磁盘中），而post请求无缓存
1.1.3.1 input(表单项标签)的type属性值系列
场景:在网页中显示手机用户信息的表单信息,如登录注册页面
------空格
&ensp:-----两个空格
input可以通过type属性值的不同,展现不同效果
type属性值
<input type="text"> 定义供文本输入的单行输入字段
文本框属性:placeholder:占位符,提示输入内容的文本
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮。
name属性:分组,有相同name属性值的单选框为一组,一组中只有一个被选中
checked:默认选中,在特定的单选后跟上checked就可以了
<input type="checkbox"> 定义多选框。
<input type="button"> 定义按钮。
submit:提交之后,点击之后提交数据给后台服务器
reset:重置按钮,点击之后恢复表单默认值
button:普通按钮,默认无功能,之后配合js添加功能
<input type="number"> 用于应该包含数字值的输入字段。
<input type="file"> 用于上传文件
multple:上传多个文件,在file后面跟上就可以了
<input type = "hidden">隐藏域(没有明显效果显示,但是会携带参数)
<input type="date"> 日期组件
1.3.1.2常用的限制
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。
1.1.4button标签(提交,同input的按钮系列)
<button type="button"> 定义按钮。
submit:提交之后,点击之后提交数据给后台服务器
reset:重置按钮,点击之后恢复表单默认值
button:普通按钮,默认无功能,之后配合js添加功能
1.1.5 select标签(下拉列表)
select:代表下拉菜单的整体
option:下拉菜单的每一项
selectd:默认选中的(在特定下拉项前面加)
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
1.1.6 文本域标签textarea(多行文本框)
应用场景:在网页中提供可输入多行文本的表单控件(多行文本框)
属性:cols:规定了文本域内可见宽度
rows:规定了文本域内课件行数(高度)
注意:左下角可以拖拽改变大小
2)实际开发中,针对样式效果推荐使用css设置
1.1.7 lable标签
场景:常用于绑定内容与表单标签的关系
使用方法(一):1)使用lable标签吧内容(如文本)包裹起来
2)在表单标签上加上id属性
3)在lable标签的for属性中设置对应的id值
推荐使用:使用方法(二):1)直接使用lable标签把表单标签一起来包裹起来
2)需要吧lable标签的for属性删除即可
1.1.8 框架标签frameset frame
当多个html页面组成整个结构,需要使用frameset(框架集标签),不能与body共存,直接写在body前面
frame :将src下的块标签加载在指定的页面位置中
先执行<frameset rows="由上而下划分的每一个部分所占整个部分的权重百分比>
<frameset cols= 从左往右划分的每一个部分所占整个部分的权重百分比 >
超链接target:如果单独使用,就是打开方式,新建窗口/当前窗口直接打开,而如果和框架标签使用,target如果指定的是frame的名称,那么超链接在指定的frame中打开
属性:
name:给某个部分起名字
1.2 引入CCS入门(Cascading style sheet层叠样式表)
书写的样式一定是样式库中的样式
使用方式:三种方式
方式(1):行内样式
在每一个标签中都有style属性="样式属性名称1:属性值1;样式属性名称2:属性值2"(一般不使用)
弊端:1)一次只能控制一个标签
2)样式代码和html代码混合一起使用
方式(2):内联样式(内部样式)
可以通过某种选择器,将制定的标签全部选中,在head标签体中加入style标签
选择器类型{样式名称1:属性值1;
样式名称2:属性值2}
弊端:比第一种方式好一点,实际开发中,不利用维护
方式(3)外联方式
单独创建一个独立的css文件,放在css文件夹中,在某个html页面中
<link href="引入外部的文件" rel="stylesheet">(rel固定属性:关联层叠样式表)
1.2.1 CSS选择器–控制标签
优先级:id>class>标签
在head中书写style标签,选择器都在style中书写
(1)id选择器:同一个html页面中,id属性值必须唯一!如果id重复了,后面去通过javascript document对象.getelementbyid("id属性值");通过id属性值获取标签对象
格式:#id属性值{样式属性:属性值;}
好处:在不同的浏览器上,在html页面加入id属性值(唯一的),保证浏览器的运行的兼容性!
(2)class选择器:同一个html页面中,标签中可以存在相同的class属性值
格式: .class属性值{样式属性:属性值}
(3)标签选择器
格式:标签名称{样式属性:属性值;...}
(4)交集选择器(子元素选择器)
格式:选择器选中的标签,选择器2选中的标签{ //选择器2选中的标签是选择器1选中的标签的子标签
属性名称:属性值;}
(5)通用选择器
格式:*{属性名称:属性值;}
(6)伪类选择器:描述一个标签状态
link"鼠标还没有访问的状态
hover:鼠标经过状态
active:鼠标激活状态(点击,但是没有松开状态)
visited:鼠标访问过的状态(点击后,松开了)
格式:选择器L状态名称{样式属性名称:属性值}
如果想出现循环效果:hover必须在link和visited之后
antive必须在hover之后
(7)并集选择器
格式: 选择器选中的标签,选择器2选中的标签{//将选择器1选中的标签和选择器2选中的标签,同时选中,加入样式修饰
属性名称:属性值;
}
1.2.1 常见的CSS属性样式
(1)文本样式
text-align: center------文本对齐方式
text-decoration(设置或者文本修饰):
underline添加下划线
line-through:中划线
overline:上划线
none:不加任何修饰
letter-spacing:字符之间的间距
word-spacing:单词间的间距
(2)边框属性
solide:单实线 dashed:虚线 dotted:点 dobble:双实现
boder-collapse:collapse:合并边框
border-top(上下左右)-color:边框的颜色(要想实现边框的颜色,必须实现边框的宽度和边框的类型)
border-top-style:solide:边框类型
边框的颜色/宽度/样式的简写格式:
border-color/border-width/border-style
特点:1)有默认的方向 上右下左(顺时针)
2)某一边没有设置颜色,宽度,类型,默认补齐对边
边框的简写格式:
border:border-width border-style border-color
#id1{
border: #0000FF solid 1px;
width: 200px;
}
(3)浮动和清除(重点)
float 方向:规定方向浮动
清除浮动:clear
both:两边都不浮动
left:让左边不浮动
right:让右边不浮动
(4)字体样式font
font-family:字体类型--一定是字体库中的类型--楷体,宋体等
font-size:字体大小
font-style:字体类型(normal:正常 italic:斜体)
font-weight:字体粗细(bold:适当加粗)
字体的简写格式(一定顺序,不能更改)
font:font-style font-weight font-size font-family;(斜体 加粗 大小 类型)
color-------字体颜色
(5)背景属性
background-color: bisque-----背景颜色
background-image:背景图片
background-repeat:设置图片重复以及如何重复
repeat(x和y都重复)
上:top 下:buttom 左:left 右:right 中 center
1.2.3 css盒子模型
使用方法:将任何的标签用块标签包裹起来+css选择器
盒子模型:"万物皆盒子",使用快标签
盒子属性:
border:边框(盒子的厚度)
padding:内边距(默认方向:顺时针)
width和height:盒子的容量大小
margin:盒子的外边距(盒子和盒子之间的距离)(默认方向:顺时针)
盒子模型的宗旨:将任意标签使用div包起来,通过选择器控制标签的样式-->div+css:层级布局
1.2.4 css定位属性
position:
absolute:绝对定位(相对父标签移动-浏览器边框)
relative:相对定位(相对原来的位置进行移动)
fixed:固定定位(不会随着浏览器的滚动条的滚动而滚动)
top:将整个元素向下移动
left:将整个元素向右移动
2.javascruipt入门(重点)
2.1 js基本数据类型
DOM:基于文档对象模型编程,浏览器在解析html页面的时候,将每一个标签封装成对象(标签对象),或者成为"节点对象/元素对象",形成一种"树结构"
DOM编程的核心思想:
1)就是通过一些方式获取"标签对象"
2)使用标签对象访问标签的属性--通过对象.属性来改变属性
2.1.1 使用方式
a)内部方式
在head标签体中或者body下面都可以写:<script>
b)外部方式
2.1.2 js语法
(1)如何定义变量?
1)可以使用var定义,var可以省略不写
2)js是一门弱类型语言,可以重复定义变量,后面的会把前面的覆盖掉
(2)查看数据类型的函数:typeof(变量名);
(3)常见的基本数据类型划分:
整数类型:无论是整数还是小数,都是number--默认提升为js的内置对象Number
字符串类型类型:无论是字符串还是字符,都是string----自动提升为String
布尔类型:true/flase---默认提升为Boolean
对象类型:object----js内置Object(代表所有js的对象)
未定义类型:undefined-----没有意义
(4)js运算符
var true = 1; var var flase = 0
算术运算符 + - * / %
赋值运算符 =
比较运算符 > < <= >= ==
逻辑运算符 & | && ||
三元运算符 (表达式)?true的结果:flase的结果
(5)流程控制语句和java不一样的地方
case语句里边不仅可以是常量,也可以是变量,而java中只能是常量
(6)for in 语句类似于增强for
for(var x in 对象名){
输出语句
}
2.1.3 js中常见的函数以及属性
window对象alert("消息内容"):弹出一个提示框
window对象:顶级对象,调用频繁,可以省略不写
console对象:是控制对象
console.log(输出内容):控制台打印
通过js脚本向浏览器输出内容:
document.write("内容")
innerText:给标签设置普通文本内容,不能渲染,除去了HTML标签
innerHTML:给标签设置HTML内容,可以渲染,从对象的起始位置到结尾位置,包括HTML标签;
parseInt():转换String为number类型
(2)通过标签的id值获取标签对象并给标签设置本文内容
//第一步:通过id获取标签对象
标签名=document.getElementById("标签id");
//第二步:通过标签对象设置HTML文本
标签名.innerHTML="内容"
(3)事件属性click---点击事件:onclick();
标签上绑定时间:onclick("函数")
(4)Style属性中的显示和隐藏函数display():
显示:block;---标签对象.style="block";
隐藏:none;----标签对象.style="none";
2.1.4 js中的函数(重点)
如何定义函数
funtion 函数名(参数名称列表){
语句体中可以直接输出/return 结果
}
如何调用函数
1)如果有返回值,赋值调用
2)如果无返回值,单独调用 函数名称(实际参数列表);
如何自定义对象
注意:(1)定义函数的时候,形式参数直接写参数名称,不能带var
(2)定义函数的时候不需要书写返回值类型,语句中可以出现return
(3)js中不存在函数重载的概念,后面定义的重名的方法会把前面的方法覆盖掉
(4)当实际参数列表个数小于形式参数列表,函数依然可以被调用,结果为空NAN;实参个数大于形参个数时,按照顺序取参,多余的实参不参与运算;
(5)js的函数存在默认数组arguments
2.1.5 js事件编程(DOM操作)
事件三要素:
1)事件源:标签-常见的html标签 document.getElementById("方法名")
2)编写事件监听器---就是定义函数
3)绑定事件监听器---定义的函数绑定到事件源--onXXX
常见的事件编程的分类
单击事件 click
双击事件 dblclick
鼠标获取焦点事件 focus
鼠标失去焦点事件 blur
选项卡发生变化的事件(select标签居多) change
鼠标经过事件(经过某个div/某个元素) mouseover---window对象中的方法open():打开另一个页面
open("url","_blank/_self":打开方式)
鼠标移出事件 mouseout
页面载入事件 load事件:一般用在body
当body的所有内容加载完毕触发这个事件
表单提交事件 submit:当绑定函数返回值是true,能够提交,返回值flase,不能提交;
2.1.6 js如何自定义一个对象?
(1)定义对象--语法格式和函数定义一样
function 对象名(参数列表){
给属性赋值;
添加功能(this.方法名=function 方法名(){})
}
(2)创建对象
有参构造 var 对象名称=new 函数(实际参数)
无参构造 var 对象名称=new 函数();
通过类名创建 var 对象名称=new object();
第四种方式 利用字面值的方式---json格式:通过"key":value(键值对)的方式创建对象,能够描述一个对象或者数组的格式,数组的访问形式:对象名[角标].属性
key:value 一系列键值对象组成的一种格式;例如:var p = {
"属性":"属性值";
"方法名":function(){}
}
//创建数组对象
var students = [
{属性1:属性值1,属性2:属性值2,...}
{属性1:属性值1,属性2:属性值2,...}
]
2.1.7 js的内置对象
String内置对象
Array内置对象
Date内置对象
(1):创建date的JS内置对象
var date = new Date();
(2)调用Date的方法获取年月日时分秒
年:getfullyear
月:getmonth(表示0-11的整数)+1;
日:getdata();
时:gethours();
分:getminutes()
秒:getsecond()
重复执行 setInteval(定时任务(),时间毫秒值) ; ,每经过毫秒值,重复执行定时任务
//执行一次 setTimeout(定时任务(),时间毫秒值) ; 经过毫秒值后,执行一次任务
2.1.7.1 网页时钟
function genderteTime(){
//0)创建日期对象
var date = new Date() ;
//1)首先需要获取当前日期+时间,拼接成字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
//2)把时间字符串dataStr---放在span标签中,作为它的文本内容
//DOM操作
//获取id="spanTip"的标签对象 span标签对象
var span = document.getElementById("spanTip") ;
//alert(span) ;
//设置标签的innerHTML属性
span.innerHTML = "<h3>"+dateStr+"</h3>" ;
}
//定时器:
//widow对象的功能,window可以不写 window.setInterval("genderteTime()",1000) ;
2.1.8 js正则表达式(js的内置的一种对象)
一般应用在表单上,登录/注册的时候前台通过js进行校验,是否满足正则规则!使用原生js写法完成js的表单校验!
2.1.9 DOM操作
DOM核心:(创建)获取标签对象,使用标签对象改变它的属性,达到某种效果;
2.获取标签对象的三种方法
(1)通过document集合属性获取标签对象
(2)通过节点的默认属性名称获取
2.1.9.1 DOM操作–获取标签对象的方式一
通过节点的默认属性名称获取
内置属性:
1)parentNode:父节点
2)childNodes:所有的子节点
3)firstChild:第一个子节点
4)lastChild:最后一个子节点
5)previousSibing:上一个兄弟节点
6)nextSibling:下一个兄弟节点
2.1.9.2 DOM操作–通过document的方法获取
通过标签的id值获取标签对象并给标签设置本文内容
1)第一步:通过id获取标签对象
标签对象名=document.getElementById("标签id");
2)通过class属性获取
标签对象名=document.getElementsByClassName("同名的class属性值"[角标值].value)
3)document.getElementsByTaName("同名的标签名称"[角标值].value)
4)document.getElementsByName("同名的name名称"[角标值].value)
2.1.9.3 DOM操作–通过集合属性获取(了解)
1)all:获取html文档中所有的标签对象
2)links:一般a标签的对象
3)forms:表单标签对象
4)images:img标签对象
2.1.10 js的String对象特有方法
object.valueof():返回值是对象的本身数据值
charAt(index):返回指定索引处的字符
concat(String str):拼接功能
fontcolor("颜色单词"):修改字符颜色
sunstr(startindex,length):从指定位置截取指定数量的字符
substring(start,end):截取从指定位置到指定位置的字符
spit("分割符号"):以指定符号将字符串分割成数组
2.1.11 js内置对象Array相关的特有方法
注意:数组在js中没有角标越界,元素类型不限
数组的创建
1)var 数组对象名= new Array(3);
2)var 数组对象名 = new Array[size];
3)var 数组对象名 = [元素1,元素2,...
join(separator):按照指定的分隔符,拼接成字符串
2.1.12 js的正则表达式
正则表达式的场景:在用户注册/登录的时候输入数据,限定用户的一种规则!
语法:通过下面的常见语法组装皮来--使用变量接受,这就是正则对象
1.数量词
1)X+:X字符出现一次或者多次
2)X?:X字符出现0次或者1次
3)X*:X字符出现0次或者多次
2.匹配范围
1)x{n,}:X字符至少出现n次
2)x{n,m}表示X字符至少出现n次,但是不能超过M次
3)x{n}:X字符恰好出现一次
4)\d:匹配的是数字,相当于[0,9]
5)\w:等价于[A-Za-z0-9_]
3.边界匹配符号
1)^:以xxx字符开头
2)$:以xxx字符结尾
4.特殊转义字符
1)\:表示转义,将浏览器不能识别的字符转义为能识别的状态,例如\^;
方法:正则表达式内置的方法test(输入的字符串),如果匹配,则返回true,不匹配,返回false;
如果完成完全匹配,必须加上边界匹配符号!例如:/^[o-9]{2}$/
2.1.13 原生js的表单校验
正则表达式的test()方法:返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
rgexp.test(str);--返回值boolean,指出查找的字符串是否存在模式(是否满足正则表达式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js表单校验</title>
</head>
<body>
<form action="service.html" method="post" onsubmit="return checksubmit()">
用户名:<input type="text" id="username" placeholder="请您输入用户名" onblur="checkusername()" /> <span id="usertip">
</span><br>
密  码: <input type="password" id="password" placeholder="请您输入密码" onblur="checkpassword()" /><span id="passwordtip"></span><br>
确认密码: <input type="text" id="repassword" placeholder="两次密码需保持一致" onblur="checkrepassword()"/><span id="repasswordtip"></span><br>
<input type="submit" id="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
function checksubmit(){
if(checkusername() && checkpassword() && checkrepassword()){
return true;
}else{
return flase;
}
}
function checkusername(){
var name = document.getElementById("username").value;
var usertip = document.getElementById("usertip");
var regex =
if(regex.test(name)){
usertip.innerHTML="输入符合规范".fontcolor("green");
return true;
}else{
usertip.innerHTML="格式错误".fontcolor("red");
return flase;
}
}
function checkpassword(){
var password = document.getElementById("password").value;
var passwordtip = document.getElementById("passwordtip");
var regex = /^[A-Za-z0-9_]{6,16}$/ ;
if(regex.test(password)){
passwordtip.innerHTML= "<strong>数据合规</strong>".fontcolor("green");
return true;
}else{
passwordtip.innerHTML= "<strong>数据不合规</strong>".fontcolor("red");
return flase;
}
}
function checkrepassword(){
var password = document.getElementById("password").value;
repassword = document.getElementById("repassword").value;
repasswordtip = document.getElementById("repasswordtip");
if(password == repassword){
repasswordtip.innerHTML="密码一致".fontcolor("green");
return true;
}else{
repasswordtip.innerHTML="密码不一致".fontcolor("red");
return flase;
}
}
</script>
</html>
3.前后端交互–>Servlet(重点)–后期SpingMVC基础
Server Applet:全称是针对服务器端程序的开发/服务器连接器,主要是和前台进行交互的控制器,目的是:交互的浏览和生成数据!
3.1 Servlet的基本入门操作
1.操作步骤
1)导包 tomcat里面自带的servet-api.jar,也可以下载servlet.jar包
2)自定义类,继承自HttpServlet,至少重写doGet()或者doPost()方法
3)配置servlet
3.2 如何配置Servlet
<!-- xml的配置方式–>servlet的基本配置-->
<servlet>
<!-- 一般情况下,name就是当前类的类名-->
<servlet-name>Servlet</servlet-name>
<!-- class就是当前类的字节码的文件的全限定名称-->
<servlet-class>com.test.Servlet</servlet-class>
</servlet>
<!-- servlet的映射配置(访问的路径)-->
<servlet-mapping>
<!-- name的名称必须和servlet基本配置的名称一致-->
<servlet-name>Servlet</servlet-name>
<!--<!–这是访问的路径,必须以/开头,但是不能/结尾,/xxx精确配置->-->
<url-pattern>/first</url-pattern>
3.3servlet的执行原理
1.浏览器发送服务器请求(HttpServletRequest)
2.服务器tomcat接受请求
3.解析请求地址中的URI -->项目名称_war_exploded/first;项目部署地址first(url-patern)
3.1) web.xml在xml文件中找寻是否存在url-patern是first的统一资源定位
3.2)解析url-patern中servlet-name的项目名称
3.3)再通过映射配置中的servlet-name中的项目名称去servlet基本配置中找该映射配置中的项目名称
3.4)找到该项目名称后,获取servlet-class中的全限定名称
4.通过反射区获取该类的字节码文件---Class clazz = Class.forName("全限定名称");
5.创建对象 Obgect obj = clazz.nerInstance();
6.获取成员方法的对象,调用成员方法
Method m = obj.getDeclaredMethod("doGET",HttpServletRequest.class,HttpServletResponse.class);
7.取消语言访问机制
m.setAssceSsiable();
8.m.invoke(obj,request,response);
9.响应浏览器,输出内容;
3.4 Servlet的生命周期
3.4 tomcat–apache的web应用服务器
web应用服务器(支持JavaEE规范的) Apache组织机构
https://tomcat.apache.org/
http服务器:nginx 服务器(后期使用)
1)官网下载 tomcat版本 (tomcat8.0以上 针对get提交,自动解决中文乱码)
2)windows系统 xx.zip
Linux系统 xx.tar.gz
3)解压后使用tomcat
启动tomcat服务器
可能闪屏---->没有使用JAVA_HOME系统变量
tomcat(使用Java语言编写的)在启动的时候,会寻找系统变量中是否存在JAVA_HOME
如果已经配置了JAVA_HOME,还出现闪屏
在系统变量配置 JRE_HOME
本地启动 进入bin目录---startup.bat---->日志有乱码
在tomcat的conf目录中
logging.properties 日志记录配置文件中修改字符集
启动成功: 25-Feb-2022 16:11:48.773 信息 [main] org.apache.catalina.startup.Catalina.start Server startup in 2076 ms
访问tomcat是否启动成功:
http://localhost:8080/
http://10.12.156.50:8080/ 输入我地址:访问启动的tomcat
服务器底层:TCP/IP Server 和Client 客户端之间的交互
4)在web文件下创建html文件或者jps文件,浏览器只能访问到web目录下的index.jps文件,其他访问需要添加访问路径;
本文详细介绍了HTML的常用标签，如标题、段落、表格、表单等，并探讨了CSS的基础知识，包括选择器、盒模型和文本样式。此外，还讲解了JavaScript的基本语法、事件处理和表单验证，特别强调了正则表达式在前端验证中的应用。
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
