2023年htmlcssjavascript学习笔记.doc

目 录
HTML篇 6
一、HTML的相关介绍 6
1、HTML的介绍 6
2、HTML可以做什么 6
3、HTML运营原理 6
1）本地运营 6
2）远程访问运营 6
4、HTTP的开发工具 7
二、HTML的基本语法 7
1、HTML基本语法 7
2、HTML符号实体 8
3、超链接 8
4、HTML图片元素 8
5、表格 9
6、有序列表与无序列表 9
1）无序列表 9
2）有序列表 9
7、框架标记 10
8、HTML表单元素 10
（1）表单元素格式 13
（2）action指定把请求交给那个页面 13
3）input元素 13
9字体 14
1）字体大小 14
2）物理字体 15
3）逻辑字体 15
4）客户端字体 15
10、文字布局 16
1）文字对齐（横向） 16
2）文字的分区 16
6）与格式化文本 16
7)图像 16
11、跑马灯 17
12、多媒体页面 17
div+css篇 18
一、div+css是什么 18
二、语法 19
1、head标签 19
2、元素 19
3、选择器 19
1）类选择器 20
（1）基本语法 20
（2）案例 20
2）id选择器 20
（1）基本语法 20
3）html元素选择器 21
（1）基本语法 21
（2）结论 21
4）通配符选择器 21
5）案例练习 21
6）选择器的进一步讨论 22
（1）父子选择器 22
（2）选择器优先级 22
（3）id选择器与class选择器的比较 23
（4）CSS文献简化 24
4、块元素和行内连元素 25
1）概念 25
2）两者区别 25
5、流 26
1）标准流/非标准流概念 26
2）盒子模型 26
（1）概念 26
（2）浮动 27
3）定位 28
（1）static 定位 28
（2）relative定位（相对定位） 29
（3）absolute定位（绝对定位） 29
（4）fixed定位 30
（5）inherit 30
Javascript篇 31
一、js的基本介绍 31
二、js基本语法（一） 32
1、js标记符 34
2、js中的数据类型 34
（1）基本数据类型（三大类型） 34
（2）复合数据类型 35
（3）特殊数据类型 36
3、变量的定义、初始化、赋值 36
4、运算符 37
5、流程控制（三大流程控制） 37
6、循环控制 39
三、js基本语法（二） 40
1、函数 40
1）语法 40
2）函数的引用 40
3）函数的调用方法 41
2、数组（数据类型：引用类型/复合类型） 42
1）基本语法 42
2）数组在内存中的存在形式 42

3）js数组是引用传递 42
4）js的增长方式 43
5）js数组的几个应用 43
6）数组的其他引用方式 44
7)冒泡排序 44
8）二分查找 45
四、js对象编程 46
简朴介绍： 46
1、js面向（基于）对象的特性介绍 46
2、为什么需要对象 47
4、创建类的基本语法 48
5、访问对象属性的两种方法 49
6、对象引用问题js垃圾回收机制（GC）的说明 50
7、this问题的提出 51
8、js类的定义 55
9、js成员函数定义 55
关于Object类的说明 58
10、构造方法（函数） 60
11、创建对象的又一种形式 60
12、js的三大特性 61
1）抽象的概念 61
2）封装 62
3）继承 63
4）重载及覆盖 65
5）多态 66
6）闭包 67
五、js内部类 68
1、分类 68
2、内部类 68
1）Object类 68
2）Math类 69
3）Date类 69
4）String类 70
5）Array类 70
6）Boolean类 71
7）Number类 71
3、系统函数 72
六、js事件驱动 72
1、概述 72
2、事件驱动机制的理解 73
3、js访问样式并修改样式 74
1）访问内部style 74
2）访问外部css 74
4、事件驱动机制不同浏览器的兼容 75
5、同一个事件可以被多个解决程序解决 76
七、dom编程 76
1、dom编程的必要性 76
2、dom编程简介 76
3、分类 77
4、dom关系图 77
5、dom对象 78
6、bom（The Browser Object Model）— 浏览器对象模型 简介 78
7、window对象 79
8、history对象 80
9、如何绑定事件监听 81
10、document对象 83
11、body对象 84
12、对dom的加强 85
13、style对象 85
14、forms对象和form对象 85
15其他对象 85

HTML篇
一、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

登录
f='G:\HTML\picture\64.png' type="image/x-icon" />

sp;

（1）表单元素格式

（2）action指定把请求交给那个页面
3）input元素

画直线
项框
#

下拉选项框表达一次性显示多少条记录

下拉选项框表达一次性选择多少条记录

小结：target汇总

9、字体
1）字体大小

2）物理字体

3）逻辑字体

4）客户端字体

10、文字布局
1）文字对齐（横向）

2）文字的分区

6）与格式化文本

div+css篇
一、div+css是什么

原理图：

分类：
① 外部css
② 内部css

二、语法
1、head标签

2、元素
<元素名 style=”属性名：属性值;属性名：属性值1;”/>
栏目三
栏目四

3、选择器
选择器是CSS中非常重要的概念，CSS提供四种选择器：

1）类选择器
（1）基本语法

（2）案例
xxx.css：
.style1{
font-size: 40px;
color: #3BA100;
background-color:pink;
}
xxx．html：
BBP
2）id选择器
（1）基本语法

说明：html文献中引用id选择器
<元素 id=’id选择器名称’>
3）html元素选择器
（1）基本语法

（2）结论
当一个元素被id选择器，类选择器，html选择器修饰，优先级是:id>类>html

4）通配符选择器

说明：
margin:10px 9px 9px 7px;/*假如给出四个值，表达上、右、下、左*/
margin:10px 9px 7px; /*假如给出三个值，表达上、（左右）、下*/
5）案例练习

6）选择器的进一步讨论
（1）父子选择器

#style2{
font-size: 50px;
background-color: silver;
}

#style2 span{
font-size: 60px;
color: #ff0000;
}
说明：
1.父子选择器可以有多层，但用法不多
#style2 span span {
font-size: 60px;
color: #ff0110;
}
2.父子选择器合用于类选择器和id选择器
（2）选择器优先级
1.假如一个元素被id选择器和类选择器同时修饰，优先级:id>class

2. 当一个元素同时被class、id、html、* 修饰时，优先级是：
id>class>html> *
（3）id选择器与class选择器的比较
一个元素只能有一个id选择器，可以有多个class选择器

css：
.style1{
font-size: 40px;
color: #3BA100;
background-color:pink;
}

.style1_new{
font-size: 70px;
color:bule ;
background-color:#e8ec42;
text-decoration: underline;
}
html：
新闻3
说明：两个类选择器同时作用于一个元素发生冲突时，在css文献中排在前面的类选择器的优先级低于排在后面的

（4）CSS文献简化
在CSS文献中，假如有多个class/id/html选择器有相同的部分，可以吧相同的CSS样式放在一起,这样可以简化css文献
例：
css:
/*类选择器 */
.style1{
font-size: 40px;
color: #3BA100;
/* background-color:pink; */
}

.style1_new{
font-size: 70px;
color:blue;
/* background-color:pink; */
text-decoration: underline;
}

/*id选择器*/
#style2{
font-size: 40px;
/* background-color: silver; */
}
.
.
.
.
/*合并选择器相同属性 */
.style1,.style1_new,#style2{
background-color:pink;
}
内联元素只会占用内容的长度
4、块元素和行内连元素
1）概念

说明：内联元素可以根据不同的浏览器来添加不同的东西，不一定是仅仅文本或者是内联元素
2）两者区别

说明：

案例：
bbp

BBP1）static 定位
默认的定位方式
说明：left与top属性不生效
（2）relative定位（相对定位）
元素框偏移某个距离（left和top），元素保持其定位前的形状，它原本所占的空间任然保存，从这一角度看，该元素任然在文档流/标准流中同样
说明：relative的参照点是它本来的位置

（3）absolute定位（绝对定位）
元素从本来的位置脱离，并让出自己的空间，后面的元素就会占有本来的空间

说明：

（4）fixed定位
见上图
（5）inherit
将子元素的position设立为继承父元素的position

Javascript篇
一、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）do{
}while(条件表达式) 循环
说明：
在ie8中可以通过工具来对js代码进行调试

三、js基本语法（二）
1、函数
1）语法
function 函数名(参数列表)
{
语句…
return 返回值；
}
说明：
1.无返回值
2.参数列表中不要写类型var，只需要写参数名就行
3.无返回值却又接受了，则返回undefine
2）函数的引用
1.建立 .js 文献
2.在 .js文献中写函数
3.在需要的文献中引入，引入语法：

说明：有两个函数

3）函数的调用方法

说明：
1.第二种方法不推荐使用
2.函数的调用过程（内存分析）

3.js支持参数个数可变的函数
function abc1(){
//在js中有一个arguments可以访问所有的传入值
for(var i=0;i素可以是不同类型，这与java等编译语言不同
1）基本语法
var a=[数值1，数值2，...];（一维数组）
var a=[[数值1，数值2]，[数值3，数值4]...];（二维数组）
2）数组在内存中的存在形式

3）js数组是引用传递

普通数据的传递：

4）js的增长方式
js的数组可以动态增长，这个和java的数组不同样，有点像java中的list
var a=[0,1];
a[2]=2;
5）js数组的几个应用

6）数组的其他引用方式

说明：这个不常用（js中数组的下标可以不是数字）
7)冒泡排序

8）二分查找

说明：二分查找规定数组是有序的

四、js对象编程
简朴介绍：

1、js面向（基于）对象的特性介绍

2、为什么需要对象

说明：
1.类（原型对象）和对象（实例）的区别与联系

2.带var与不带var的区别

3、创建自定义类和对象的方式(有5种)

4、创建类的基本语法

说明：如何判断一个对象是不是某个类型

5、访问对象属性的两种方法

说明：第二种方法的意义

6、对象引用问题js垃圾回收机制（GC）的说明

说明：js提供的一种删除对象属性的放法——delete

delete 对象名.属性 会立即释放对象的这个属性空间（内存）

7、this问题的提出

使用this：

说明：
①this的使用可以表达公开
function Person(){
//定义类的属性
//使用var定义的属性是私有属性
var name="bbp";
var age="20";
//使用this定义的属性是公开属性
this.name="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</p><p style='height:0px;padding:0;overflow:hidden'>35、){
alert(this.v);
}
var v=90; //属于window类的属性
test(); //<==>window.test();

结果：

③this不能在类的外部使用，否则调用者就变成window类了

案例：

function Apple(){

}

var a1=new Apple();
a1.name="a1";
</p><p style='height:0px;padding:0;overflow:hidden'>36、 a1.color="red";
window.alert("a1: "+a1.name+" "+a1.color);

var a2=new Apple();
window.alert("a2: "+a2.name+" "+a2.color);//undefined

结果：

使用this：

function Apple(){
this.name="a";
thi</p><p style='height:0px;padding:0;overflow:hidden'>37、s.color="red";
}

var a1=new Apple();
window.alert("a1: "+a1.name+" "+a1.color);

var a2=new Apple();
window.alert("a2: "+a2.name+" "+a2.color);

结果：

8、js类的定义

9、js成员函数定义
方式1（常用）：

fun</p><p style='height:0px;padding:0;overflow:hidden'>38、ction Person(name,age){
this.name=name;
this.age=age;
//定义方法，相称于一个属性
this.showName=function(){
document.write("我的名字是："+this.name);
}
}
var p=new Person("BBP",22);
p.showName();

方式2：
//定义Persion类

</p><p style='height:0px;padding:0;overflow:hidden'>39、function Person(name,age){
this.name=name;
this.age=age;
}
//定义showName方法
function showName(){
document.write("我的名字是："+this.name);
}

var p=new Person("BBP",22);
//将showName方法与Person类关联起来
p.showName=showName;
//这与p.showName=showName()有不同的含义，
//一个将函数的</p><p style='height:0px;padding:0;overflow:hidden'>40、地址给了p.showname，一个将返回值给了p.showname;
p.showName();

方式3：
function Person(name,age){
this.name=name;
this.age=age;
}

var p=new Person("BBP",22);

p.showName=function(){
document.write("我的名字是："+this.name);
}
这三种定义函数的方法有一个共同点：每个对象独占代码；这一点也是折线三个方法的缺陷——假如对象多，会导致内存的浪费，影响运营的效率。代码原理说明如下：

方式4：（原型法）
//这种方式将方法绑定在类上，所有对象共享同一代码区，而不是独立占有
function Person(name){
this.name=name;
}

Person.prototype.showName=function(){
document.write("我的名字是："+this.name);
}

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扩展方法
Array.prototype.find=function(val){
for(var i=0;igth;i++){
if(val==this[i]){
return i;
}
}
return -1;
}

var arr=new Array(3);
arr[0]="BBP";
arr[1]="BBF";
arr[2]="BBC";
var res=arr.find("BBP");
document.write(res+" ");

方式5：Object直接创建
关于Object类的说明
Object类是所有javascript类的基类，提供了一种创建自定义对象的简朴方式，不需要程序员再定义构造函数。
①重要属性：
constructor ——对象的构造函数
prototype ——获得类的prototype对象；static性质
②重要方法：
hasOwnProperty(property) ——是否属于本类定义的属性
isPrototypeOf(Object) ——是否指定类的prototype
propertyIsEnumerable(property)——是否可例举的属性
toString()——返回对象相应的字符串
valueOf()——返回对象相应的原始类型值

代码：
Object.prototype.showName=function(){
document.write(this.name);
}
var p=new Object();
p.name="BBP";
p.age=20;
p.showName();
相称于：
function Person(){

}
Person.prototype.showName=function(){
document.write(this.name);
}
var p=new Person();
p.name="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){
this.name=name;
this.age=age;
this.fun=fun;
}

var p1=new Persion("BBP", 20, counter);
var p2=new Persion("BBP", 20, null);//不传递函数
p1.fun(p1.name)
11、创建对象的又一种形式
假如一个对象比较简朴，可以直接创建（可以指定普通属性和函数属性），如：
//创建对象的有一种形式,常用于ext
var p={
name:'BBP',
eag:20,
fun1:function(){window.alert("hello")}
};
window.alert(p.constructor); // constructor是Object
window.alert(p.name);

调用对象的另一种方法：
var p={name:'BBP'};
function test(){
window.alert(this.name);
}
test.call(p);//<=>p.test();
这样调用，该函数的this就是对象实例

面向对象编程的进一步结识——for … in
var p={name:'BBP',showName:function(){
window.alert("hello.");
}
};

for(var key in p){
window.alertp[key]);//key 属性名
}
意义在于产看js对象的属性有哪些
for(var key in window){
document.write(key+": "+window[key]+"");
}
12、js的三大特性
1）抽象的概念

说明：抽象可以算js的特性，但是没有公认
2）封装

访问控制修饰符

案例：
function Person(name,age,sal){
this.name=name;//公开属性
var myage=age;//私有属性
var salary=