网页编程课堂笔记.doc

网页编程第四章一、工作原理在地址栏中输入URL-internet-服务器IE解释HTML编码变成网页二、HTML:标记语言以结束语法：内容 内容 注：1、 标记结束 2、属性要写内 3、值可用,省略。建议用双引号 4、不区分大小写 5、常用标记1. . ：网页的开始和结束标记 注：所有标记都位于中间2. . : 网页的头，放设置代码3. . : 网页的主体,放网页的主要内容4. . :设置网页标题栏上的文字 注：放在5. 描述信息 注：放在 例： 2秒后自动刷新网页2秒后刷新到C:附加：属性: bgcolor=背景色,background=背景图片,bgproperties=fixed 背景图片固定6. 段落 属性：align=left/center/right 对齐方式(左中右) 注：可以省略,碰到第二个，认为该段结束7.到标题 注：1.字号最大，字号最小 2.有align 3.标题与段落，标题与标题区别只有字号区别8. 回车 注：与区别为多一个空行9. :按预定格式输出，原样显示10.字符格式化 斜体 加粗 带下划线 上标 下标11.无序列表12.有序列表13.列表项注： a.有序列表可以加type=1/A/a/I/i（数字/大字母.） b. 有start属性，可以指定起始编号14.水平线 属性: size=粗细,width=宽度,noshade无阴影,color=颜色 align=对齐方式 注：宽度可以使用百分比15.字体 属性：size=大小,color=颜色,face=字体类型16.插图片 src=图片位置,align=bottom/middle/top 对齐方式 alt=提示文字 注：a.对齐方式是指与图片同行的文字的对齐方式 b.提示文字指图片不正常显示，则显示文字。另鼠标悬停时 文字17.插声音和视频18. 超链接 属性：name=锚名称 href=路径格式：提示文字或图片第一种：进入 链接某页面第二种：雪山飞狐 为目标取名 雪 链接到名为xue的位置第三种：雪 跳到另一网页的某个位置第四种：联系我 用outLook发邮件第五章第五章表格:显示数据和布局组成:表格-行-单元格标记:表格 行 单元格 列标题 表标题1.属性: align 对齐方式(指表格的位置),width 宽, height高,bgcolor 背景色,background 背景图,bordercolor 边框色, border 边框的粗细cellspacing 单元格之间的间隔,默认为1,cellpadding 内容与边框的间隔2. 属性: align 对齐方式(行内容的位置)(left/center/right)bgcolor 背景色,bordercolor 边框的颜色,valign 垂直对齐方式(bottom/middle/top)3. 属性:align,valign,width,height, bgcolor,bordercolor,background colspan合并列,rowspan合并行4. 列标题 注:相当于,只是中的内容自动加粗居中5.表标题 注:位于表格上方,居中, 编码时需要写在标记里面表单1、表单标记 注：所有的表单元素(组件)放在标记中 属性： a.method=post/get 提交方式 post在地址栏中不显示提交内容（表单元素的名称及值） get 显示提交内容 b.action提交页面2.表单元素相关标记 a. 属性： type 文本框 text 密码框 password 提交按钮 submit 单击后会跳转到action所规定的提交页面 重置按钮 reset 清空，使表单元素回到初始状态 普通按钮 button 图片提交 image 功能相当于submit 单选框 radio 复选框 checkbox 文件 file 隐藏域 hidden name 表单元素的名称 value 值 size 文本框的宽度 maxlength 文本框最大字符数 checked 选中(单选和复选) src 图片提交按钮的路径操作细节1.与的区别: 前者为图片提交，将所有表单元素的名字及值上传到服务器 后者为页面跳转，只是简单的超链接。2.单选框和复选框分组，只需要将name即名字设置为一样就OK3.单复框有提交值与提示值之分 男 value为提交值，提交时上传服务器 标记后的男会显示在页面上，起提示作用,跟提交无关4.列表框和文本域不能使用input标记5.单复框用checked，列表框用selected选中6.按钮可以用也可以用标记,但可以改变字体或在按钮上加图片 b.和 列表框及列表项 高中 大专 属性： size :框的大小（行） multiple:是否可以选择多项c. 文本域 属性： cols 总列数 rows 总行数我喜欢 没有value属性，值必须放在中间 附:等同于按钮但按钮按钮第一，二章专业术语:万维网,协议,UrL,HTML,网站,网页,静态网页,动态网页Dreamweaver 梦工厂组成:菜单栏 ,插入栏,面板组,属性检查器三种视图:代码/拆分/设计菜单栏:编辑-标签库(相当于帮助)/首选参数(可以改字体/颜色)插入(插入所需要的标记)窗口:显示所需的面板插入栏:常用(普通标记)/布局(对页排版)/表单(表单元素) /文本(格式化文字的标记)/flash元素操作一:建站点(管理网站信息)建文件夹-D中-站点菜单-新建站点-为站点取名-否,不使用服务器技术-选择站点所对应的文件夹-如何连服务器:无-完成操作二:设置页面的属性属性检查器-页面属性-整个页面的字体/字号/前景/背景/超链接操作三:布局插入栏-布局-布局-布局表格/布局单元格区别:布局表格:不能直接输入文字或插图片,它生成的是,里 面可以放布局单元格布局单元格:能插文字和图片,但不能放表格或单元格,生成附:超链接路径1.完整路径 E:1.html2.相对路径: 1.html或 aa1.html3.URL: 4.文件Doc,ppt.excel第三章模板1、新建站点(必须建站点才能做模板)2、新建一个普通网页(即做模块就跟做网页一样)3、各网页相同部分在模块中做好，不同部分变成可编辑区域： 选中-插入-模板对象-可编辑区域4、创建模板 插入-模板对象-创建模板注：模板的后缀.dwt,放在目录Templates中5、使用模板 在需要套用模板的页面-编辑-模板-套用模板到页插入表单和表单元素 注：1.先插入表单再插表格，最后加表单元素 2.可以在属性栏中更改表单元素的属性多媒体1、flash文本，flash按钮，flash(swf) 步骤：插入-媒体 注：gif图片，插入-图像层：z轴越大，离我们越近浮动广告：1、插入层:插入-布局对象-层2、时间轴：窗口菜单-时间轴(让时间轴可见) 将层拖到时间轴上-拖长时间轴（速度慢些）-选择最后一帧-将层拖到最后停止的位置-选择自动播放，循环播放-在中间帧右击选择插入关键帧-拖动层（调置曲线路）行为：窗口菜单-行为(事件)常用事件:onLoad:页面打开onclick:单击onDoubleClick:双击onmouseOver:鼠标悬停onmouseOut:鼠标离开onmouseUp:鼠标松开onmouseDown:鼠标按下图片：jpg:图片效果好,不支持动画，占空间大gif:支持动画，但像素低，效果差，占空间小第七章样式表:css(级联样式表/层叠样式表)作用:1、扩展了HTML的功能 2、提高重用功能 3、动画常用样式1、文本text-align: left/right/center 对齐方式text-decoration:overline/underline. 文字装饰line-height:行间距letter-spacing:字间距text-indent:缩进(长度单位)5em2、背景/颜色color:字体颜色background-color:背景色background-image:背景图片background-repeat:no-repeat(不重复)（重复方法） /repeat(重复) /repeat-x(横向重复) /repeat-y(纵向)background-position:对齐方式 left/right/center/bottom/top3、字体font-family：字体font-size:字号font-style:字体样式(斜体等)font-weight:字体粗细4、边框：Border-style:边框样式 double(双线) dashed(虚线).border-color:边框颜色border-left-color:左边框颜色.5、定位(一般用于层)150页样式分类一、行内样式表:样式少注：只能当前标记内的内容有效格式：二、页面级样式注：当前页面有效.页面样式必须写在标记中,标记习惯写在，写在标记中称为选择器1、标记选择器标记名属性:值;属性2:值.tdcolor:red 将当前页的所有的td标记字体改 为红色2、类选择器 . 类名属性：值;属性2：值.;作用：可用于不同的标记或同一标记中部分使用调用：3、ID选择器 # ID名属性:值;属性2：值.;作用：一般只用一次，避免命名冲突,因为ID即标 记的名称调用：三、外部样式直接写选择器，样式文件后缀为.css调用：方法一:import 样式文件路径; 注：必须写在标记中方法二：优先级行-页-外部第八章DHTML:动态HTML单纯的HTML只能控制网页的内容和格式.(标记语言)DHTML=HTML+CSS+脚本脚本:嵌在网页的编程语言JavaScript:非java客户端开发也可用于服务器开发,主要是客户端三种语法:1、写在事件里面例： 2、写在标记中,写在head例 alert(hello world); 3、外部脚本,脚本文件的后缀.js a.脚本文件 alert(hello world); b.在网页中调用脚本文件 注：每写一句加分号 区分大小写 注释/,/* */常用的输入和输出document.write();在网页上输出alert(); 消息框confirm(); 选择框，返回值为boolean,确定true/取消falseprompt(提示信息,默认值); 输入框，返回String,即用户所输入的内容变量：1、变量的声明 var 变量名;2、变量作用域全局变量：作用于整个网页，可声明也可不声明(在函数外声明)局部变量：作用于某个方法（函数）,必须声明(在函数内声明)数据类型：string,number,boolean,null;强制类型转换parseInt() ,parseFloat()判断是否为数字isNaN(),为数字是false,不为数字是true+号，能加则加，不能则连for(i=1;i=10;i+) document.write( );注：在脚本中，在网页上显示标记，必须写在document.write()中编码步骤画页面-表单-表格-表单元素(一般将按钮变成普通按钮)-为表单取名-为表单元素取名-写脚本例：取得某个文本框中的值： 表单名.表单元素名.valuefor循环function fun()var op=new Option(1900,1900); /产生Option /相当于1900frm.year.options.add(op); /在表单frm的year列表框中添加op /网页打开时调用fun()函数frm.day.length=0; /设置day列表框的长度为0,相当清空var arr=new Array(0,31,28,31,30,31,30,31,31,30,31,30,31);/用下标做月份,值每个月的最后一天var m=frm.month.value; /从月份列表框中得到月for(i=1;i=arrm;i+) /arrm,利用月找到每个月的最后一天 var op=new Option(i,i); frm.day.options.add(op);第九章知识点:一、数组定义：var 数组名=new Array(元素/长度);例:var arr=new Array(1,2,3); /元素 var arr=new Array(5); /声明一个长度为5的数组输出：document.write(arr); /整个数组输出document.write(arr0); /输出第1个元素属性：length 求数组长度方法：join() 联接sort() 排序(升序)reverse() 逆序例：var s=arr.join(-); /将arr用-联接成字符串放到s二、函数function 方法/函数名(参数1，参数2)方法体；注：参数不加类型，直接写变量名function fun(a,b)alert(a*b); /接收两个参数，输出积调用:fun(10,20)系统方法eval(); 将字符串进行计算isNaN(); 是数字为false,不是数字为true,约束parseInt();parseFloat();核心对象：String,Math,DateString:1、var s=hello var s2=new String(hello);2、属性length长度3、方法s.fontcolor(blue) /字体颜色s.toUpperCase(); /大写s.charAt(位置); /求某个位置上的字母,下标从0s.indexOf(字母); /求某字母的位置s.substring(始，终) / 始,终) 截取从始位置到终位置s.substr(始，长度) /截取Math:所有方法都是static类名.方法名( )抽奖例按抽奖按开始 var arr=new Array(纸巾,谢谢,彩电,玩具车,宝马); /数组var i=parseInt(Math.random()*5); /随机数0-1，乘5,表示0-5(不包括5),转整数作下标jp.innerHTML=arri; /设置名为jp的标记中间的内容为arriDate:1、产生对象 var d=new Date(); 系统时间 var d2=new Date(2006/03/27);2、toLocaleString()以本地格式显示时间 get系列获得 set系统设置注：getDay()获得星期0-6,0表星期天 getMonth()获得月0-11动态显示时间function funon() var d=new Date(); var x=new Array(日,一,二,三,四,五,六);t.innerHTML=d.toLocaleString()+星期+xd.getDay();/xd.getDay()以星期为下标，读中文星期 setTimeout(fun(),1000); /隔1000毫秒（1秒）,重新调用自己(递归调用) 一、事件onClick 单击onDoubleClick 双击onmouseOver 悬停onmouseOut 鼠标离开onmouseDownonmouseUponfocus 获得焦点onblur 失去焦点onchange 如果文本框的内容改变onload 加载(网页打开时)浏览对象window窗口history历史document 文档（网页）location 地址栏form 表单link 超链接一、访问1、普通标记 我是H1标记a. abc.innerHTMLb. window.document.getElementById(abc).innerHTML;c. window省略,document.get.d. document.allabc.innerHTML; 2、表单元素 a.表单名.表单元素名.value form1.txt.value;b.window.document.form1.txt.value二、window对象screen:屏幕对象status:状态栏对象方法:open()open(要弹出网页,别名,属性);例:window.open(1.html,width=200px,status=1);弹出1.html，宽度为200px,有状态栏。 0没有,1有close()关闭窗口window.opener=null; /去掉提示框;如果创建者为null,在IE 6中可直接关闭，不需要弹出是否关window.close(); /关闭当前窗口三、document属性： bgColor背景色 fgColor前景色 linkColor超链接颜色 URL获取当前页面的URL或跳转到另一个URL四、history历史方法：back(); 相当于后退按钮forward(); 相当于前进按钮go(); go(-2) 后退两页,go(2)前进两页五、location地址属性：href:功能与document.URL相同方法:assign(url); 功能与location.href相同reload(); 刷新replace(url); 替换当前网页，无历史记录，不可后退知识点:文本框:属性:readonly只读,不能修改方法: focus()获得焦点 select()选中框中内容单复选框:习惯同组的名字一样,value不一样属性:checked 是否被选中下拉列表属性:value选中项的值options所有的选项selectedIndex 选中项的下标length 选项的个数步骤:1、打开eclipse2、新建工程：file-new-project-web project-next -project name(工程名)/ location(保存位置，一般 不动)-finish3、右击工程名-new -other-HTML(第一个)-next-file name(网页名) 注：网页默认保存在webroot文件夹中4、右击工程名-new -class(数据操作类)-package(包名)/name(类名) 注：类默认在src中5、右击工程名-new -JSP-file name(JSP网页的名称) 注：保存在webroot文件夹中重要代码：JSP第一行:中的import表导包，改为 import=java.util.*,dao.DataOppageEncoding编码方式：改ISO-8859-1为GBK主体部分 % /加了 中可写java代码 /取值 String n=request.getParameter(txtName);int c=Integer.parseInt(request.getParameter(txtCls); /产生数据库操作对象DataOp d=new DataOp();boolean b=d.update(insert into.); /显示结果if(b=true) out.print(注册成功);/在网页输出else out.print(注册失败);%6、在HTML注册页 为表单添加提交的页面7、为工程添加服务器 工具栏(8个)-选择工程名-add-tomcat 5(服务器)8、启动服务器(发布) 工具栏（9个） 见到ms结尾表成功9、打到浏览器（IE）输入 http:/localhost:8080/工程名 正则表达式var reg=/规则/;var b=reg.test(要验证的字符串); 注:b为true表符合要求,false为不符合特殊符号  表空格< 表小于号> 表大于号例:如果想在网页上显示 ,必须写<br> 否则会被认为是标记样式表一、语法（规则）选择器属性:值;属性2:值2.1、pcolor:red /所有标记的字变成红色2、.cls1color:red /类选择器,class=类名进行调用3、#id1color:red /ID选择器, id=id名进行调用，一般只调用一次4、a:linkcolor:red /超链接未访问前的颜色 a:hover 悬停在超链接上 a:active 活动的超链接,指鼠标按下时 a:visited 访问后的超链接 伪类选择器5、空格表示并且(双重约束) .abc a:hovercolor:red 仅对调用了class=abc的标 记内的超链接悬停有效 .cls1 pcolor:red 只用于调用了class=cls1的标 记6、逗号表或者 h1,pcolor:red h1或p标记都可以使用二、滤镜(特效)语法：style=filter:选项(属性名=值,属性名2=值)1、透明alpha opacity透明度1-100,数字越大，越不透明style: