尚学堂html+css+javascript教程课件

1、HTMLWEB第一语言课程内容及学习周期HTML介绍HTML细节文件结构文字图片链接表格表单多窗口特殊字符在不是很熟悉HTML的情况下，学习加练习的时间应该在48个小时对于已经熟悉HTML的读者可以略过本章本章内容针对程序员进行设置，不是培养设计师HTML简介Hyper Text Markup Language超文本 (文字+图片+音视+链接)标记语言 (浏览器根据标记显示内容)来自于SGML(标准通用标记语言)专注于在Web上传递信息是写给浏览器的语言历史HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3CIETF Internet Engineering Ta

2、sk ForceHTTP协议 RFC等RFC2616 Http1.1 RFC1521 MIMEW3C World Wide Web Consortium ()HTML XML等XHTML符合XML标准的HTMLDHTML Dynamic HTML （X）HTML / CSS / JavaScript的综合运用HTML语法标记标记(标签或元素)的形式内容Eg. 文字Eg. Eg. 位于尖括号内，可以具有属性值属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合XHTML）有开始必须有结束(XHTML)标签不能嵌套不区分大小写但应该养成良好的编程习惯，推荐都用小写Html文档结构典型HTML

3、我会努力的！01.htmlhead中的常用标签文字“文字”将显示在浏览器标题栏上：用于设置一些头信息定义CSS格式用于定义脚本，Eg. Javascripthttp-equiv指明下面要设置的项目content指明该项目设置的内容02.html标签bodybgcolor=“#” -背景色 background=img_url -背景图片色彩值 “#rrggbb”Eg. 红绿蓝数字值body其他属性 text link alink vlink bgcolor leftmargin topmargin03.html04.html锚点标签-在该位置定义名字为AnchorName的锚，就是给这个位置起

4、了个名字，别人可以用这个名字直接链接到该文件的这个位置链接标签-超级链接，跳转到另一文件文字当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。连接到文件的特定部分Href=“url#point”链接到url的point部分在url文档中用标识Target 见“框架“部分05.html06.html路径问题本地路径c:dir1dir2绝对路径/img_url.jpg相对路径images/01.jpg././images/01.jpg/images/01.jpg = http:/mysite/images/01.jpgEg. Eg. 07.

5、html相对于URL地址URL URI URNURLUniform Resource Locator（统一资源定位符）网络协议 主机名 端口号 资源名（定位标记）:80/index.html#top带有参数的url 及 url编码问题 见Servlet / JSP部分URNUniform Resource Name持久可用的资源标准名称例如邮箱名mashibing2004URIUniform Resource Identifier包含URL和URNURI_URL_URN.html分隔线-语法Size 高度Align 对齐方式，可以取left或rightNoshade 无阴影效果颜色Eg. 08

6、.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可以使用 属性2:值201.htmlCSS的调用方式在Head中调用

7、(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.htmCSS组合/注释可以一次性定义多个选择符的样式H1,H2,H3color:red;font-family:serifP A06_2.html注释：/*这是注释*/字体属性属性含义属性值font-family

8、字体各种字体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背景的滚动S

9、croll | fixBackground-position背景图案初始位置% | n em | top | left | right | bottom 例：08.html文本属性属性含义属性值word-spacing单词间距n emletter-spacing字母间距n emtext-decoration装饰样式underline| overline| line-through| blinkvertical-align垂直方向位置sub| super |top |text-top|middle| bottom| text-bottomtext-transform转为其他形式capitaliz

10、e| uppercase| lowercasetext-align对齐left| right| center| justifytext-indent缩进n em| %line-height行高pixels、n em、%例：09.htmlEm:12pixels 的 M常用于印刷的单位装饰超链接 伪类选择符对链接的修饰A:link 未访问时的状态A:visited 访问过后的状态A:active 鼠标点中不放时的状态A:hover 鼠标划过时的状态10.html边距属性属性含义属性值margin-top上边距n em | %margin-right右n em | %margin-bottom下n

11、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 | thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四边同上Border-color边框颜色Co

12、lorBorder-style边框样式Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top |right|bottom|left上(右|底|左)所有属性Border-width | border-style | color例：13.html图文混排属性含义属性值Width宽度n em | %Height高度n emFloat文字环绕Left | rightclear去除文字环绕Left | right | both例：14.html列表属性属性含义属性值Display是否显示Block | inli

13、ne | 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-re

14、size上箭头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横向|纵向位置N em | %Width | height宽度|高度同上Clip剪切Shape | autoOverflow内容超出时Visible | hidden | scroll | autoZ-ind

15、ex立体效果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框架DreamWeaver认识DreamWeaver练习使用DreamWeaver用DreamWeaver画表格和表单用DreamWeaver来应用CSSJav

16、aScriptWEB魔术师本章内容的学习周期视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。课程内容Javascript介绍Javascript语言视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。程序开发分为客户端、服务器端客户端开发的好处减少客户端到服务器端的往返。表单验证服务器端开发的好处w

17、eb应用的核心逻辑集中管理胖客户端、瘦客户端客户端编程的主要技术javascript（最主要的）vbscriptjscriptappletactivex组件plug-in技术（价值在于：让专家级程序员开发新型语言）flash技术的最新发展jsdk包含的plug-inyahoo 的工具条百度搜索伴侣CNNIC网络实名等 3721学习资料msdnjscript参考CoreGuideJS15.zipCoreReferenceJS15.zipJavaScript手册中文.chmJavaScript 2005- Wrox - Professional Javascript For Web Develop

18、ers.pdfJavaScript and ECMA versionsJavaScript 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. JavaScript

19、1.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”; /字符型变量代码格式不一样 嵌入方式不一样 JavaScriptJavaScript是一种描

20、述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能由Netscape公司利用Sun的Java开发它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。客户端的JavaScript 必须要有浏览器的支持JavaScript (ECMAScript)基础语法DOMDocument Object ModelBOMBrower Object ModelJavaScript/jscript / ECMAScriptavaScript是由Netscape公司开发 .它的前身是Live Script Microsoft发行jscript用于i

21、nternet explorer 最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。 ECMAScriptECMAScript并不与任何具体浏览器相绑定 一个完整的JavaScript实现是由以下3个不同部分组成的（见图1-1）： 核心（ECMAScript）文档对象模型（DOM）； 浏览器对象模型（BOM）。 在网页中加入JavaScript通过在网页中加入标记JavaScript的开始和结束，将JavaScript代码放到之间(1.

22、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: Object Array The special data types are: Null Undef

23、ined (var a;)控制字符JavaScript中有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。b :表示退格符。f :表示换页。n :表示换行符。r :表示回车符。t :表示Tab符号。 :表示单引号本身。 :表示双引号本身。类型转换Operation Result Add a number and a string The number is coerced into a string. Add a Boolean and a string The Boolean is coerced into a string. Add a number and a Boolean

24、The Boolean is coerced into a number. var a=3; var b=10; var c=true;alert(a+b); alert(b+c); alert(a+c);JavaScript基本语法变量JavaScript是一门弱类型的语言，所有的变量定义均以var来实现JavaScript的变量建议先定义，再使用JavaScript区分大小写虽然JavaScript可以不需定义即可直接使用变量，但不建议这么做(5.htm)数组定义var arr = new Array(3);通过arr.length取得数组的长度(6.htm)注释的写法和java的一样数组

25、使用方式：myarray=new Array(num)myarray=new Array(value1,value2)aa = new Array(3);aa20 = 444;document.write (aa20);num不设定，则按数组默认的最大长度自动设定。例如：aa = new Array();aa20 = 444;document.write (aa.length);JavaScript基本语法运算符算术运算+、-、*、/、=、=、=(7.htm)逻辑运算与：&或：|非：!(8.htm)字符串运算符连接运算：+ (9.htm)取子集：substring(index1,index2)

26、 (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

27、)和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.htmswitch 语句switch(i) case i1: casei2: default:(14.htm)for15.htmdowhile16.

28、htmwhile17.htmJavaScript内置类型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(star

29、t,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 objectsubstring、indexOfsubstring(start,en

30、d) 返回字符串的子字符串 案例：substring.htm indexOfcharactor,fromIndex 字符搜索 案例：indexOf.htmMath对象常用方法：abs() 绝对值sin() , cos() 正弦余弦值asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切round() 四舍五入sqrt() 平方根pow(x,y) x的y次方案例： Math.htmDate对象创建方式： myDate = new Date();日期起始值:9年月日: 主要方法getYear(): 返回年数 setYear(): 设置年数getMonth(): 返回

31、月数 setMonth():设置月数getDate(): 返回日数 setDate():设置日数 getDay(): 返回星期几 setDay():设置星期数 getHours():返回小时数 setHours():设置小时数 getMinutes():返回分钟数 setMintes():设置分钟数 getSeconds():返回秒数 setSeconds():设置秒数getTime() : 返回毫秒数 setTime() :设置毫秒数案例： Date.htmJavaScript基本语法函数函数的使用利用function来定义一个函数 (18.htm)传入参数 (19.htm)传出值 (20.

32、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

33、失去焦点时(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：鼠标从一

34、个对象上移开时(onMouse.htm)onSelect：当form对象中的内容被选中时(onSelect.htm)onSubmit：出现在用户通过提交按钮提交一个表单时(onSubmit.htm)JavaScript的对话框警告框(alert)：出现一个提示信息21.htm询问框(prompt)：返回输入的值22.htm确认框(confirm)：根据不同的选择，返回true/false23.htm使用eval不使用evalalert (3+2);-32使用eval的上下文环境alert (eval(3) + eval(2);-5eval()函数可以把一个字符串当作一个JavaScript表达

35、式一样去执行它eval_1.htmEval_2.htmjavascript hijacking 函数劫持 通过替换js函数的实现来达到劫持这个函数调用的目的 hook.htmthis指的是当前的对象24.htm函数调用时使用thisobject.htm自定义对象,随时可以增加属性,方法class.htm定义类对象forinIn后跟一个对象，对此对象中的所有元素循环一次(25.htm 25_1.htm)with为一段代码建立一个缺省的对象，任何无对象的属性引用，都将使用该缺省的对象(26.htm)new用于生成一个新的对象(27.htm)TryCatchtrydocument.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: + )document.writeln(Error message: + err.messag