javaweb编程.pdf

《javaweb编程.pdf》由会员分享，可在线阅读，更多相关《javaweb编程.pdf（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、WEB WEB-1 Day01-1 1、html 基础-1 2、主要标记-2(1)链接-2(2)表格-3(3)表单-4 Day02-5 css-5 1、什么是 css?-5 2、css 的基本语法-5 3、选择器-5 4,样式的优先级-6 5、样式的继承-6 6，常用的属性-6 7、两个重要属性-8 8、浏览器的“混杂模式”。-8 Day03-8 1、javascript 是什么?-8 2、javascript 的组成部分-8 3、ECMAScript(语言基础)-9 Day01 1、html 基础基础 (1)什么是 html(hypertext markup language)?制作网页的标

2、记语言。特点：a,以.html 或.htm 结尾来保存。b,由浏览器解释执行。c,大小写不敏感 d,容错性好 (2)w3c 推荐的网页设计标准 数据与结构:html 文件。外观:样式文件(css 文件)。行为：ECMAscript 文件(javasript 文件)。(3)主要的浏览器 ie,firefox,chrome,safari,opera (4)html 文件的基本结构 标题 2、主要标记、主要标记 (1)链接链接 a,基本用法 clickMe href:指定点击链接之后，跳转的地址。target:_self:在当前窗口中打开。_blank:在新的窗口中打开。b,使用图形作为链接 其中，

3、img 标记，src 指定图片的地址（地址不一定 是一张图片，可能是一个程序的地址，由程序来 生成相应的图片）。c,使用热点(使用图形的某个区域作为链接)step1 使用 map 标记定义热点 step2 在图形标记当中，使用热点来划分区域。d,使用锚点(在页面内部跳转)step1 定义一个锚点 top info.step2 使用锚点来跳转 to top e,发送邮件 给我发邮件 f,链接的伪样式 (2)表格表格 a,基本用法 cellpadding:单元格内部的数据与单元格之间的空隙。cellspacing:单元格之间的空隙。b,居中 水平居中:align(left,right,center

4、)垂直居中:valign(top,middle,bottom)c,单元格的合并 colspan:水平方向合并 rowspan：垂直方向合并 d,表格可以嵌套 td 的内容又是一个表格 e,表格的完整结构 标题 thead,tfoot:出现 0/1 次。tbody:出现 1 次或多次 习惯上先写 thead,然后是 tfoot,最后是 tbody。(3)表单表单 a,什么表单 用于收集用户的数据，并提交给服务器来处理。b,表单属性 action:服务器端的一个程序的地址，用于处理表单数据。method:表单提交的方式。c,常见表单元素 input 标记:1)文本输入框:其中 name 决定了浏览

5、器是否将文本输入的内容提交 给服务器。value 设置缺省值。2)提交按钮:3)重置按钮:4)密码输入框:5)单选框:其中，checked 设置缺省值。6)多选框:7)上传文件:8)隐藏域:非 input 标记 1)多行文本输入框:2)下拉列表 北京 上海 武汉 可以给 select 添加一个multiple=multiple,此时，下拉列表可以当作多选框去用。Day02 css 1、什么是、什么是 css?cascading stylesheet(级联样式表)。为网页提供 外观（也就是，网页的表现形式）。将网页的外观 写在一个 css 文件里，方便页面代码的维护（将 表现与数据分离）。2、c

6、ss 的基本语法的基本语法 选择器 属性 1:属性值 1;.属性 n:属性值 n;符合选择器要求的标记，会添加对应的样式。3、选择器、选择器 1)标记选择器(简单选择器)body font-size:30px;2)class 选择器 .s1 font-size:60px;对 class 属性值匹配的标记起作用。p.s2 font-size:90px;只针对 p 标记，并且 class 属性值是 s2。3)id 选择器#d1 width:200px;height:200px;background-color:red;只针对 id 属性值为 d1 的标记起作用。注意，在同一个 html 文件当中，

7、所有的标记的 id 属性值必须唯一。4)选择器的派生#d2 p font-size:120px;id 属性值是 d2,并且，在该标记下有一个子标记是 p。对 p 中的内容起作用。5)选择器的分组 h1,h2,h3 font-size:160px;对 h1,h2,h3 三个标记都起作用。4,样式的优先级样式的优先级 内联样式(即在标记里面，使用 style 属性定义的样式)内部样式(即在 html 文件里，使用 style 标记定义的样式)外部样式(即在.css 文件里定义的样式)默认样式(浏览器提供的)优先级从上外下，越来越低。5、样式的继承、样式的继承 子标记会继承父标记的样式。6，常用的属

8、性，常用的属性 1)文本 font-size:30px;/字体大小 color:red;/颜色 font-family:宋体;/字体 font-weight:900;/粗细 text-align:right/center/left;/水平对齐 line-height:30px;/行高 2)定位 width:200px;/宽度 height:200px;/高度 margin:/外边距 margin-left:200px;margin-right:100px;margin-bottom:80px;margin-top:60px;也可以简化为:margin:60px 100px 80px 200px

9、;/顶，右，底，左 margin:20px auto;/上，下 20px,左右居中。padding:/内边距 padding-left:100px;padding-right:80px;padding-bottom:60px;padding-top:40px;padding:40px 80px 60px 100px;/顶，右，底，左 内边距会将父标记撑开。块标记与行内标记:块标记:需要另起一行的标记。div,img,p,form,table,ul,li,h1,行内标记:不需要另起一行，从左到右摆放。,3)背景 background-color:red;/背景颜色 background-imag

10、e:url(t1.jpg);/背景图片 background-repeat:no-repeat/repeat-x/repeat-y;background-position:20px 40px;/水平 垂直,/为负数，表示水平方向向左，垂直方向向上。background-attachment:fixed/scroll(缺省);/依附方式 /没有平铺，水平平铺，垂直平铺 也可以简化为 background:背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置 比如:background:url(nane.gif)no-repeat fixed 20px 40px;4)边框 border:1p

11、x solid red;/宽度、类型、颜色 border-left:1px solid red;border-right:1px solid red;border-bottom:1px solid red;border-top:1px solid red;5)列表 list-style-type:none;/除掉列表的项目符号 6)浮动 取消标记独占一行的特性。float:left/right;clear:both;/取消浮动 7)链接的伪样式 a:link color:red 没有访问时 a:visited color:blue 访问后 a:active color:lime 鼠标点击但还没

12、有放开时 a:hover color:aqua 鼠标指向时 7、两个重要属性、两个重要属性 1)display:block:以块标记的方式显示 inline:以行内标记的方式显示 none:不显示 2)position:static:(缺省值),浏览器默认情况下，按从左到右，从上到下摆放各个标记。absolute:相对父标记偏移 relative:首先按浏览器默认的方式摆放，然后，再偏移。8、浏览器的“混杂模式”。、浏览器的“混杂模式”。一个 html 文档，如果没有添加文档类型声明，IE 会开启混杂模式,即让浏览器降级（为了兼容老的 页面）。如果加上文档类型声明，则开启“标准模式。Day03

13、 1、javascript 是什么是什么?是由网景公司开发的一种用来操作浏览器，操作 网页（对网页进行动态的交互，实现动态的效果）的 一种脚本语言。由浏览器来解释执行。2、javascript 的组成部分的组成部分 1)ECMAScript 由 ECMA 组织制订的一个脚本语言的规范，该规范 定义了脚本语言的语言基础部分（包括数据类型、关键字、标识符、对象、语句、运算符）。ie,firefox,safari,chrome,opera 都支持该规范。2)DOM Document Object Model:文档对象模型。早期，没能 DOM 规范，各个浏览器为了解析 html,开发了属于各自的 do

14、m 模型(称为 dhtml,因为可以 通过修改 dom 节点，来实现一些动态效果)。使用 dhtml 开发的页面浏览器兼容性不好，所以，w3c 才开发了一套 dom 模型（也就是说，这是一个标准化 的 dom 模型）。w3c dom 各个浏览器支持的情况不一，主要是 ie 支持不够好。通过使用 dom 模型，可以实现对网页的交互操作。3)BOM Brower Objct Model:浏览器对象模型。对浏览器本身进行操作：获取浏览器的信息（包括类型、版本、语言支持）对窗口进行操作（打开窗口、关闭窗口.）显示器分辨率 浏览器的地址信息 此外，还包括获取 XmlHttpRequest 对象。BOM

15、并没有规范，但是各个浏览器基本上都支持。3、ECMAScript(语言基础语言基础)1)标识符 以字母、$、_ 开头，后面可以是字母、$、_和 数字。2)语句 以;结尾。3)大小写敏感。4)弱类型语言 变量在使用时，不能直接声明其类型。变量的实际类型在运行时才确定，并且，可以 发生改变。比如:var i=100;i=abc;5)注释 a,单行注释:/b,多行注释:/*/6)数据类型 (1)基本类型 a,number 数字类型 b,string string 类型的值必须用，或者括起来。没有 字符类型(char)。string 是一种基本类型。c,boolean 值可以是 true/false;

16、boolean 类型 以下几种情况，结果为 true:非空的字符串 非零的数字 对象 如果是 null 或者 undefined，结果为 false。d,null null 类型只有一个值,null。如果一个变量的作用是保存一个对象的地址，在没有给变量赋值前，可以预先赋值为 null。var obj=null;if(obj!=null)obj=.e,undefined undefined 类型也只有一个值，undefined。一个变量申明过，但没有赋值，其类型是 undefined。(2)数据类型的转换 a,string 转换成 number parseInt(str):转换成整数,在转换时，

17、如果字符串末尾包括 字符，会自动将该字符除掉。比如 可以 parseInt(123a);ok!parseInt(a123);error!isNaN(data):如果 data 是非数字，结果为 true。parseFloat(str):转换成小数,结果有误差。b,number 转换成 string toString()方法即可。比如:var n1=100;n1.toString();/内部，js 会先将 number 转换成 /Number 包装类，然后调用 toString()方法。(3)字符串的常用属性和方法 length 属性:返回字符串的长度 charAt(index):返回指定位置的

18、字符 substring(from,to):返回子字符串,从 from 开始，但不包括 to。indexOf(str):指定字符串在原字符串中第一次 出现的位置。lastIndexOf(str):指定字符串在原字符串中 最后一次出现的的位置。match(regexp):返回匹配指定正则表达式的字符串，返回的 结果是一个数组。var str2=asd212abc345;var reg2=/0-9+/g;var arr=str2.match(reg2);search(regexp):返回按照正则表达式检索到的字符串位置 str2.search(reg2)toLowerCase()/toUpperC

19、ase()返回小写/大写形式 replace(regexp,abc):替换符合 regexp 正则表达式规定的字符串 str2=str2.replace(reg2,888);split():将一个字符串分解。(4)引用类型（后面讲）7)数组 数组的长度是可变的，数组中，可以混合存放 不同类型的数据。a,创建数组 方式一:var arr=new Array();arr0=1;arr3=4;方式二(使用字面量的方式):var arr=;arr0=1;arr3=4;或者 var arr=1,3,4;b,创建多维数组 var arr=new Array();arr0=1,2,3;arr1=11,22;arr2=8;c,数组的排序 可以使用 sort()方法来排序，默认情况下，采用字典顺序。可以为 sort()方法提供一个函数，来指定排序的规则。sort(function(a,b)return a-b;);d,数组的常用属性和方法 length 属性:返回数组的长度 toString()方法:返回数组的字符串表示 concat()方法:用于连接两个数组,会生成 一个新的数组。join()方法，用于将数组中的各个元素 连接成字符串。reverse()方法，将数组反转,不会生成新的数组。slice()用于截取数组的一部分并以 数组的形式返回。