JavaWeb

JavaWeb

---

B站的教程

标签div和span的区别

span是不霸屏（满行）的行方块！

div是一个霸屏（满行）的行方块！

---

CSS学习的两个内容：1、选择器；2、属性；

CSS的引入方式：1、行内样式；2、内嵌样式；3、外联样式表；

选择器：1、id选择器；2、class选择器；3、元素选择器；4、后代选择器；5、伪元素选择器；

id名称有唯一性要求，class不需要（使用更多，尽量使用）；

伪元素：

a:link{color:blue}
a:visited{color:blue}
a:hover{color:red}
a:active{color:green}

CSS的转换属性，display；浮动属性、盒子模型。

盒子：

div{
width: 300px;
height:200px;
border: 2px red solid;
/*增加内边距，上边距*/
padding-top: 20px;
/*增加内边距，左边距*/
padding-left: 10px;

/*四个边距一致*/

padding: 20px;

/*上下20，左右10*/

padding: 20px 10px;

/*上20，左右10，下5*/

padding: 20px 10px 5px;

/*顺时针开始*/

padding: 20px 15px 10px 5px;

/*增加外边距，上边距*/

margin-top: 20px;
/*增加外边距，左边距*/
margin-left: 20px;
}

---

JavaScript

历史：网景liveScript与微软jScript之争；欧洲计算机制造商会（ECMA）ECMAScript；网景参考Sun的Java，将liveScript改为JavaScript。

JavaScript语言的组成：ECMAScript语法标准（版本6）、BOM对象（浏览器对象模型）、DOM对象（文档对象模型）。

JavaScript关键内容：数据类型、运算符、流程控制、事件、BOM对象、DOM对象、内置对象

数据类型

弱类型语言。

var i = 1;
console.log(typeof i);

var bool = true;
console.log(typeof bool);

var str = "true";
console.log(typeof str);

var obj = new Object();
console.log(typeof obj);

var n;
console.log(typeof n);

var arr = null;
console.log(typeof arr);

在Chrome浏览器的开发者工具，点击Console就可以看到一下类型：

number
boolean
string
object
undefined
object

---

var a = 5;
var b = "2";

console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);

答案是：

52
3
10
2.5

---

函数

/**
*定义函数 两个整数的和
*js是弱类型语言，函数的参数列表直接写变量名
*不需要写var
*/
function getSum(a,b) {
return a+b;
}

//调用函数
var sum = getSum(1,5);
console.log(sum);

匿名函数

---

事件

键盘事件：

onkeydown：对应键盘上所有键；

onkeypress：对应键盘上字符键；

onkeyup：按下放手才响应；

其它事件：onblur、onfocus、onchange

---