1、HTML,WEB第一语言,课程内容及学习周期,HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 ,在不是很熟悉HTML的情况下， 学习加练习的时间应该在48个小时 对于已经熟悉HTML的读者可以略过本章 本章内容针对程序员进行设置，不是培养设计师,HTML简介,Hyper Text Markup Language 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3C I
2、ETF Internet Engineering Task Force HTTP协议 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C World Wide Web Consortium (www.w3.org) HTML XML等 XHTML 符合XML标准的HTML DHTML Dynamic HTML （X）HTML / CSS / JavaScript的综合运用,HTML语法标记,标记(标签或元素)的形式 内容 Eg. 文字Eg. Eg. 位于尖括号内，可以具有属性值 属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合XHTML） 有开始必须有结束(X
3、HTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯，推荐都用小写,Html文档结构, 典型HTML 我会努力的！ ,01.html,head中的常用标签,文字 “文字”将显示在浏览器标题栏上 ：用于设置一些头信息定义CSS格式 用于定义脚本，Eg. Javascript,“http-equiv“指明下面要设置的项目 “content“指明该项目设置的内容,02.html, 标签, 色彩值 “#rrggbb” Eg. 红绿蓝数字值body其他属性 text link alink vlink bgcolor leftmargin topmargin,03.html,04.html,锚
4、点标签-, 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置,链接标签-,超级链接，跳转到另一文件 文字当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识 Target 见“框架“部分,05.html 06.html,路径问题,本地路径 “c:dir1dir2“ 绝对路径 “http:/ 相对路径 “images/01.jpg“ “/images/01.jpg“ “
5、/images/01.jpg“ = “http:/mysite/images/01.jpg Eg. Eg. ,07.html,相对于URL地址,URL URI URN,URL Uniform Resource Locator（统一资源定位符） 网络协议 主机名 端口号 资源名（定位标记） http:/:80/index.html#top 带有参数的url 及 url编码问题 见Servlet / JSP部分 URN Uniform Resource Name 持久可用的资源标准名称 例如邮箱名 URI Uniform Resource Identifier 包含URL和URN,URI_URL_
6、URN.html,分隔线-,语法Size 高度 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色 Eg. ,08.html,标题字体大小-, #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 最大 最小,09.html,字体设置, face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36（pixels）Color可以使用预定义的名字,也可以使用数字 red、blue、black 通常是打字机风格字体 通常是引用方式（斜体） 强调（通常是斜体加粗体）,10.html,设置文字显示,11.html
7、,特殊字符,12.html,可以使用,文字的布局, 分段落现实 分块显示 符号列表 数字列表换行 不换行 保留原有格式 跑马灯效果,13.html,对齐align, 取值:left right center top middle bottom 对齐到中间,14.html,图片, Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom 图文混排时用于和图片的对齐,15.html,图片与链接 见DreamWeaver演示,表格重点掌握, ,%或像素值,表头（可选）,单元格,top mi
8、ddle bottom,跨行,跨列,16.html,table的属性： bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height,表单重点掌握,作用 收集用户信息 数据库查询 收发email 用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础-, 的属性 Method (get post) Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe Post数据长度无限制，不会显示在ur
9、l中 Action Form中数据交给服务器端哪个程序进行处理 Eg. ,位于表单中的输入标签,位于之中，接收用户输入 格式： type: text radio checkbox password hidden select submit reset button textarea image name: 提交到服务器端的变量的名字,表单中的输入标签,文本框 textmaxlength 最大字符长度 size 文本框宽度（字符） 密码区域特殊的单行文本输入框 password单选按钮典型用法 : 同一名字，不同的值 错误的用法 : 不同的名字 复选框典型的用法 : 同一name，不同的valu
10、e 隐藏域不显示在网页中 通常用作向下一个页面传输已知信息或表单的附加信息,select,列表框 Multiple 表示多重列表框，可以多选 Selected 被选中 多行多列文本框 Rows: 行数 Cols: 列数 Wrap: Off : 不换行 Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行 Hard: 自动换行，但会截断行末的单词,中间的值会被提交 所以不要含有空格,button, 按下该按钮没有反映按下该按钮，该form中所有的输入信息将被提交到服务器按下该按钮，该form中所有的输入部分将被重置点击图片提交,Label标签 与输入元素相关联 见DreamWea
11、ver演示,框架, 嵌套,Pixels or %,yes no auto,18.html,19.html,链接、表单与框架, Target: Frame name _blank 新窗口 _self 本窗口 _parent 父窗口（本窗口的上一级窗口） _top 浏览器窗口,HTML网上行,比老师更加渊博的老师 互联网 打开网页 IE菜单查看源文件 IE菜单文件另存为 学习其他的优秀的HTML设计 可以查看CSS 可以查看Javascript 读代码应该直奔目的地 没必要背过HTML标签,CSS,HTML美容师,课程内容,CSS介绍 CSS细节 CSS的各种属性,视熟悉程度，应掌握在1-6个小时
12、左右，当然了，我们培养的是程序员，这个时间足够了,CSS定义,CSSCascade Style Sheet层叠样式表 1998/5/12，CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点： 样式表由样式规则组成，以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符-通常是一个HTML的元素-和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现,CSS样式,样式规则格式： 选择符属性:值 单一选择符的复合样式声明应该用分号分割： 选择符属性1:值1; 属性2:值2 01.html,CSS的调用方式,在Head中调用(01
13、.html) 在Body中调用(02.html) 调用css文件(03.html/03.css)CSS的优先级问题 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准,CLASS & ID,类选择符：Class 一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(05.htm) 不同的选择符也可以同时定义一样的样式(06.htm) ID选择 06_1.htm,CSS组合/注释,可以一次性定义多个选择符的样式 H1,H2,H3color:red;font-family:serif P A 06_2.html 注释： /*这是注释*/,字体属性,例：
14、07.html,颜色与背景属性,例：08.html,文本属性,例：09.html,Em:12pixels 的 M常用于印刷的单位,装饰超链接 伪类选择符,对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html,边距属性,例：11.html,填充属性,例：12.html,边框属性,例：13.html,图文混排,例：14.html,列表属性,例：15.html,鼠标属性,例：16.html,定位属性,例：17.html 18.html,滤镜属性,例：19.html,CSS布局 CSS框
15、架,DreamWeaver,认识DreamWeaver 练习使用DreamWeaver 用DreamWeaver画表格和表单 用DreamWeaver来应用CSS,JavaScript,WEB魔术师,本章内容的学习周期,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript介绍 Javascript语言,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，Jav
16、aScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,程序开发分为客户端、服务器端,客户端开发的好处 减少客户端到服务器端的往返。 表单验证 服务器端开发的好处 web应用的核心逻辑集中管理 胖客户端、瘦客户端,客户端编程的主要技术,javascript（最主要的） vbscript jscript applet activex组件 plug-in技术（价值在于：让专家级程序员开发新型语言） flash技术的最新发展 jsdk包含的plug-in yahoo 的工具条 百度搜索伴侣 CNNIC网络实名等 3721,学习资料,msdnjscript参考 CoreG
17、uideJS15.zip CoreReferenceJS15.zip JavaScript手册中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf,JavaScript and ECMA versions,JavaScript和Java的区别,基于对象和面向对象 解释和编译 强变量和弱变量 JavaScript中变量声明，采用其弱类型。 即变量在使用前不需作声明，而是解释器在运行时检查其数据类型 x=1234; /数值型变量 y“4321”; /字符型变量 代码格式不一样 嵌入方式不一样,Ja
18、vaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能 由Netscape公司利用Sun的Java开发 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。 客户端的JavaScript 必须要有浏览器的支持 JavaScript (ECMAScript) 基础语法 DOM Document Object Model BOM Brower Object Model JavaScript/jscript / ECMAScript avaScript是由Netscape公司开发 .它的前身
19、是Live Script Microsoft发行jscript用于internet explorer 最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。,ECMAScript,ECMAScript并不与任何具体浏览器相绑定 一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）： 核心（ECMAScript） 文档对象模型（DOM）； 浏览器对象模型（BOM）。,在网页中加入JavaScript,通过在网页中加入标记
20、JavaScript的开始和结束，将JavaScript代码放到之间 (1.htm) 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名 (2.htm) 原则上，放在之间。但视情况可以放在网页的任何部分 (3.htm) 一个页面可以有几个/Script，不同部分的方法和变量，可以共享。 (4.htm),JavaScript的数据类型,The primary (primitive) data types are: String Number Boolean The composite (reference) data types are: Objec
21、t Array The special data types are: Null Undefined (var a;),控制字符,JavaScript中有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。 b :表示退格符。 f :表示换页。 n :表示换行符。 r :表示回车符。 t :表示Tab符号。 :表示单引号本身。 “ :表示双引号本身。,类型转换,var a=3; var b=“10“; var c=true; alert(a+b); alert(b+c); alert(a+c);,JavaScript基本语法,变量 JavaScript是一门弱类型的语言，所有的变量定义均
22、以var来实现 JavaScript的变量建议先定义，再使用 JavaScript区分大小写 虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做 (5.htm) 数组定义 var arr = new Array(3); 通过arr.length取得数组的长度 (6.htm) 注释的写法和java的一样,数组,使用方式： myarray=new Array(num) myarray=new Array(value1,value2)aa = new Array(3);aa20 = 444;document.write (aa20);num不设定，则按数组默认的最大长度自动设定。例
23、如：aa = new Array();aa20 = 444;document.write (aa.length); ,JavaScript基本语法运算符,算术运算 +、-、*、/ 、=、=、= (7.htm) 逻辑运算 与：& 或：| 非：! (8.htm) 字符串运算符 连接运算：+ (9.htm) 取子集：substring(index1,index2) (10.htm) 条件表达式 条件?A:B (11.htm),substring 方法,返回位于String对象中指定位置的子字符串。 strVariable.substring(start,end) “String Literal“.s
24、ubstring(start,end) 参数 start 指明子字符串的起始位置，该索引从 0 开始起算。 end 指明子字符串的结束位置，该索引从 0 开始起算。 说明 substring方法将返回一个包含从start到最后（不包含end）的子字符串的字符串。 substring方法使用start和end两者中的较小值作为子字符串的起始点。例如，strvar.substring(0, 3)和strvar.substring(3, 0)将返回相同的子字符串。 如果start或end为NaN或者负数，那么将其替换为0。 子字符串的长度等于start和end之差的绝对值。例如，在strvar.su
25、bstring(0, 3)和strvar.substring(3, 0)返回的子字符串的的长度是 3。,JavaScript基本语法控制语句,if语句 if(条件) else if(条件1) else(12.htm) while语句 while(条件) 13.htm switch 语句 switch(i) case i1: casei2: default: (14.htm) for 15.htm dowhile 16.htm while 17.htm,JavaScript内置类型,typeof 返回值有六种可能： “number,“ “string,“ “boolean,“ “object,“
26、 “function,“ 和 “undefined.“ typeof 操作符,typeof.htm,字符串对象,属性：length 方法： 字体控制：big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor() 字符串：toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end),big()、bold()、link(), var strVariable = “This is a string objec
27、t“; strVariable = strVariable.big().big().big().big().big().big().big().big().big(); strVariable = strVariable.bold(); strVariable = strVariable.link(“http:/“); document.write(strVariable);This is a string object,substring、indexOf,substring(start,end) 返回字符串的子字符串案例：substring.htmindexOfcharactor,fromI
28、ndex 字符搜索案例：indexOf.htm,Math对象,常用方法： abs() 绝对值 sin() , cos() 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方,案例： Math.htm,Date对象,创建方式：myDate = new Date(); 日期起始值:9年月日: 主要方法 getYear(): 返回年数 setYear(): 设置年数 getMonth(): 返回月数 setMonth():设置月数 getDate(): 返回日数 setDat
29、e():设置日数 getDay(): 返回星期几 setDay():设置星期数 getHours():返回小时数 setHours():设置小时数 getMinutes():返回分钟数 setMintes():设置分钟数 getSeconds():返回秒数 setSeconds():设置秒数 getTime() : 返回毫秒数 setTime() :设置毫秒数,案例： Date.htm,JavaScript基本语法函数,函数的使用 利用function来定义一个函数 (18.htm) 传入参数 (19.htm) 传出值 (20.htm),函数的参数传递,preloadTreeImages(“1
30、.gif“,“2.gif“,“3.gif“); function preloadTreeImages() for (var i = 0; i arguments.length; i+)var img = document.createElement(“img“);img.src = argumentsi;div1.appendChild(img); ,JavaScript事件处理,onFocus：在用户为了输入而选择select、text、textarea等时 (onFocus.htm) onBlur：在select、text、password、textarea失去焦点时 (onBlur.ht
31、m) onChange：在select、text、textarea的值被改变且失去焦点时 (onChange.htm/SelectionChange.htm) onClick：在一个对象被鼠标点中时（button,checkbox,radio,link,reset,submit,text,textarea等） (onClick.htm) onLoad：出现在一个文档完成对一个窗口的载入时 (onLoad.htm) onUnload：当用户退出一个文档时 (onload.htm) onMouseOver：鼠标被移动到一个对象上时 (onMouse.htm) onMouseOut：鼠标从一个对象上
32、移开时 (onMouse.htm) onSelect：当form对象中的内容被选中时 (onSelect.htm) onSubmit：出现在用户通过提交按钮提交一个表单时 (onSubmit.htm),JavaScript的对话框,警告框(alert)：出现一个提示信息 21.htm 询问框(prompt)：返回输入的值 22.htm 确认框(confirm)：根据不同的选择，返回true/false 23.htm,使用eval,不使用eval alert (“3“+“2“); -32 使用eval的上下文环境 alert (eval(“3“) + eval(“2“); -5 eval()函数
33、可以把一个字符串当作一个JavaScript表达式一样去执行它,eval_1.htm,Eval_2.htm,javascript hijacking,函数劫持 通过替换js函数的实现来达到劫持这个函数调用的目的,hook.htm,this指的是当前的对象,24.htm 函数调用时使用this object.htm 自定义对象,随时可以增加属性,方法 class.htm 定义类,对象,forin In后跟一个对象，对此对象中的所有元素循环一次 (25.htm 25_1.htm) with 为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象 (26.htm) new 用于生成
34、一个新的对象 (27.htm),TryCatch,trydocument.writeln(“Beginnng the try block“)document.writeln(“No exceptions yet“)/ Create a syntax erroreval(“6 + * 3“)document.writeln(“Finished the try block with no exceptions“) catch(err)document.writeln(“Exception caught, “)document.writeln(“Error name: “ + err.name)do
35、cument.writeln(“Error message: “ + err.message) ,窗口中的对象和元素(BOM),window 当前窗口（28.htm） 新开窗口（29.htm） 通过本地窗口控制新开窗口 (30.htm) location 获取或设置现有文档的URL (31.htm) history 先前访问过的URL的历史列表 常用方法：back()，go(number) (32.htm/33.htm) document 当前的文档对象 document.write()：向客户端浏览器输出内容 document.formName：可以用这个方法得到表单名称 document.
36、referrer,Browser Object Model,技巧：setTimeout、setInterval,/var a = window.setInterval(“alert(Hello, world)“, 2000); var a = window.setTimeout(“alert(Hello, world)“, 2000); ,趣味JavaScript程序,黑客帝国(ex1/matrix.htm) 鼠标跟随(ex2/mouseTrace.htm) 找相同图片游戏(ex1/game/game.htm) 飘浮的云(ex1/floating.htm) 打字效果(ex1/printer.h
37、tm) TicTacToe游戏(ex1/tictactoe.htm) 星球大战(ex1/starcraft/),实用JavaScript程序,图片下拉列表(ex2/DropDown/) 相互关联的列表(ex2/relative.htm) 抽屉式菜单(ex2/drawer.htm) 滑入式菜单（ex2/slip.htm） 滚动下拉菜单 (ex2/pulldown.htm) 日历(ex2/calendar) 输入判断js函数(ex2/pd.*) window.open教程(window.open.htm),确实要删除该条记录吗, function a_onclick() var cvcv=wind
38、ow.confirm(确实要删除该条记录吗?)if(cv=true)return trueelsereturn false ,程序优化,function a_onclick_new() event.returnValue=window.confirm(确实要删除该条记录吗?) ,confirmdel.htm,学习HTML / CSS / JavaScript的方法,google Alert() 重点掌握表单输入的判断 prototype.js是由Sam Stephenson写的一个javascript类库 Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. 不可多得的Javascript(AJAX)开发工具 Aptana 掌握基本知识 学会照猫画虎,
