htmlcssjavascript教程.pptx

HTMLWEB第一语言课程内容及学习周期课程内容及学习周期HTML介绍HTML细节文件结构文字图片链接表格表格表单表单多窗口特殊字符在不是很熟悉HTML的情况下，学习加练习的时间应该在48天对于已经熟悉HTML的读者可以略过本章本章内容针对程序员进行设置，不是培养设计师HTMLHTML简介简介HyperTextMarkupLanguage超文本(文字+图片+音视+链接)标记语言(浏览器根据标记显示内容)来自于SGML(标准通用标记语言)专注于在Web上传递信息是写给浏览器的语言历史HTML1.0HTML2.0(IETF制定)HTML4.0(最终版)W3C-HTML5(未来代替HTML)IETFInternetEngineeringTaskForceHTTP协议RFC等RFC2616Http1.1RFC1521MIMEW3CWorldWideWebConsortium(www.w3.org)HTMLXML等XHTML符合XML标准的HTMLDHTML Dynamic HTML（X）HTML/CSS/JavaScript的综合运用HTMLHTML语法标记语法标记标记(标签或元素)的形式内容Eg.文字Eg.Eg.位于尖括号内，可以具有属性值属性值必须“”或，不写也可以解析，但是不推荐（不符合XHTML）有开始必须有结束(XHTML)标签不能嵌套不区分大小写但应该养成良好的编程习惯，推荐都用小写HtmlHtml文档结构文档结构典型HTML我会努力的！01.htmlheadhead中的常用标签中的常用标签文字“文字”将显示在浏览器标题栏上：用于设置一些头信息定义CSS格式用于定义脚本，Eg.Javascripthttp-equiv指明下面要设置的项目content指明该项目设置的内容02.html标签bodybgcolor=“#”-背景色background=img_url-背景图片色彩值“#rrggbb”Eg.红绿蓝数字值body其他属性textlinkalinkvlinkbgcolorleftmargintopmargin03.html04.html锚点标签锚点标签-在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置链接标签链接标签-超级链接，跳转到另一文件文字当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。连接到文件的特定部分Href=“url#point”链接到url的point部分在url文档中用标识Target见“框架“部分05.html06.html路径问题路径问题本地路径c:dir1dir2绝对路径http:/ URI URNURL URI URNURLUniformResourceLocator（统一资源定位符）网络协议主机名端口号资源名（定位标记）http:/:80/index.html#top带有参数的url 及 url编码问题 见Servlet/JSP部分URNUniformResourceName持久可用的资源标准名称例如邮箱名URIUniformResourceIdentifier包含URL和URNURI_URL_URN.html分隔线分隔线-语法Size高度Align对齐方式，可以取left或rightNoshade无阴影效果颜色Eg.08.html标题字体大小标题字体大小-#=1、2、3、4、5、6按标题级别用黑体字显示标题内容自动插入空行最大最小09.html字体设置字体设置face定义字体size1234567实际8101214182436（pixels）Color可以使用预定义的名字,也可以使用数字red、blue、black通常是打字机风格字体通常是打字机风格字体通常是引用方式（斜体）通常是引用方式（斜体）强调（通常是斜体加粗体）强调（通常是斜体加粗体）10.html设置文字显示设置文字显示名称HTML代码黑体斜体下划线中划线闪烁上标下标11.html特殊字符特殊字符<&reg注册商标& 空格©copyright™商标"“12.html可以使用&#xx来显示字符，xx为字符的unicode码dreamweaver华文字的布局文字的布局分段落现实分块显示符号列表数字列表13.html换行不换行保留原有格式跑马灯效果对齐对齐alignalign取值:leftrightcentertopmiddlebottom对齐到中间14.html图片图片Src图片路径，一般使用相对路径Alt图片无法显示时显示的文字Border边框的厚度Align=leftrighttopmiddlebottom图文混排时用于和图片的对齐15.html图片与链接 见DreamWeaver演示 表格表格 重点掌握重点掌握%或像素值表头（可选）单元格top middle bottom跨行跨列16.htmltable的属性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight表单表单 重点掌握重点掌握作用收集用户信息数据库查询收发email用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者表单基础表单基础-的属性Method(getpost)Get发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehePost数据长度无限制，不会显示在url中ActionForm中数据交给服务器端哪个程序进行处理Eg.位于表单中的输入标签位于表单中的输入标签位于之中，接收用户输入格式：type:textradiocheckboxpasswordhiddenselectsubmitresetbuttontextareaimagename:提交到服务器端的变量的名字表单中的输入标签表单中的输入标签文本框textmaxlength最大字符长度size文本框宽度（字符）密码区域特殊的单行文本输入框password单选按钮典型用法:同一名字，不同的值错误的用法:不同的名字复选框典型的用法:同一name，不同的value隐藏域不显示在网页中通常用作向下一个页面传输已知信息或表单的附加信息selectselect列表框Multiple表示多重列表框，可以多选Selected被选中多行多列文本框Rows:行数Cols:列数Wrap:Off:不换行Soft:自动换行，并且如果行末有英文单词，会将整个单词移到下一行Hard:自动换行，但会截断行末的单词中间的值会被提交所以不要含有空格buttonbutton按下该按钮没有反映按下该按钮，该form中所有的输入信息将被提交到服务器按下该按钮，该form中所有的输入部分将被重置点击图片提交Label标签与输入元素相关联见DreamWeaver演示框架框架嵌套Pixels or%yes no auto18.html19.html链接、表单与框架链接、表单与框架Target:Framename_blank新窗口_self本窗口_parent父窗口（本窗口的上一级窗口）_top浏览器窗口HTMLHTML网上行网上行比老师更加渊博的老师互联网打开网页IE菜单查看源文件IE菜单文件另存为学习其他的优秀的HTML设计可以查看CSS可以查看Javascript读代码应该直奔目的地没必要背过HTML标签CSSCSSHTML美容师美容师课程内容课程内容CSS介绍CSS细节CSS的各种属性视熟悉程度，应掌握在1-6个小时左右，当然了，我们培养的是程序员，这个时间足够了CSSCSS定义定义CSSCascadeStyleSheet层叠样式表1998/5/12，CSSlevel2成为W3C标准用来装饰HTML/XML的标记集合特点：样式表由样式规则组成，以告诉浏览器如何显示一个文档每个规则的组成包括一个选择符-通常是一个HTML的元素-和该选择符所接受的样式每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现CSSCSS样式样式样式规则格式：选择符属性:值单一选择符的复合样式声明应该用分号分割：选择符属性1:值1;属性2:值201.htmlCSSCSS的调用方式的调用方式在Head中调用(01.html)在Body中调用(02.html)调用css文件(03.html/03.css)CSS的优先级问题按照最靠近元素的定义来显示(04.html)如果两个css文件冲突,以后面的为准CLASS&IDCLASS&ID类选择符：Class一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(05.htm)不同的选择符也可以同时定义一样的样式(06.htm)ID选择06_1.htmCSSCSS组合组合/注释注释可以一次性定义多个选择符的样式H1,H2,H3color:red;font-family:serifPA06_2.html注释：/*这是注释*/字体属性字体属性属性属性含义含义属性值属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighterfont-size字体大小absolute、relative、%color字体颜色颜色值例：07.html颜色与背景属性颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x|repeat-y|no-repeatBackground-attachment背景的滚动Scroll|fixBackground-position背景图案初始位置%|nem|top|left|right|bottom例：08.html文本属性文本属性属性属性含义含义属性值属性值word-spacing单词间距nemletter-spacing字母间距nemtext-decoration装饰样式underline|overline|line-through|blinkvertical-align垂直方向位置sub|super|top|text-top|middle|bottom|text-bottomtext-transform转为其他形式capitalize|uppercase|lowercasetext-align对齐left|right|center|justifytext-indent缩进nem|%line-height行高pixels、nem、%例：09.htmlEm:12pixels 的 M常用于印刷的单位装饰超链接装饰超链接 伪类选择符伪类选择符对链接的修饰A:link未访问时的状态A:visited访问过后的状态A:active鼠标点中不放时的状态A:hover鼠标划过时的状态10.html边距属性边距属性属性属性含义含义属性值属性值margin-top上边距nem|%margin-right右nem|%margin-bottom下nem|%margin-left左nem|%例：11.html填充属性填充属性属性属性含义含义属性值属性值padding-top上填充nem|%padding-right右nem|%padding-bottom下nem|%padding-left左nem|%例：12.html边框属性边框属性属性属性含义含义属性值属性值Border-top-width上边框宽度nem|thin|medium|thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted|dash|solid|double|groove|ridge|inset|outsetBorder-top|right|bottom|left上(右|底|左)所有属性Border-width|border-style|color例：13.html图文混排图文混排属性属性含义含义属性值属性值Width宽度nem|%Height高度nemFloat文字环绕Left|rightclear去除文字环绕Left|right|both例：14.html列表属性列表属性属性属性含义含义属性值属性值Display是否显示Block|inline|list-item|noneWhite-space空白部分Pre|nowrap|normal（是否合并)List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image项目前图片Img-urlList-style-position第二行位置Inside|outsideList-style全部属性Keyword|position|url例：15.html鼠标属性鼠标属性属性值含义属性值含义Auto自动N-resize上箭头Crosshair+Se-resize右下Default默认Sw-resize左下Hand手形S-resize下箭头Move移动W-resize左箭头E-resize右箭头TextINe-resize右上Wait沙漏Nw-resize左上help帮助例：16.html定位属性定位属性属性属性含义含义属性值属性值Position位置Absolute|relative|staticLeft|top横向|纵向位置Nem|%Width|height宽度|高度同上Clip剪切Shape|autoOverflow内容超出时Visible|hidden|scroll|autoZ-index立体效果Integervisibility可见性Inherit|visible|hidden例：17.html 18.html滤镜属性滤镜属性属性值含义属性值含义Alpha半透明Invert底片Blur模糊Light灯光投影Chroma指定颜色透明Mask透明膜Dropshadow投射阴影Shadow阴影Fliph水平翻转Wave波纹Flipv垂直翻转XrayX射线Glow光效Grayscale灰度例：19.htmlCSS布局CSS框架DreamWeaverDreamWeaver认识DreamWeaver练习使用DreamWeaver用DreamWeaver画表格和表单用DreamWeaver来应用CSSJavaScriptJavaScriptWEB魔术师魔术师本章内容的学习周期本章内容的学习周期视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。课程内容课程内容Javascript介绍Javascript语言视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。程序开发分为客户端、服务器端程序开发分为客户端、服务器端客户端开发的好处减少客户端到服务器端的往返。表单验证服务器端开发的好处web应用的核心逻辑集中管理胖客户端、瘦客户端客户端编程的主要技术客户端编程的主要技术javascript（最主要的）vbscriptjscriptappletactivex组件plug-in技术（价值在于：让专家级程序员开发新型语言）flash技术的最新发展jsdk包含的plug-inyahoo的工具条百度搜索伴侣CNNIC网络实名等3721学习资料学习资料msdnjscript参考CoreGuideJS15.zipCoreReferenceJS15.zipJavaScript手册中文.chmJavaScript 2005-Wrox-Professional Javascript For Web Developers.pdfJavaScript and ECMA versionsJavaScript and ECMA versionsJavaScript version Relationship to ECMA version JavaScript1.1ECMA-262,Edition1isbasedonJavaScript1.1.JavaScript1.2ECMA-262wasnotcompletewhenJavaScript1.2wasreleased.JavaScript1.3JavaScript1.3isfullycompatiblewithECMA-262,Edition1.JavaScript1.4JavaScript1.4isfullycompatiblewithECMA-262,Edition1.JavaScript1.5JavaScript1.5isfullycompatiblewithECMA-262,Edition3.JavaScriptJavaScript和和JavaJava的区别的区别基于对象和面向对象解释和编译强变量和弱变量JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型x=1234;/数值型变量数值型变量y“4321”;/字符型变量字符型变量代码格式不一样嵌入方式不一样JavaScriptJavaScriptJavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能由Netscape公司利用Sun的Java开发它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。客户端的JavaScript必须要有浏览器的支持JavaScript(ECMAScript)基础语法DOMDocumentObjectModelBOMBrowerObjectModelJavaScript/jscript/ECMAScriptavaScript是由Netscape公司开发.它的前身是LiveScriptMicrosoft发行jscript用于internetexplorer最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。ECMAScriptECMAScriptECMAScript并不与任何具体浏览器相绑定一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）：核心（ECMAScript）文档对象模型（DOM）；浏览器对象模型（BOM）。在网页中加入在网页中加入JavaScriptJavaScript通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间(1.htm)也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名(2.htm)原则上，放在之间。但视情况可以放在网页的任何部分(3.htm)一个页面可以有几个/Script，不同部分的方法和变量，可以共享。(4.htm)JavaScriptJavaScript的数据类型Theprimary(primitive)datatypesare:StringNumberBooleanThecomposite(reference)datatypesare:ObjectArrayThespecialdatatypesare:NullUndefined(vara;)控制字符控制字符JavaScript中有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。b:表示退格符。f:表示换页。n:表示换行符。r:表示回车符。t:表示Tab符号。:表示单引号本身。:表示双引号本身。类型转换类型转换OperationResultAddanumberandastringThenumberiscoercedintoastring.AddaBooleanandastringTheBooleaniscoercedintoastring.AddanumberandaBooleanTheBooleaniscoercedintoanumber.var a=3;var b=10;var c=true;alert(a+b);alert(b+c);alert(a+c);JavaScriptJavaScript基本语法基本语法变量JavaScript是一门弱类型的语言，所有的变量定义均以var来实现JavaScript的变量建议先定义，再使用JavaScript区分大小写虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做(5.htm)数组定义vararr=newArray(3);通过arr.length取得数组的长度(6.htm)注释的写法和java的一样数组数组使用方式：myarray=newArray(num)myarray=newArray(value1,value2)aa=newArray(3);aa20=444;document.write(aa20);num不设定，则按数组默认的最大长度自动设定。例如：aa=newArray();aa20=444;document.write(aa.length);JavaScriptJavaScript基本语法基本语法 运算符运算符算术运算+、-、*、/、=、=、=(7.htm)逻辑运算与：&或：|非：!(8.htm)字符串运算符连接运算：+(9.htm)取子集：substring(index1,index2)(10.htm)条件表达式条件?A:B(11.htm)substring 方法返回位于String对象中指定位置的子字符串。strVariable.substring(start,end)StringLiteral.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。JavaScriptJavaScript基本语法基本语法 控制语句控制语句if语句if(条件)elseif(条件1)else(12.htm)while语句while(条件)13.htmswitch语句switch(i)casei1:casei2:default:(14.htm)for15.htmdowhile16.htmwhile17.htmJavaScriptJavaScript内置类型内置类型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()varstrVariable=Thisisastringobject;strVariable=strVariable.big().big().big().big().big().big().big().big().big();strVariable=strVariable.bold();strVariable=strVariable.link(http:/);document.write(strVariable);Thisisastringobjectsubstringsubstring、indexOfindexOfsubstring(start,end)返回字符串的子字符串案例：substring.htmindexOfcharactor,fromIndex字符搜索案例：indexOf.htmMathMath对象常用方法：abs()绝对值sin(),cos()正弦余弦值asin(),acos()反正弦反余弦tan(),atan()正切反正切round()四舍五入sqrt()平方根pow(x,y)x的y次方案例：Math.htmDateDate对象创建方式：myDate=newDate();日期起始值:9年月日:主要方法getYear():返回年数setYear():设置年数getMonth():返回月数setMonth():设置月数getDate():返回日数setDate():设置日数getDay():返回星期几setDay():设置星期数getHours():返回小时数setHours():设置小时数getMinutes():返回分钟数setMintes():设置分钟数getSeconds():返回秒数setSeconds():设置秒数getTime():返回毫秒数setTime():设置毫秒数案例：Date.htmJavaScriptJavaScript基本语法基本语法 函数函数函数的使用利用function来定义一个函数(18.htm)传入参数(19.htm)传出值(20.htm)函数的参数传递函数的参数传递preloadTreeImages(1.gif,2.gif,3.gif);functionpreloadTreeImages()for(vari=0;iarguments.length;i+)varimg=document.createElement(img);img.src=argumentsi;div1.appendChild(img);JavaScriptJavaScript事件处理事件处理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)JavaScriptJavaScript的对话框的对话框警告框(alert)：出现一个提示信息21.htm询问框(prompt)：返回输入的值22.htm确认框(confirm)：根据不同的选择，返回true/false23.htm使用使用evaleval不使用evalalert(3+2);-32使用eval的上下文环境alert(eval(3)+eval(2);-5eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它eval_1.htmEval_2.htmjavascript hijacking javascript hijacking 函数劫持通过替换js函数的实现来达到劫持这个函数调用的目的hook.htmthisthis指的是当前的对象指的是当前的对象24.htm函数调用时使用thisobject.htm自定义对象,随时可以增加属性,方法class.htm定义类对象对象forinIn后跟一个对象，对此对象中的所有元素循环一次(25.htm25_1.htm)with为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象(26.htm)new用于生成一个新的对象(27.htm)TryCatchTryCatchtrydocument.writeln(Beginnngthetryblock)document.writeln(Noexceptionsyet)/Createasyntaxerroreval(6+*3)document.writeln(Finishedthetryblockwithnoexceptions)catch(err)document.writeln(Exceptioncaught,)document.writeln(Errorname:+err.name)document.writeln(Errormessage:+err.message)窗口中的对象和元素窗口中的对象和元素(BOM)(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.referrerBrowser Object ModelBrowser Object Model技巧：setTimeout、setInterval/vara=window.setInterval(alert(Hello,world),2000);vara=window.setTimeout(alert(Hello,world),2000);趣味趣味JavaScriptJavaScript程序程序黑客帝国(ex1/matrix.htm)鼠标跟随(ex2/mouseTrace.htm)找相同图片游戏(ex1/game/game.htm)飘浮的云(ex1/floating.htm)打字效果(ex1/printer.htm)TicTacToe游戏(ex1/tictactoe.htm)星球大战(ex1/starcraft/)实用实用JavaScriptJavaScript程序程序图片下拉列表(ex2/DropDown/)相互关联的列表(ex2/relative.htm)抽屉式菜单(ex2/drawer.htm)滑入式菜单（ex2/slip.htm）滚动下拉菜单(ex2/pulldown.htm)日历(ex2/calendar)输入判断js函数(ex2/pd.*)window.open教程(window.open.htm)确实要删除该条记录吗确实要删除该条记录吗functiona_onclick()varcvcv=window.confirm(确实要删除该条记录吗?)if(cv=true)returntrueelsereturnfalse程序优化程序优化functiona_onclick_new()event.returnValue=window.confirm(确实要删除该条记录吗?)confirmdel.htm学习学习HTML/CSS/JavaScriptHTML/CSS/JavaScript的方法的方法googleAlert()重点掌握表单输入的判断重点掌握表单输入的判断prototype.js是由SamStephenson写的一个javascript类库PrototypeisaJavaScriptFrameworkthataimstoeasedevelopmentofdynamicwebapplications.不可多得的Javascript(AJAX)开发工具Aptana掌握基本知识学会照猫画虎