JavaWeb学习笔记分享(必看篇)

下面小编就为大家带来一篇JavaWeb学习笔记分享(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

自定义列表

   

:表示列表的范围        **在里面

:上层内容        **在里面

:下层内容 

有序列表

   

:有序列表的范围        --属性 type:设置排序方式,1(认),a,i、、

        **在ol标签里面

具体内容

   

无序列表

   

:无序列表的范围        --属性 type:circle(空心圆)、disc(认的实心圆)、square(实心方块)

        **在ul标签里面

具体内容

 

图像标签

    --属性:src、width、height、alt(图片显示文字,把鼠标移动到图片上,停留片刻显示内容 或者是图片显示出错时显示文字,但有些浏览器不显示,没有效果)

        **

 

路径的介绍

    *分类:两类

    **绝对路径 eg. http://www.baidu.com/b.jpg

    ***三种相对路径 一个文件相对于另外一个文件的位置

        --html文件图片在同一个路径(目录)下,可以直接写文件名称

        --在html文件中,使用与其在同一个路径下的img文件夹下的a.jpg文件 使用方法:imga.jpg

            **d:htmlstudycode4.html

            **d:htmlstudycodeimga.jpg

        --图片在html文件的上层目录中,此时图片使用方法:../c.png     ../表示上层路径    

               

链接标签

    **链接资源

    -- 显示页面上的内容

        **href:链接的资源的地址

        **target:设置打开的方式,认是在当前页打开

            --_blank :在一个新窗口打开

            --_self :在当前页打开 认的

    --链接标题:当超链接不需要跳转页面时,在href中添加#(占位符)就可以了

    **定位资源

        --如果想要定位资源:定义一个位置

            顶部

        --回到这个位置

                回到顶部

               

        --原样输出标签

需要原样输入的内容

           

表格标签

    *作用:可以对数据进行格式化,使数据显示更加清晰

    *属性 border(表格线粗细) bordercolor(表格线颜色) cellspacing(单元格间距离) width height

    *

: 表示表格的范围    **在table里面,表示一行

    --设置对齐方式 align :left center right

        ***在tr里面,表示一行里边的单元格

        **使用th也可以表示单元格:表示可以实现居中和加粗

    *表格的标题,放在table里边

    *操作技巧:

        **首先数有多少行,在数每行里面有多少个单元格   

    *合并单元格

        **rowspan :跨行(纵向合并)

           

13

        **colspan :跨列(横向合并)

           

表格练习

 

表单标签

*例如注册开心网时,可以提交数据到开心网的服务器,这个过程可以使用表单标签实现

*

:定义一个表单范围*属性

        ** action :提交到的地址,认提交到 当前的页面

        ** method : 表单的提交方式

            --常用的有两种: get 和 post ,认是get请求

        ** get 和 post 的区别

            1)get请求地址栏会携带提交的数据,post不会携带(数据在请求体里面)

            2)get请求安全级别较低,post较高

            3)get请求数据大小有限制,post没有限制

        ** enctype :一般请求下不需要这个属性,做文件上传时候需要设置这个属性

    **输入项:可以输入内容或者选择内容的部分

        --大部分的输入项可使用

        ********在输入项里面需要有一个name属性

 

        ***普通输入项:

        ***密码输入项:

        ***单选输入项:

            --在里边需要属性 name

            --name的属性值必须要相同

            --必须要有一个value值

            ****实现认选中的属性

                ***checked="checked"

        ***复选输入项:

            **在里边需要属性 name

            **name的属性值必须要相同

            **必须要有一个value值

            ****实现认选中的属性

                ----checked="checked"

        ***文件输入项:

        ***下拉输入项(不是在input标签里面的)

           

                请选择

                1991

                1992

                1993

           

            ****实现认选中的属性

                ----selected="selected"

        *** 文本域(如:注册账号时填写个人信息简介的方框)

           

        ***隐藏项(不会显示页面上,但是存在于 HTML代码里面)

           

        ***提交按钮

           

           

            --提交之前地址:C:UsersHappyDogDesktopindex.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形式

 

        ***使用(点击)图片来提交

           

 

        ***重置按钮 :回到输入项的初始状态

           

           

 

        ***普通按钮(和js在一起使用的)

           

 

案例:使用表单标签实现注册页面

    表格单元格内容为空时,一般用占位符( (转义空格))来填充

 

html中的其他的常用标签的使用

    ** b(加粗) s(删除线) u(下划线) i(斜体) pre(原样输出) sub(下标) sup(上标) div(自动换行) span(在一行显示) p(段落标签)   

 

html的头标签的使用

    **html两部分组成 head 和 body

    **在head里面的标签就是头标签

    **title标签:表示在标签显示内容

    **标签 :设置页面的一些相关内容

        --

        --定时跳转指定页面

    **base标签 :设置超链接的基本的设置

        --可以统一设置超链接的打开方式

    **link标签 :引入外部文件

 

框架标签的使用

    **

        **rows :按照行进行划分

           

分成上下两部分,上边80,下边任意        **cols :按照列进行划分

           

分成左右两部分,左边80,右边任意    ** 具体显示页面

        **

    *使用框架标签的时候,不能写在head和body里面,使用了框架标签,需要把body去掉,写在head外边

 

    *如果在左边的页面链接,想让内容显示在右边的页面中,可以设置超链接里面的target属性,将target的值设置为框架中的名字

        **百度

   

       

       

           

           

       

   

知识总结

    1)html操作思想:使用标签把要操作的数据包起来,通过修改标签属性值,来实现标签内数据样式的变化

    2)font标签 属性:size 取值范围1-7 color:十六进制数 #ffffff

    3)标题标签

...... :从h1到h6字体越来越小,自动换行    4)注释

 

CSS的简介

    **CSS:层叠样式表

        ** 层叠:一层一层的

        ** 样式表:很多的属性属性

    **使页面显示效果更加好

    **CSS将网页内容显示样式进行分离,提高了显示功能

 

CSS和html的结合方式(四种结合方式)

    1)在每个html标签上面都有一个属性 style,把CSS和html结合在一起

        --

天之道,损有余而补不足,是故虚胜实,不足胜有余。

    2)使用html的一个标签实现

 

    ----代码实现

                  

               

               

                      

                        天之道,损有余而补不足,是故虚胜实,不足胜有余。

                   

               

    3)在style标签里面 使用语句

        @import url(css文件的路径);

               

        -- 第一步:创建一个css文件

        ----

    4)使用头标签 link,引入外部css文件 放在里边

        -- 第一步:创建一个css文件

        --

    ****第三种结合方式的缺点:在某些浏览器下不起作用,一般使用第四种方式

    ****优先级(一般)

        由上到下,由内到外,优先级由低到高。

        后加载的优先级高

    ****格式:选择器名称{属性名:属性值;属性名:属性值;......}

 

css的基本选择器(三种)

    **要对那个标签里面的数据进行操作

    1)标签选择器 div {css代码}

        --使用标签名作为选择器的名称

       

              

       

       

           

aaaaaa

        

    2)class选择器 .名称 {}

        **每个html标签都有一个属性 class

        **

                  

        

        **

           

aaaaaa

           

bbbbbbbbb

        

       3)id选择器 #名称 {}

        **每个html标签上面都有一个属性 id

        --

cccccccccc

        --

                  

        

        --

           

aaaaaa

           

bbbbbbbbb

        

    **优先级 style > id选择器 > class选择器 > 标签选择器

 

css的扩展选择器(了解)

    1)关联选择器 嵌套标签的样式的设置

        **

wwwwwwwwww

        **设置div标签里面p标签的样式,嵌套标签里面的样式

        --

                  

        

        --

           

wwwwwwwwww

           

aaaaaa

        

    2)组合选择器 不同标签设置相同的样式

        **

1111

        

2222

        **把div和p标签设置成相同的样式,把不同的标签设置成相同的样式

        --

                  

        

        --

           

1111

           

2222

        

    3)伪(类)元素选择器

        ** css里面提供了一些定义好的样式,可以拿过来使用

        **比如 超链接

            **超链接的状态

                --原始状态 鼠标放上去 点击 点击之后

                 :link :hover :active :visited

        代码实现:       

       

                  

        

       

            点击链接百度网页

       

    

css的盒子模型(了解) 对数据进行操作,需要把数据放到一个区域里面(div)

    1)边框 border :统一设置

            也可以分别设置:上 border-top 下:border-bottom 左:border-left 右:border-right

        --

                  

        

        --

           

AAAAAAAAA

           

BBBBBBBBB

        

    2) 内边距 padding :统一设置 内容距离上下左右四条边的距离

            也可以分别设置:上下左右

       

                  

        

       

           

AAAAAAAAA

           

BBBBBBBBB

        

    3) 外边距 margin :统一设置 div距离最外边四条边的距离

                也可以分别设置:上下左右。。。

 

css的布局的漂浮(了解) float :left right

 

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里面 int i = "10";会报错

            --js: var i = 10; var i = "10";都不报错

        4)js只需要解析就可以执行,而java需要先编译成字节码文件,在执行

 

    *js的组成(三部分):

        1)ECMAScript

            -- ECMA :欧洲计算机协会

            --由ECMA组织制定的js语法,语句...

        2)BOM

            --broswer object model:浏览器对象模型

        3)DOM

            --document object model:文档对象模型

           

js与html的结合方式(两种)

    1)使用一个标签

 

    2)使用script标签,引入一个外部的js文件

        -- 创建一个js文件,写js代码

        --

    注意:使用第二种方式的时候,就不要在script标签里面写js代码了,不会执行

 

js的原始类型和声明变量

    *java的基本数据类型:byte short int long float double char bolean

    *js定义变量 都是用关键字 var

    *js的原始类型(五个)

        --string 字符串 var str = "abc";

        --number 数字类型 var m = 123;

        --boolean true和false var flag = true;

        --null var date = new Date();

            **获取对象的引用,null表示对象引用为空,所有对象的引用也是object

        --undifined 定义一个变量,但是没有赋值 var aa;

    * typeof(变量名称) 查看当前变量的数据类型

   

js的语句

    **java里面的语句 if判断("="表示赋值;"=="等于,表示判断) switch语句 循环语句(for while do-while)

    **js里面的这些语句

        --if判断语句

        --switch(a) {

            case 5: ...

                    break;

            case 6: ...

                    break;

            default:...

            ........

        }

    **循环语句 for while do-while

        --var i = 5;

         while(i>0) {

            alert(i);

            i--;

         }

        --for(var i = 0;i

            alert(i);

        }

 

js的运算符

    **js里面不区分整数和小数

        --var j = 123;

         alert(j/1000*1000);

         ** j/1000*1000 在java里面得到结果是0

         ** 在js里面不区分整数和小数, 123/1000*1000 = 0.123*1000 = 123

    **字符串的相加和相减的操作

        --var str = "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("

");            ***document.write("

");            ***document.write("

");练习:实现99乘法表

 

js的数组

    *java里面的数组 定义 int[] arr = {1,2,3};

    *js数组的定义方式(三种)

        1)var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以

        2)使用内置对象 Array对象

            var arr1 = new Array(5); // 定义一个数组,数组的长度是5

            arr1[0] = "1";

            ......

        3)使用内置对象 Array对象

            var arr2 = new Array(3,4,5); // 定义一个数组,数组里的元素是3,4,5

    * 数组里面有一个属性 length :获取到数组的长度

    * 数组的长度是可变的,数组可以存放不同的数据类型的数据。

 

js的函数方法

    **在js里面定义函数方法)有三种方式 函数的参数列表里面,不需要写var,直接写参数名称

        1)使用到一个关键字 function

            *** function 方法名(参数列表) {

                    方法体;

                    返回值可有可无(根据实际需要);

             }

            代码实现:// 使用第一种方式创建函数

                            function test() {

                                alert("qqqqqq");

                            }

                            // 调用方法

                            test();

 

                            // 定义一个有参数的方法 实现两个数的相加

                            function add1(a,b) {

                                var sum = a+b;

                                alert(sum);

                            }

                            add1(3,5);

 

                            function add2(a,b,c) {

                                var sum1 = a+b+c;

                                return sum1;

                            }

                            alert(add2(7,8,9));

        2)匿名函数

            var add = function(参数列表) {

                方法体和返回值;

            }

            代码实现: var add3 = function(m,n) {

                            alert(m+n);

                        }

                        // 调用方法

                        add3(8,9);

        3)一般也称为动态函数,用的少,了解即可

            *使用到js里面的一个内置对象 Function

            var add = new Function("参数列表","方法体和返回值");

            var add4 = new Function("x,y","var sum;sum=x+y;return sum;");

            alert(add4(9,10));

            // 或者下边的代码

            var canshu = "x,y";

            var fangfati = "var sum;sum=x+y;return sum;";

            var add4 = new Function(canshu,fangfati);

            alert(add4(5,3));

 

js的全局变量和局部变量

    **全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用

        --在方法外部使用,在方法内部使用,在另一个script标签使用

    **局部变量:在方法内部定义一个变量,只能在方法内部使用

        --只能在方法内部使用,如果在方法的外部调用这个变量,提示出错

        --ie自带一个调试工具,ie8以上的版本中,键盘上的F12,再页面下方出现一个条 看控制台可以看到错误

 

script标签应该放置的位置

    **建议把script标签放到

相关文章

Java中的String是不可变对象 在面向对象及函数编程语言中,不...
String, StringBuffer 和 StringBuilder 可变性 String不可变...
序列化:把对象转换为字节序列的过程称为对象的序列化. 反序...
先说结论,是对象!可以继续往下看 数组是不是对象 什么是对...
为什么浮点数 float 或 double 运算的时候会有精度丢失的风险...
面试题引入 这里引申出一个经典问题,看下面代码 Integer a ...