htmlcssjavascript教程课件

,Click to edit Master title style,Click to edit Master text stylesgood1,Second levelgood2,Third levelgood3,Fourth levelgood4,Fifth levelgood5,手把手教程,版权所有：尚学堂科技,尚学堂,尚学堂,手把手教程,版权所有：尚学堂科技,JAVA V3.0,Click to edit Master title style,Click to edit Master text stylesgood1,Second levelgood2,Third levelgood3,Fourth levelgood4,Fifth levelgood5,HTML,WEB,第一语言,课程内容及学习周期,HTML,介绍,HTML,细节,文件结构,文字,图片,链接,表格,表单,多窗口,特殊字符,在不是很熟悉,HTML,的情况下，学习加练习的时间应该在,48,个小时,对于已经熟悉,HTML,的读者可以略过本章,本章内容针对程序员进行设置，不是培养设计师,HTML,简介,Hyper Text Markup Language,超文本,(,文字,+,图片,+,音视,+,链接,),标记语言,(,浏览器根据标记显示内容,),来自于,SGML(,标准通用标记语言,),专注于在,Web,上传递信息,是写给浏览器的语言,历史,HTML1.0 HTML2.0 (IETF,制定,) HTML4.0(,最终版,) W3C,IETF Internet Engineering Task Force,HTTP,协议,RFC,等,RFC2616 Http1.1 RFC1521 MIME,W3C World Wide Web Consortium (),HTML XML,等,XHTML,符合,XML,标准的,HTML,DHTML,Dynamic HTML,（,X,）,HTML / CSS / JavaScript,的综合运用,HTML,语法标记,标记,(,标签或元素,),的形式,内容,Eg. ,文字,Eg. ,Eg. ,位于尖括号内，可以具有属性值,属性值必须“” 或,，不写也可以解析， 但是不推荐（不符合,XHTML,）,有开始必须有结束,(XHTML),标签不能嵌套,不区分大小写,但应该养成良好的编程习惯，推荐都用小写,Html,文档结构,典型,HTML,我会努力的！,01.html,head,中的常用标签,文字,“,文字,”将显示在浏览器标题栏上,：用于设置一些头信息,定义,CSS,格式,用于定义脚本，,Eg. Javascript,http-equiv,指明下面要设置的项目,content,指明该项目设置的内容,02.html,标签,bodybgcolor=“#” -,背景色,background=img_url -,背景图片,色彩值 “,#rrggbb”,Eg. ,红绿蓝数字值,body,其他属性,text link alink vlink bgcolor leftmargin topmargin,03.html,04.html,锚点标签,-,在该位置定义名字为,AnchorName,的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置,链接标签,-,超级链接，跳转到另一文件,文字,当鼠标点击“,文字,”时，,TargetWindow,的内容将会跳转到“,url,”,，不指定,target,时在本窗口跳转。,连接到文件的特定部分,Href=“url#point”,链接到,url,的,point,部分,在,url,文档中用,标识,Target,见“框架“部分,05.html06.html,路径问题,本地路径,c:dir1dir2,绝对路径,相对路径,images/01.jpg,././images/01.jpg,/images/01.jpg = ,Eg. ,Eg. ,07.html,相对于,URL,地址,URL URI URN,URL,Uniform Resource Locator,（统一资源定位符）,网络协议 主机名 端口号 资源名（定位标记）,带有参数的,url,及,url,编码问题 见,Servlet / JSP,部分,URN,Uniform Resource Name,持久可用的资源标准名称,例如邮箱名,URI,Uniform Resource Identifier,包含,URL,和,URN,URI_URL_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,设置文字显示,名称,HTML,代码,黑体,斜体,下划线,中划线,闪烁,上标,下标,11.html,特殊字符,®,注册商标,&,空格,copyright,商标,“,12.html,可以使用,&#xx,来显示字符，,xx,为字符的,unicode,码,dreamweaver &,文字的布局,分段落现实, ,分块显示,符号列表,数字列表,换行,不换行,保留原有格式,跑马灯效果,13.html,对齐,align,取值,:left right center top middle bottom,对齐到中间,14.html,图片,Src,图片路径，一般使用相对路径,Alt,图片无法显示时显示的文字,Border,边框的厚度,Align = left right top middle bottom,图文混排时用于和图片的对齐,15.html,图片与链接 见,DreamWeaver,演示,表格,重点掌握, ,%,或像素值,表头（可选）,单元格,top middle bottom,跨行,跨列,16.html,table,的属性：,bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight,表单,重点掌握,作用,收集用户信息,数据库查询,收发,email,用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础,-,的属性,Method (get post),Get,发送较少数据（,256byte,），显示在,url,中，,url/userinfo?username=,张三,&password=hehe,Post,数据长度无限制，不会显示在,url,中,Action,Form,中数据交给服务器端哪个程序进行处理,Eg. ,位于表单中的输入标签,位于,之中，接收用户输入,格式：,type:,text radio checkbox password hidden select submit reset button textarea image,name:,提交到服务器端的变量的名字,表单中的输入标签,文本框,text,maxlength ,最大字符长度,size ,文本框宽度（字符）,密码区域,特殊的单行文本输入框,password,单选按钮,典型用法,:,同一名字，不同的值,错误的用法,:,不同的名字,复选框,典型的用法,:,同一,name,，不同的,value,隐藏域,不显示在网页中,通常用作向下一个页面传输已知信息或表单的附加信息,select,列表框, ,Multiple,表示多重列表框，可以多选,Selected,被选中,多行多列文本框,Rows:,行数,Cols:,列数,Wrap:,Off :,不换行,Soft:,自动换行，并且如果行末有英文单词，会将整个单词移到下一行,Hard:,自动换行，但会截断行末的单词,中间的值会被提交,所以不要含有空格,button,按下该按钮没有反映,按下该按钮，该,form,中所有的输入信息将被提交到服务器,按下该按钮，该,form,中所有的输入部分将被重置,点击图片提交,Label,标签与输入元素相关联见,DreamWeaver,演示,框架, ,嵌套, ,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,个小时左右，当然了，我们培养的是程序员，这个时间足够了,CSS,定义,CSSCascade Style Sheet,层叠样式表,1998/5/12,，,CSS level2,成为,W3C,标准,用来装饰,HTML/XML,的标记集合,特点：,样式表由样式规则组成，以告诉浏览器如何显示一个文档,每个规则的组成包括一个选择符,-,通常是一个,HTML,的元素,-,和该选择符所接受的样式,每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现,CSS,样式,样式规则格式：,选择符,属性,:,值,单一选择符的复合样式声明应该用分号分割：,选择符,属性,1:,值,1;,属性,2:,值,2,01.html,CSS,的调用方式,在,Head,中调用,(01.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,注释：,/*,这是注释*,/,字体属性,属性,含义,属性值,font-family,字体,各种字体,font-style,字体样式,italic,、,oblique,font-variant,小体大写,small-caps,font-weight,字体粗细,bold,、,bolder,、,lighter,font-size,字体大小,absolute,、,relative,、,%,color,字体颜色,颜色值,例：,07.html,颜色与背景属性,属性,含义,属性值,Color,颜色,颜色值,Background-color,背景色,颜色值,Background-image,背景图案,图片路径,Background-repeat,背景图案重复方式,Repeat-x | repeat-y | no-repeat,Background-attachment,背景的滚动,Scroll | fix,Background-position,背景图案初始位置,% | n em | top | left | right | bottom ,例：,08.html,文本属性,属性,含义,属性值,word-spacing,单词间距,n em,letter-spacing,字母间距,n em,text-decoration,装饰样式,underline| overline| line-through| blink,vertical-align,垂直方向位置,sub| super |top |text-top|middle| bottom| text-bottom,text-transform,转为其他形式,capitalize| uppercase| lowercase,text-align,对齐,left| right| center| justify,text-indent,缩进,n em| %,line-height,行高,pixels,、,n em,、,%,例：,09.html,Em:12pixels,的,M,常用于印刷的单位,装饰超链接 伪类选择符,对链接的修饰,A:link,未访问时的状态,A:visited,访问过后的状态,A:active,鼠标点中不放时的状态,A:hover,鼠标划过时的状态,10.html,边距属性,属性,含义,属性值,margin-top,上边距,n em | %,margin-right,右,n em | %,margin-bottom,下,n em | %,margin-left,左,n em | %,例：,11.html,填充属性,属性,含义,属性值,padding-top,上填充,n em | %,padding-right,右,n em | %,padding-bottom,下,n em | %,padding-left,左,n em | %,例：,12.html,边框属性,属性,含义,属性值,Border-top-width,上边框宽度,n em | thin | medium | thick,Border-right-width,右,同上,Border-bottom-width,下,同上,Border-left-width,左,同上,Border-width,四边,同上,Border-color,边框颜色,Color,Border-style,边框样式,Dotted | dash | solid | double | groove | ridge | inset | outset,Border-top |right|bottom|left,上,(,右,|,底,|,左,),所有属性,Border-width | border-style | color,例：,13.html,图文混排,属性,含义,属性值,Width,宽度,n em | %,Height,高度,n em,Float,文字环绕,Left | right,clear,去除文字环绕,Left | right | both,例：,14.html,列表属性,属性,含义,属性值,Display,是否显示,Block | inline | list-item | none,White-space,空白部分,Pre | nowrap | normal,（是否合并,),List-style-type,项目编号,Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none,List-style-image,项目前图片,Img-url,List-style-position,第二行位置,Inside | outside,List-style,全部属性,Keyword | position | url,例：,15.html,鼠标属性,属性值,含义,属性值,含义,Auto,自动,N-resize,上箭头,Crosshair,+,Se-resize,右下,Default,默认,Sw-resize,左下,Hand,手形,S-resize,下箭头,Move,移动,W-resize,左箭头,E-resize,右箭头,Text,I,Ne-resize,右上,Wait,沙漏,Nw-resize,左上,help,帮助,例：,16.html,定位属性,属性,含义,属性值,Position,位置,Absolute|relative|static,Left | top,横向,|,纵向位置,N em | %,Width | height,宽度,|,高度,同上,Clip,剪切,Shape | auto,Overflow,内容超出时,Visible | hidden | scroll | auto,Z-index,立体效果,Integer,visibility,可见性,Inherit | visible | hidden,例：,17.html 18.html,滤镜属性,属性值,含义,属性值,含义,Alpha,半透明,Invert,底片,Blur,模糊,Light,灯光投影,Chroma,指定颜色透明,Mask,透明膜,Dropshadow,投射阴影,Shadow,阴影,Fliph,水平翻转,Wave,波纹,Flipv,垂直翻转,Xray,X,射线,Glow,光效,Grayscale,灰度,例：,19.html,CSS,布局,CSS,框架,DreamWeaver,认识,DreamWeaver,练习使用,DreamWeaver,用,DreamWeaver,画表格和表单,用,DreamWeaver,来应用,CSS,JavaScript,WEB,魔术师,本章内容的学习周期,视熟悉程度，应该在,416,小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，,javascript,是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript,介绍,Javascript,语言,视熟悉程度，应该在,416,小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，,JavaScript,是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,程序开发分为客户端、服务器端,客户端开发的好处,减少客户端到服务器端的往返。,表单验证,服务器端开发的好处,web,应用的核心逻辑集中管理,胖客户端、瘦客户端,客户端编程的主要技术,javascript,（最主要的）,vbscript,jscript,applet,activex,组件,plug-in,技术（,价值在于：让专家级程序员开发新型语言,）,flash,技术的最新发展,jsdk,包含的,plug-in,yahoo,的工具条,百度搜索伴侣,CNNIC,网络实名等,3721,学习资料,msdn,jscript,参考,CoreGuideJS15.zip,CoreReferenceJS15.zip,JavaScript,手册中文,.chm,JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf,JavaScript and ECMA versions,JavaScript version,Relationship to ECMA version,JavaScript1.1,ECMA-262, Edition 1 is based on JavaScript1.1.,JavaScript1.2,ECMA-262 was not complete when JavaScript1.2 was released.,JavaScript1.3,JavaScript1.3 is fully compatible with ECMA-262, Edition 1.,JavaScript1.4,JavaScript1.4 is fully compatible with ECMA-262, Edition 1.,JavaScript1.5,JavaScript1.5 is fully compatible with ECMA-262, Edition 3.,JavaScript,和,Java,的区别,基于对象和面向对象,解释和编译,强变量和弱变量,JavaScript,中变量声明，采用其弱类型。,即变量在使用前不需作声明，而是解释器在运行时检查其数据类型,x=1234; /,数值型变量,y,“,4321”; /,字符型变量,代码格式不一样,嵌入方式不一样,JavaScript,JavaScript,是一种描述式语言，它与,HTML,结合起来，用于增强功能，并提高与最终用于之间的交互性能,由,Netscape,公司利用,Sun,的,Java,开发,它是与,Java,完全不同的一种语言。虽然在结构和语法上与,Java,类似，但是，它只是函数式的语言。,客户端的,JavaScript,必须要有浏览器的支持,JavaScript (ECMAScript),基础语法,DOM,Document Object Model,BOM,Brower Object Model,JavaScript/jscript / ECMAScript,avaScript,是由,Netscape,公司开发,.,它的前身是,Live Script,Microsoft,发行,jscript,用于,internet explorer,最初的,jscript,和,javascript,差异过大，,web,程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了,ECMAScript,是一种国际标准化的,javascript,版本。现在的主流浏览器都支持这种版本。,ECMAScript,ECMAScript,并不与任何具体浏览器相绑定,一个完整的,JavaScript,实现是由以下,3,个不同部分组成的（见图,1-1,）：,核心（,ECMAScript,）,文档对象模型（,DOM,）；,浏览器对象模型（,BOM,）。,在网页中加入,JavaScript,通过在网页中加入,标记,JavaScript,的开始和结束，将,JavaScript,代码放到,之间,(1.htm),也可以引入一个外部的,JavaScript,文件，这个,JavaScript,文件一般以,.js,作为扩展名,(2.htm),原则上，放在,之间。但视情况可以放在网页的任何部分,(3.htm),一个页面可以有几个,、,=,、,=,、,=,(7.htm),逻辑运算,与：,&,或：,|,非：,!,(8.htm),字符串运算符,连接运算：,+ (9.htm),取子集：,substring(index1,index2) (10.htm),条件表达式,条件,?A:B (11.htm),substring,方法,返回位于,String,对象中指定位置的子字符串。,strVariable,.,substring(,start,end,),String Literal.,substring(,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,.,substring(,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, 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 object;,strVariable = strVariable.big().big().big().big().big().big().big().big().big();,strVariable = strVariable.bold();,strVariable = strVariable.link();,document.write(strVariable);,This is a string object,substring,、,indexOf,substring(start,end),返回字符串的子字符串,案例：,substring.htm,indexOfcharactor,fromIndex,字符搜索,案例：,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():,返回日数,setDate():,设置日数,getDay():,返回星期几,setDay():,设置星期数,getHours():,返回小时数,setHours():,设置小时数,getMinutes():,返回分钟数,setMintes():,设置分钟数,getSeconds():,返回秒数,setSeconds():,设置秒数,getTime() :,返回毫秒数,setTime() :,设置毫秒数,案例：,Date,.htm,JavaScript,基本语法,函数,函数的使用,利用,function,来定义一个函数,(18.htm),传入参数,(19.htm),传出值,(20.htm),函数的参数传递,preloadTreeImages(1.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.htm),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,：鼠标从一个对象上移开时,(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(),函数可以把一个字符串当作一个,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,用于生成一个新的对象,(27.htm),TryCatch,try,document.writeln(Beginnng the try block),document.writeln(No exceptions yet),/ Create a syntax error,eval(6 + * 3),document.writeln(Finished the try block with no exceptions),catch(,err,),document.writeln(Exception caught, ),document.writeln(Error name: +,err.name,),document.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.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.htm),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 cv,cv=window.confirm(,确实要删除该条记录吗,?),if(cv=true)return true,elsereturn 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,掌握基本知识,学会照猫画虎,