html.css.javascript-学习笔记.doc

目 录HTML篇6一、HTML的相关介绍61、HTML的介绍62、HTML可以做什么63、HTML运行原理61）本地运行62）远程访问运行64、HTTP的开发工具7二、HTML的基本语法71、HTML基本语法72、HTML符号实体83、超链接84、HTML图片元素85、表格96、有序列表与无序列表91）无序列表92）有序列表97、框架标记108、HTML表单元素10（1）表单元素格式13（2）action指定把请求交给那个页面133）input元素139、字体141）字体大小142）物理字体153）逻辑字体154）客户端字体1510、文字布局161）文字对齐（横向）162）文字的分区166）与格式化文本167)图像1611、跑马灯1712、多媒体页面17div+css篇18一、div+css是什么18二、语法191、head标签192、元素193、选择器191）类选择器20（1）基本语法20（2）案例202）id选择器20（1）基本语法203）html元素选择器21（1）基本语法21（2）结论214）通配符选择器215）案例练习216）选择器的深入讨论22（1）父子选择器22（2）选择器优先级22（3）id选择器与class选择器的比较23（4）CSS文件简化244、块元素和行内连元素251）概念252）两者区别255、流261）标准流/非标准流概念262）盒子模型26（1）概念26（2）浮动273）定位28（1）static 定位28（2）relative定位（相对定位）29（3）absolute定位（绝对定位）29（4）fixed定位30（5）inherit30Javascript篇31一、js的基本介绍31二、js基本语法（一）321、js标识符342、js中的数据类型34（1）基本数据类型（三大类型）34（2）复合数据类型35（3）特殊数据类型363、变量的定义、初始化、赋值364、运算符375、流程控制（三大流程控制）376、循环控制39三、js基本语法（二）401、函数401）语法402）函数的引用403）函数的调用方法412、数组（数据类型：引用类型/复合类型）421）基本语法422）数组在内存中的存在形式423）js数组是引用传递424）js的增长方式435）js数组的几个应用436）数组的其他引用方式447)冒泡排序448）二分查找45四、js对象编程46简单介绍：461、js面向（基于）对象的特征介绍462、为什么需要对象474、创建类的基本语法485、访问对象属性的两种方法496、对象引用问题js垃圾回收机制（GC）的说明507、this问题的提出518、js类的定义559、js成员函数定义55关于Object类的说明5810、构造方法（函数）6011、创建对象的又一种形式6012、js的三大特征611）抽象的概念612）封装623）继承634）重载及覆盖655）多态666）闭包67五、js内部类681、分类682、内部类681）Object类682）Math类693）Date类694）String类705）Array类706）Boolean类717）Number类713、系统函数72六、js事件驱动721、概述722、事件驱动机制的理解733、js访问样式并修改样式741）访问内部style742）访问外部css744、事件驱动机制不同浏览器的兼容755、同一个事件可以被多个处理程序处理76七、dom编程761、dom编程的必要性762、dom编程简介763、分类774、dom关系图775、dom对象786、bom（The Browser Object Model） 浏览器对象模型 简介787、window对象798、history对象809、如何绑定事件监听8110、document对象8311、body对象8412、对dom的加强8513、style对象8514、forms对象和form对象8515、其他对象85HTML篇一、HTML的相关介绍1、HTML的介绍html是一种标记语言，主要用于网页开发，使用html可以展现文字图片、视屏、声音等。html是我们web开发的基础2、HTML可以做什么3、HTML运行原理1）本地运行HTML文件本地存放，使用本地浏览器打开 2）远程访问运行HTML文件在另一台服务器中存放，使用浏览器通过网络打开4、HTTP的开发工具二、HTML的基本语法1、HTML基本语法不管HTML文件有多复杂，它的基本结构如下：内容注意：元素就是标记2、HTML符号实体3、超链接超链接1超链接2 target=_blank超链接3 百度4、HTML图片元素5、表格用处：可以显示数据和图片，并且可以布局 表时该单元格占#列 表时该单元格占#行6、有序列表与无序列表1）无序列表2）有序列表7、框架标记说明：元素中不能出现标签小结：表格里面可嵌套表格，框架里面可嵌套框架8、HTML表单元素1）表单元素主要用于让用户输入数据，并提交给服务器2）基本语法案例：源码： login登录登录界面 用户名：密码：   （1）表单元素格式（2）action指定把请求交给那个页面3）input元素画直线复选框、单选框默认下拉选项框#下拉选项框表示一次性显示多少条记录下拉选项框表示一次性选择多少条记录小结：target汇总9、字体1）字体大小2）物理字体3）逻辑字体4）客户端字体10、文字布局1）文字对齐（横向）2）文字的分区6）与格式化文本7)图像11、跑马灯12、多媒体页面div+css篇一、div+css是什么原理图：分类： 外部css 内部css二、语法1、head标签2、元素栏目三栏目四3、选择器选择器是CSS中非常重要的概念，CSS提供四种选择器：1）类选择器（1）基本语法（2）案例xxx.css：.style1font-size: 40px;color: #3BA100;background-color:pink;xxxhtml：BBP2）id选择器（1）基本语法说明：html文件中引用id选择器3）html元素选择器（1）基本语法（2）结论当一个元素被id选择器，类选择器，html选择器修饰，优先级是:id类html4）通配符选择器说明：margin:10px 9px 9px 7px;/*如果给出四个值，表示上、右、下、左*/margin:10px 9px 7px;/*如果给出三个值，表示上、（左右）、下*/5）案例练习6）选择器的深入讨论（1）父子选择器#style2font-size: 50px;background-color: silver;#style2 spanfont-size: 60px;color: #ff0000;说明：1.父子选择器可以有多层，但用法不多#style2 span span font-size: 60px;color: #ff0110;2.父子选择器适用于类选择器和id选择器（2）选择器优先级1.如果一个元素被id选择器和类选择器同时修饰，优先级:idclass2. 当一个元素同时被class、id、html、* 修饰时，优先级是：idclasshtml *（3）id选择器与class选择器的比较一个元素只能有一个id选择器，可以有多个class选择器css：.style1font-size: 40px;color: #3BA100;background-color:pink;.style1_newfont-size: 70px;color:bule ;background-color:#e8ec42;text-decoration: underline;html：新闻3说明：两个类选择器同时作用于一个元素发生冲突时，在css文件中排在前面的类选择器的优先级低于排在后面的（4）CSS文件简化在CSS文件中，如果有多个class/id/html选择器有相同的部分，可以吧相同的CSS样式放在一起,这样可以简化css文件例：css:/*类选择器 */.style1font-size: 40px;color: #3BA100;/* background-color:pink; */.style1_newfont-size: 70px;color:blue;/* background-color:pink; */text-decoration: underline;/*id选择器*/#style2font-size: 40px;/* background-color: silver; */./*合并选择器相同属性 */.style1,.style1_new,#style2background-color:pink;内联元素只会占用内容的长度4、块元素和行内连元素1）概念说明：内联元素可以根据不同的浏览器来添加不同的东西，不一定是仅仅文本或者是内联元素2）两者区别说明：案例：bbpBBPbbp5、流1）标准流/非标准流概念2）盒子模型（1）概念说明：1. html元素都可以看做一个盒子2. 盒子模型的参照物不一样，则使用的css的属性不一样3. 如果不想破坏外观，则尽量使用margin进行布局（2）浮动左浮动：尽量的向左边移动，让出自己的空间给下一个元素，知道碰到父元素的左边框右浮动：尽量的向左边移动，让出自己的空间给下一个元素，知道碰到父元素的右边框案例1：案例2：字包图清除浮动:3）定位（1）static 定位默认的定位方式说明：left与top属性不生效（2）relative定位（相对定位）元素框偏移某个距离（left和top），元素保持其定位前的形状，它原本所占的空间任然保留，从这一角度看，该元素任然在文档流/标准流中一样说明：relative的参照点是它原来的位置（3）absolute定位（绝对定位）元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有原来的空间 说明： （4）fixed定位见上图（5）inherit将子元素的position设置为继承父元素的positionJavascript篇一、js的基本介绍 js是开发web的脚本语言 常用于个静态HTML添加动态功能，用于响应用户的各种操作说明： 解释性语言：在执行时直接对源码进行执行 java程序 .java-.class-jvm js-浏览器（js引擎来解释执行） js大多数情况下由客户端浏览区执行，有少数情况执行在服务器端 因为js是浏览器来执行的，因此不同的浏览器可能对js的支持不一样二、js基本语法（一）案例一： new_html_file function test() window.alert(Hello World!); 说明：l js代码一般是放在head标签间的，但也可以随意l js代码必须要用包起，若没有包起，浏览器会将其视为普通文本处理l 在一个HTML文件中可以出现多对script片段，浏览器会按照先后顺序依次执行改进：一个加法程序 function add() var num1=123; var num2=456; var result=num1+num2; window.alert(结果是：+result); 说明：（1） js是弱数据类型语言，即在定义变量时，统一使用var表示，甚至可以去除var（2） js中变量的数据类型是由浏览器引擎决定的1、js标识符2、js中的数据类型（1）基本数据类型（三大类型）说明：1.通过typeof可以看到变量的具体数值类型2.NaN - not a number Infinity-无穷大 isNaN() -判断一个值是否是个数值 isFinite() 判断一个值是否是一个有穷大（2）复合数据类型（3）特殊数据类型说明：undefine：1.window.alter(tt)/tt未定义2.var tt；3、变量的定义、初始化、赋值说明：var b=123;-b为数值b=b+”;-b为字符串4、运算符说明：“|”原则：将返回第一个不为false的值或对象，或返回最后一个值（当全为false时）var a=4; var b=3; c=a|3; window.alert(c); 运行结果：c=4；5、流程控制（三大流程控制）1）顺序控制2）分支控制（1）单分支if(条件表达式) 语句; （2）双分支if(条件表达式) 语句; else 语句; （3）多分支 if(条件表达式) 语句; else if(条件表达式1) 语句; else if. else说明：一旦找到满足条件的入口，执行完毕后就直接结束这个多分支说明：条件语句可以使符合js规范的有数据类型（数组、对象也可以，但一般不用，即除外），这一点与Java或C等语言不同6、循环控制1）for(条件表达式)循环2）while(条件表达式)循环3）dowhile(条件表达式)循环说明：在ie8中可以通过工具来对js代码进行调试三、js基本语法（二）1、函数1）语法function 函数名(参数列表) 语句 return 返回值； 说明：1.无返回值2.参数列表中不要写类型var，只需要写参数名就行3.无返回值却又接受了，则返回undefine2）函数的引用1.建立 .js 文件2.在 .js文件中写函数3.在需要的文件中引入，引入语法：说明：有两个函数3）函数的调用方法说明：1.第二种方法不推荐使用2.函数的调用过程（内存分析）3.js支持参数个数可变的函数function abc1()/在js中有一个arguments可以访问所有的传入值for(var i=0;iarguments.length;i+)document.write(argumentsi+ );调用：abc1(1,2,3,”hello world”);/abc1();4.js支持创建动态函数2、数组（数据类型：引用类型/复合类型）说明：一个js数组中的元素可以是不同类型，这与java等编译语言不同1）基本语法var a=数值1，数值2，.;（一维数组）var a=数值1，数值2，数值3，数值4.;（二维数组）2）数组在内存中的存在形式3）js数组是引用传递普通数据的传递：4）js的增长方式js的数组可以动态增长，这个和java的数组不一样，有点像java中的listvar a=0,1; a2=2;5）js数组的几个应用6）数组的其他引用方式说明：这个不常用（js中数组的下标可以不是数字）7)冒泡排序8）二分查找说明：二分查找要求数组是有序的四、js对象编程简单介绍：1、js面向（基于）对象的特征介绍2、为什么需要对象说明：1.类（原型对象）和对象（实例）的区别与联系2.带var与不带var的区别3、创建自定义类和对象的方式(有5种)4、创建类的基本语法 说明：如何判断一个对象是不是某个类型5、访问对象属性的两种方法说明：第二种方法的意义6、对象引用问题js垃圾回收机制（GC）的说明说明：js提供的一种删除对象属性的放法deletedelete 对象名.属性 会立即释放对象的这个属性空间（内存）7、this问题的提出使用this：说明：this的使用可以表示公开function Person()/定义类的属性/使用var定义的属性是私有属性var name=bbp;var age=20;/使用this定义的属性是公开属性=bbp;this.age=20;/定义方法/使用function定义的方法是私有方法function show1()window.alert(show1: +name+ +age);/使用this定义的方法是公开方法this show1=function()window.alert(show2: +name+ +age);哪个对象实例调用this所在的函数，那么this就代表哪个对象实例 /*这是一个函数，而非一个js类，这个函数属于js的window类*/ function test() alert(this.v); var v=90; /属于window类的属性 test();/window.test();结果：this不能在类的外部使用，否则调用者就变成window类了案例： function Apple() var a1=new Apple(); =a1; a1.color=red; window.alert(a1: ++ +a1.color); var a2=new Apple(); window.alert(a2: ++ +a2.color);/undefined 结果：使用this： function Apple() =a; this.color=red; var a1=new Apple(); window.alert(a1: ++ +a1.color); var a2=new Apple(); window.alert(a2: ++ +a2.color); 结果：8、js类的定义9、js成员函数定义方式1（常用）：function Person(name,age)=name;this.age=age;/定义方法，相当于一个属性this.showName=function()document.write(我的名字是：+);var p=new Person(BBP,22);p.showName();方式2：/定义Persion类function Person(name,age)=name;this.age=age;/定义showName方法function showName()document.write(我的名字是：+);var p=new Person(BBP,22);/将showName方法与Person类关联起来p.showName=showName; /这与p.showName=showName()有不同的含义， /一个将函数的地址给了p.showname，一个将返回值给了p.showname;p.showName();方式3：function Person(name,age)=name;this.age=age;var p=new Person(BBP,22);p.showName=function()document.write(我的名字是：+);这三种定义函数的方法有一个共同点：每个对象独占代码；这一点也是折线三个方法的缺点如果对象多，会造成内存的浪费，影响运行的效率。代码原理说明如下：方式4：（原型法）/这种方式将方法绑定在类上，所有对象共享同一代码区，而不是独立占有function Person(name)=name;Ptotype.showName=function()document.write(我的名字是：+);var p1=new Person(bbp);p1.showName();var p2=new Person(bbc);p2.showName();代码原理如下：说明：每个js类都有一个prototype这种方式不能访问类的私有变量和私有方法“=”两边是对象或者是对象函数，则比较地址是否相等扩展：如何个类添加方法（如何给某类型的所有对象添加方法）案例：请思考给js的Array对象扩展一个方法find(val)，当Array对象调用该方法的时候，如果能找到val则返回val的下标，否则返回-1./给Array扩展方法Atotype.find=function(val)for(var i=0;ithis.length;i+)if(val=thisi)return i;return -1;var arr=new Array(3);arr0=BBP;arr1=BBF;arr2=BBC;var res=arr.find(BBP);document.write(res+ );方式5：Object直接创建关于Object类的说明Object类是所有javascript类的基类，提供了一种创建自定义对象的简单方式，不需要程序员再定义构造函数。主要属性：constructor 对象的构造函数prototype 获得类的prototype对象；static性质主要方法：hasOwnProperty(property) 是否属于本类定义的属性isPrototypeOf(Object) 是否指定类的prototypepropertyIsEnumerable(property)是否可例举的属性toString()返回对象对应的字符串valueOf()返回对象对应的原始类型值代码：Ototype.showName=function()document.write(); var p=new Object();=BBP;p.age=20;p.showName();相当于：function Person()Ptotype.showName=function()document.write(); var p=new Person();=BBP;p.age=20;p.showName();成员函数的细节说明：成员函数参数列表参数可以有多个成员函数可以有返回值，也可以没有返回值，有的话只能有一个同名方法会发生覆盖，即后一个方法会覆盖前一个（因为js中没有重载）/js中同名方法会覆盖，不会重载function test(a)document.write(a);function test(a,b)document.write(a+ +b);test();结论：js在调用函数的时候，是根据函数名来调用，如果有多个函数名相同，则只认最后一个函数10、构造方法（函数）说明：在js构造函数中是可以传递一个函数的，即在给一个对象初始属性值的时候也可指定函数属性，如下：/初始化时传递函数 function counter(val)window.alert(Hello,+val);function Persion(name,age,fun)=name;this.age=age;this.fun=fun;var p1=new Persion(BBP, 20, counter);var p2=new Persion(BBP, 20, null);/不传递函数p1.fun()11、创建对象的又一种形式如果一个对象比较简单，可以直接创建（可以指定普通属性和函数属性），如：/创建对象的有一种形式,常用于ext var p=name:BBP,eag:20,fun1:function()window.alert(hello) ; window.alert(p.constructor); / constructor是Object window.alert();调用对象的另一种方法：var p=name:BBP; function test() window.alert(); test.call(p);/p.test();这样调用，该函数的this就是对象实例面向对象编程的进一步认识for invar p=name:BBP,showName:function()window.alert(hello.); ; for(var key in p) window.alert(pkey);/key 属性名 意义在于产看js对象的属性有哪些for(var key in window) document.write(key+: +windowkey+); 12、js的三大特征1）抽象的概念说明：抽象可以算js的特征，但是没有公认2）封装访问控制修饰符案例：function Person(name,age,sal) =name;/公开属性 var myage=age;/私有属性 var salary=sal;/私有属性 /在类中如何定义公开方法（特权方法），私有方法（内部方法） /公开方法 this.show1=function() window.alert(myage+ +salary); /私有方法 function show2() window.alert(myage+ +salary); var p=new Person(BBP, 20, 6000); window.alert(+ +p1.age); p.show1(); p.show2();/不成功结果：说明：prototype方式定义的方法不能访问类的私有变量和私有方法function Person(name,age,sal) =name;/公开属性 var myage=age;/私有属性 this.abc1() window.alert(abc1); function abc2() window.alert(abc2); Ptotype.fun=function() window.alert(); window.alert(myage);/错误 this.abc1(); abc2();/错误 3）继承继承的必要性案例：function MidStu(name,age) =name; this.age=age; this.show=function()document.write(+ +this.age);this.payFee=function(mon)document.write(应缴：+mon*0.8); function Pupil(name,age)=name;this.age=age;this.show=function()document.write(+ +this.age);this.payFee=function(mon)document.write(应缴：+mon*0.5); 上面的代码存在冗余问题，解决方法是继承 function Stu(name,age)=name;this.age=age;this.show=function()document.write(+ +this.age);this.payFee=function(mon)document.write(应缴：+mon*0.5); function MidStu(name,age)this.stu=Stu;/js的继承是通过对象冒充实现的this.stu(name,age);/这句话很重要，不能少，因为js是动/态语言，如果不执行，则不能实现继承效果 function Pupil(name,age) this.stu=Stu; this.stu(name,age); var mis=new MidStu(BBP,20); mis.show();说明：通过对象冒充，js可以实现多重继承的效果，但是使用的很少4）重载及覆盖简单的说，方法的重载就是类的同一种功能多种实现的方式，到底采用哪种方式取决于调用者给出的参数js不支持重载，因为js中的方法本身就是支持可变参数的，所以js可以看成天然支持重载，通过在方法体内部检测方法的参数情况，来实现重载效果。【调用最后的那个方法】覆盖，也称之为改写（重写），就是指子类中定义的方法替换掉父类的方法案例： function Stu(name,age)=name;this.age=age;this.show=function()document.write(+ +this.age);this.payFee=function(mon)document.write(应缴：+mon*0.5); function MidStu(name,age)this.stu=Stu;/js的继承是通过对象冒充实现的this.stu(name,age);this.payFee=function(mon)document.write(中学生应缴的费用：+mon*0.7); var mis=new MidStu(BBP,20); mis.show(); mis.payFee(100);5）多态所谓的多态，就是指一个引用（类型）在不同情况下的多种状态；在java中多态是指通过指向父类的引用，来调用不同子类中实现的方法。js实际上是无态的，是一种动态语言，一个变量的类型是在运行的过程中有js引擎来决定的，所以说，js天然就是支持多态的。案例：function Master() this.feed=function(food,animal) /在执行时，js编译器会识别abimal和food的类别，从而体现多态 window.alert(animal.constructor) document.write(+ get ++); function Food(name) =name; function Animal(name) =name; function Cat(name) this.animal=Animal; this.animal(name); function Dog(name) this.animal=Animal; this.animal(name); function Fish(name) this.food=Food; this.food(name); function Bone(name) this.food=Food; this.food(name); var f=new Fish(fish);