JavaWeb学习笔记分享(必看篇)
自定义列表
<dl></dl>：表示列表的范围
**在里面<dt></dt>：上层内容
**在里面<dd></dd>：下层内容
有序列表
<ol></ol>：有序列表的范围
--属性type：设置排序方式，1(默认),a,i、、
**在ol标签里面<li>具体内容</li>
无序列表
<ul></ul>：无序列表的范围
--属性type：circle(空心圆)、disc(默认的实心圆)、square(实心方块)
**在ul标签里面<li>具体内容</li>
图像标签
--属性：src、width、height、alt(图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容或者是图片显示出错时显示的文字，但有些浏览器不显示，没有效果)
**<imgsrc="图片的路径"/>
路径的介绍
*分类：两类
**绝对路径eg.http://www.baidu.com/b.jpg
***三种相对路径一个文件相对于另外一个文件的位置
--html文件和图片在同一个路径(目录)下，可以直接写文件名称
--在html文件中，使用与其在同一个路径下的img文件夹下的a.jpg文件使用方法：img\a.jpg
**d:\htmlstudy\code\4.html
**d:\htmlstudy\code\img\a.jpg
--图片在html文件的上层目录中，此时图片使用方法：../c.png ../表示上层路径
超链接标签
**链接资源
--<ahref="链接到资源的路径">显示在页面上的内容</a>
**href：链接的资源的地址
**target：设置打开的方式，默认是在当前页打开
--_blank：在一个新窗口打开
--_self：在当前页打开默认的
--<ahref="#">链接标题</a>：当超链接不需要跳转到页面时，在href中添加#（占位符）就可以了
**定位资源
--如果想要定位资源：定义一个位置
<aname="top">顶部</a>
--回到这个位置
<ahref="#top">回到顶部</a>
--原样输出标签：<pre>需要原样输入的内容</pre>
表格标签
*作用：可以对数据进行格式化，使数据显示更加清晰
*属性border(表格线粗细)bordercolor(表格线颜色)cellspacing(单元格间距离)widthheight
*<table></table>：表示表格的范围
**在table里面，表示一行<tr></tr>
--设置对齐方式align：leftcenterright
***在tr里面，表示一行里边的单元格<td></td>
**使用th也可以表示单元格：表示可以实现居中和加粗
*表格的标题，放在table里边<caption></caption>
*操作技巧：
**首先数有多少行，在数每行里面有多少个单元格
*合并单元格
**rowspan：跨行（纵向合并）
<tdrowspan="3"align="center">13</td>
**colspan：跨列（横向合并）
<tdcolspan="3"align="center">表格练习</td>
表单标签
*例如注册开心网时，可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
*<form></form>：定义一个表单范围
*属性：
**action：提交到的地址，默认提交到当前的页面
**method：表单的提交方式
--常用的有两种：get和post，默认是get请求
**get和post的区别
1）get请求地址栏会携带提交的数据，post不会携带（数据在请求体里面）
2）get请求安全级别较低，post较高
3）get请求数据大小有限制，post没有限制
**enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性
**输入项：可以输入内容或者选择内容的部分
--大部分的输入项可使用<inputtype="输入项类型"/>
********在输入项里面需要有一个name属性
***普通输入项：<inputtype="text"/>
***密码输入项：<inputtype="password"/>
***单选输入项：<inputtype="radio"/>
--在里边需要属性name
--name的属性值必须要相同
--必须要有一个value值
****实现默认选中的属性
***checked="checked"
***复选输入项：<inputtype="checkbox"/>
**在里边需要属性name
**name的属性值必须要相同
**必须要有一个value值
****实现默认选中的属性
----checked="checked"
***文件输入项：<inputtype="file"/>
***下拉输入项（不是在input标签里面的）
<selectname="birth">
<optionvalue="0">请选择</option>
<optionvalue="1991">1991</option>
<optionvalue="1992">1992</option>
<optionvalue="1993">1993</option>
</select>
****实现默认选中的属性
----selected="selected"
***文本域（如：注册账号时填写个人信息简介的方框）
<textareacols="5"rows="20"></textarea>
***隐藏项（不会显示在页面上，但是存在于html代码里面）
<inputtype="hidden"/>
***提交按钮
<inputtype="submit"/>
<inputtype="submit"value="按钮标题"/>
--提交之前地址：C:\Users\HappyDog\Desktop\index.html
**当在输入项里面写了name属性之后
--file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245
**?输入项name的值=输入的值&
**参数类似于key-value形式
***使用（点击）图片来提交
<inputtype="image"src="图片路径"/>
***重置按钮：回到输入项的初始状态
<inputtype="reset"/>
<inputtype="reset"value="按钮标题"/>
***普通按钮（和js在一起使用的）
<inputtype="button"value=""/>
案例：使用表单标签实现注册页面
表格单元格内容为空时，一般用占位符（ (转义空格)）来填充
html中的其他的常用标签的使用
**b(加粗)s(删除线)u(下划线)i(斜体)pre(原样输出)sub(下标)sup(上标)div(自动换行)span(在一行显示)p(段落标签)
html的头标签的使用
**html两部分组成head和body
**在head里面的标签就是头标签
**title标签：表示在标签上显示的内容
**<meta>标签：设置页面的一些相关内容
--<metaname="keywords"content=""/>
--<metahttp-equiv="refresh"content="10;url=Test_form.html"/>定时跳转到指定页面
**base标签：设置超链接的基本的设置
--可以统一设置超链接的打开方式<basetarget="_blank"/>
**link标签：引入外部文件
框架标签的使用
**<frameset>
**rows：按照行进行划分
<framesetrows="80,*">分成上下两部分，上边80，下边任意
**cols：按照列进行划分
<framesetcols="80,*">分成左右两部分，左边80，右边任意
**<frame>具体显示的页面
**<framename="lower_left"src="b.html">
*使用框架标签的时候，不能写在head和body里面，使用了框架标签，需要把body去掉，写在head外边
*如果在左边的页面超链接，想让内容显示在右边的页面中，可以设置超链接里面的target属性，将target的值设置为框架中的名字
**<ahref="http://www.baidu.com"target="right">百度</a><br/>
<framesetrows="80,*">
<framename="top"src="a.html">
<framesetcols="120,*">
<framename="left"src="b.html">
<framename="right"src="http://www.baidu.com">
</frameset>
</frameset>
知识总结
1）html操作思想：使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2）font标签属性：size取值范围1-7color：十六进制数#ffffff
3）标题标签<h1></h1>......<h6></h6>：从h1到h6字体越来越小，自动换行
4）注释
CSS的简介
**CSS：层叠样式表
**层叠：一层一层的
**样式表：很多的属性和属性值
**使页面显示效果更加好
**CSS将网页内容和显示样式进行分离，提高了显示功能
CSS和html的结合方式（四种结合方式）
1）在每个html标签上面都有一个属性style，把CSS和html结合在一起
--<divstyle="background-color:red;color:green;"id=""class="">天之道，损有余而补不足，是故虚胜实，不足胜有余。</div>
2）使用html的一个标签实现<style>标签，写在head里面
--<styletype="text/css">
css代码;
</style>
----代码实现<head>
<styletype="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<divid=""class="">
天之道，损有余而补不足，是故虚胜实，不足胜有余。
</div>
</body>
3）在style标签里面使用语句
@importurl(css文件的路径)；
--第一步：创建一个css文件
----<styletype="text/css">
@importurl(div.css);
</style>
4）使用头标签link，引入外部css文件放在<head></head>里边
--第一步：创建一个css文件
--<linkrel="stylesheet"type="text/css"href="css文件的路径"/>
****第三种结合方式的缺点：在某些浏览器下不起作用，一般使用第四种方式
****优先级（一般）
由上到下，由内到外，优先级由低到高。
后加载的优先级高
****格式：选择器名称{属性名:属性值;属性名:属性值;......}
css的基本选择器（三种）
**要对那个标签里面的数据进行操作
1）标签选择器div{css代码}
--使用标签名作为选择器的名称
<head>
<styletype="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>aaaaaa</div>
</body>
2）class选择器.名称{}
**每个html标签都有一个属性class
**<head>
<styletype="text/css">
div.test{
background-color:blue;
color:red;
}
p.test{
background-color:blue;
color:red;
}
可以简写为：
.test{
background-color:blue;
color:red;
}
</style>
</head>
**<body>
<divclass="test">aaaaaa</div>
<pclass="test">bbbbbbbbb</p>
</body>
3）id选择器#名称{}
**每个html标签上面都有一个属性id
--<divid="test">cccccccccc</div>
--<head>
<styletype="text/css">
div#test{
background-color:blue;
color:red;
}
p#test{
background-color:blue;
color:red;
}
可以简写为：
#test{
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<divid="test">aaaaaa</div>
<pid="test">bbbbbbbbb</p>
</body>
**优先级style>id选择器>class选择器>标签选择器
css的扩展选择器(了解)
1）关联选择器嵌套标签的样式的设置
**<div><p>wwwwwwwwww</p></div>
**设置div标签里面p标签的样式，嵌套标签里面的样式
--<head>
<styletype="text/css">
divp{
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div><p>wwwwwwwwww</p></div>
<p>aaaaaa</p>
</body>
2）组合选择器不同标签设置相同的样式
**<div>1111</div>
<p>2222</p>
**把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
--<head>
<styletype="text/css">
div,p{
background-color:blue;
color:red;
}
</style>
</head>
--<body>
<div>1111</div>
<p>2222</p>
</body>
3）伪（类）元素选择器
**css里面提供了一些定义好的样式，可以拿过来使用
**比如超链接
**超链接的状态
--原始状态鼠标放上去点击点击之后
:link:hover:active:visited
代码实现：
<head>
<styletype="text/css">
/*原始状态*/
a:link{
background-color:red;
}
/*悬停状态*/
a:hover{
background-color:green;
}
/*点击状态*/
a:active{
background-color:blue;
}
/*点击之后状态*/
a:visited{
background-color:gray;
}
</style>
</head>
<body>
<ahref="http://www.baidu.com">点击链接到百度网页</a>
</body>
css的盒子模型(了解)对数据进行操作，需要把数据放到一个区域里面（div）
1）边框border：统一设置
也可以分别设置：上border-top下：border-bottom左：border-left右：border-right
--<head>
<styletype="text/css">
div{
width:200px;
height:100px;
border:2pxsolidblue;
}
#div12{
border-right:2pxdashedyellow;
}
</style>
</head>
--<body>
<divid="div11">AAAAAAAAA</div>
<divid="div12">BBBBBBBBB</div>
</body>
2)内边距padding：统一设置内容距离上下左右四条边的距离
也可以分别设置：上下左右
<head>
<styletype="text/css">
div{
width:200px;
height:100px;
border:2pxsolidblue;
}
#div21{
padding:20px;
}
#div22{
padding-left:30px;
}
</style>
</head>
<body>
<divid="div21">AAAAAAAAA</div>
<divid="div22">BBBBBBBBB</div>
</body>
3)外边距margin：统一设置div距离最外边四条边的距离
也可以分别设置：上下左右。。。
css的布局的漂浮（了解）float：leftright
css的布局的定位(了解)
*position
**属性值：
--static：默认值，无特殊定位
--absolute：
将对象从文档流中拖出，使用left,right,top,bottom等属性相对于其进行绝对定位
--relative：不会将对象从文档流中拖出，对象不可层叠，但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
案例：图文混排案例
**图片和文字在一起显示
案例：图像签名
javascript的简介：是基于对象和事件驱动的脚本语言，主要应用在客户端
*基于对象：提供好了很多对象，可以直接拿过来使用
*事件驱动：html做网站静态效果，javascript动态效果
*客户端：专门指的是浏览器
*js的特点：
1）交互性信息的动态交互
2）安全性js不能访问本地磁盘的文件
3）跨平台性java里面跨平台性，虚拟机；只要能够支持js的浏览器，都可以运行
*javascript和java的区别：两者之间没有什么任何关系
1）java是sun公司，现在是Oracle；js是网景公司
2）java是面向对象的，js是基于对象的
3）java是强类型的语言，js是弱类型的语言
--比如：java里面inti="10";会报错
--js:vari=10;vari="10";都不报错
4）js只需要解析就可以执行，而java需要先编译成字节码文件，在执行
*js的组成（三部分）：
1）ECMAScript
--ECMA：欧洲计算机协会
--由ECMA组织制定的js语法，语句...
2）BOM
--broswerobjectmodel:浏览器对象模型
3）DOM
--documentobjectmodel：文档对象模型
js与html的结合方式（两种）
1）使用一个标签<scripttype="text/javascript">js代码；</script>
2）使用script标签，引入一个外部的js文件
--创建一个js文件，写js代码
--<scripttype="text/javascript"src="js的路径"></script>
注意：使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行
js的原始类型和声明变量
*java的基本数据类型：byteshortintlongfloatdoublecharbolean
*js定义变量都是用关键字var
*js的原始类型（五个）
--string字符串varstr="abc";
--number数字类型varm=123;
--booleantrue和falsevarflag=true;
--nullvardate=newDate();
**获取对象的引用，null表示对象引用为空，所有对象的引用也是object
--undifined定义一个变量，但是没有赋值varaa;
*typeof(变量名称)查看当前变量的数据类型
js的语句
**java里面的语句if判断("="表示赋值；"=="等于，表示判断)switch语句循环语句（forwhiledo-while）
**js里面的这些语句
--if判断语句
--switch(a){
case5:...
break;
case6:...
break;
default:...
........
}
**循环语句forwhiledo-while
--vari=5;
while(i>0){
alert(i);
i--;
}
--for(vari=0;i<=5;i++){
alert(i);
}
js的运算符
**js里面不区分整数和小数
--varj=123;
alert(j/1000*1000);
**j/1000*1000在java里面得到结果是0
**在js里面不区分整数和小数，123/1000*1000=0.123*1000=123
**字符串的相加和相减的操作
--varstr="123";
alert(str+1);在java和js中的结果都是1231，做的是字符串的连接
alert(str-1);相减时候，执行减法的运算，如果str中不是数字，会提示NaN：表示不是一个数字
**boolean类型也可以操作
***如果设置成true，相当于这个值是1；如果设置成false，相当于这个值是0；
**==和===区别
**都是做判断
**==比较的只是值；===比较的是值和类型
**直接向页面输出的语句（可以把内容显示在页面上），可以向页面输出变量，固定值和html代码。Document.write("")里面是双引号，如果设置标签的属性需要使用单引号。
--document.write("aaaa");
--document.write("<hr/>");
***document.write("<tableborder='1'bordercolor='red'>");
***document.write("</table>");
练习：实现99乘法表
js的数组
*java里面的数组定义int[]arr={1,2,3};
*js数组的定义方式（三种）
1）vararr=[1,2,3];vararr=[1,"2",3];vararr=[1,2,true];都可以
2）使用内置对象Array对象
vararr1=newArray(5);//定义一个数组，数组的长度是5
arr1[0]="1";
......
3）使用内置对象Array对象
vararr2=newArray(3,4,5);//定义一个数组，数组里的元素是3,4,5
*数组里面有一个属性length：获取到数组的长度
*数组的长度是可变的，数组可以存放不同的数据类型的数据。
js的函数（方法）
**在js里面定义函数（方法）有三种方式函数的参数列表里面，不需要写var，直接写参数名称
1）使用到一个关键字function
***function方法名(参数列表){
方法体;
返回值可有可无（根据实际需要）;
}
代码实现：//使用第一种方式创建函数
functiontest(){
alert("qqqqqq");
}
//调用方法
test();
//定义一个有参数的方法实现两个数的相加
functionadd1(a,b){
varsum=a+b;
alert(sum);
}
add1(3,5);
functionadd2(a,b,c){
varsum1=a+b+c;
returnsum1;
}
alert(add2(7,8,9));
2）匿名函数
varadd=function(参数列表){
方法体和返回值;
}
代码实现：varadd3=function(m,n){
alert(m+n);
}
//调用方法
add3(8,9);
3）一般也称为动态函数，用的少，了解即可
*使用到js里面的一个内置对象Function
varadd=newFunction("参数列表","方法体和返回值");
varadd4=newFunction("x,y","varsum;sum=x+y;returnsum;");
alert(add4(9,10));
//或者下边的代码
varcanshu="x,y";
varfangfati="varsum;sum=x+y;returnsum;";
varadd4=newFunction(canshu,fangfati);
alert(add4(5,3));
js的全局变量和局部变量
**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
--在方法外部使用，在方法内部使用，在另一个script标签使用
**局部变量：在方法内部定义一个变量，只能在方法内部使用
--只能在方法内部使用，如果在方法的外部调用这个变量，提示出错
--ie自带了一个调试工具，ie8以上的版本中，键盘上的F12,再页面下方出现一个条看控制台可以看到错误
script标签应该放置的位置
**建议把script标签放到</body>后面
**如果现在有这样一个需求：
--在js里面需要获取到input里面的值，如果把script标签放在head里面，会出现问题
--html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input的值，因为页面还没有解析到input那一行，肯定取不到
js的重载js不存在重载，但是可以模拟实现
例子：functionadd11(a,b){
returna+b;
}
functionadd11(a,b,c){
returna+b+c;
}
functionadd11(a,b,c,d){
returna+b+c+d;
}
alert(add11(2,2));//NaN
alert(add11(2,2,3));//NaN
alert(add11(2,2,4,5));//13
js的String对象
**创建String对象varstr="abc'；
**方法和属性（文档）
--属性length：字符串的长度
--方法
1）与html相关的方法
--bold():加粗fontcolor():设置字符串的颜色fontsize():设置字体的大小link():将字符串显示成超链接
2）与java相似的方法
--concat():连接字符串charAt():返回指定位置的字符串indexOf():返回字符串位置split():切分字符串成数组replace("",""):替换字符串--传递两个参数：第一个参数是原始字符，第二个参数是要替换成的字符substr(5,3)从第五位开始，向后截取三个字符substring(3,5)从第三位开始包括第三位到第五位结束，不包括第五位[3,5)
js的Array对象
**创建数组的三种方法
1）vararr1=[1,2,3];
2）vararr1=newArray(3);//长度是三
3）vararr1=newArray(1,2,3);//元素是1,2,3
vararr=[];//创建一个空数组
**属性length：查看数组的长度
**方法
concat();连接数组join();根据指定的字符分割数组push();向数组末尾添加元素，返回数组的新的长度**如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去pop();删除并返回数组的最后一个元素reverse();颠倒数组中的元素的顺序
js的Date对象
**在java里面获取当前时间
Datedate=newDate();
//格式化//toLocaleString()
**js里面获取当前时间
vardate=newDate();
//转换成习惯的格式date.toLocaleString();
js的Math对象数学的运算
**里面的都是静态方法，使用可以直接使用Math.方法();
js的全局函数
**由于不属于任何一个对象，直接写名称使用
**eval();执行js代码(如果字符串是一个js代码，使用方法直接执行)
--varstr="alert('1234');";
//alert(str);//alert('1234');
eval(str);//1234
**.....
js的函数的重载什么是重载？方法名相同，参数不同
*js不存在函数的重载，只会调用最后一个方法，但是可以通过其他方式模拟重载。js的函数把传递的参数保存到arguments数组里面可以利用判断arguments数组的长度来对应返回不同的处理结果
模拟重载效果代码实现：
functionadd1(){
if(arguments.length==2){
returnarguments[0]+arguments[1];
}elseif(arguments.length==3){
returnarguments[0]+arguments[1]+arguments[2];
}elseif(arguments.length==4){
returnarguments[0]+arguments[1]+arguments[2]+arguments[3];
}else{
return0;
}
}
//调用
alert(add1(1,2));//3
alert(add1(1,2,3));//6
alert(add1(1,2,3,4));//10
alert(add1(1,2,3,4,5));//0
js的bom对象
**bom：broswerobjectmodel:浏览器对象模型
**有哪些对象？
--navigator：获取客户机的信息（浏览器的信息）
--screen:获取屏幕的信息
--location：请求的url地址
***href属性
1）获取到请求的url地址
--document.write(location.href);
2）设置url地址
--页面上安置一个按钮，按钮上绑定一个事件，当点击这个按钮，页面可以跳转到另外一个页面
<body>
<inputtype="button"value="JumpBaidu"onclick="href1();"/>
<scripttype="text/javascript">
&