2020-10-12课堂笔记

主知识点

1.CSS复习

1.css类型

1.头部样式表<style></style>

<style type="text/css">
  选择符{样式：值；样式：值}
</style>

2.外部样式 1.使用link连接外部样式

<link rel="styleSheet" href="XXX.css" type="text/css">

2.导入外面的样式表文件：

<style>
     @import url(外部样式表的文件名);
</style>

3.内联样式（行间样式）

<标签名1 style="样式1：属性;样式2：属性">
<标签名2 style="样式1：属性;样式2：属性">

2.三大选择器

• id选择器
  #id名{样式：值}
• 伪类选择器
  .class名{样式：值}
• 标签选择器
  <标签名>{样式：值}

3.css原则：就近原则

4.css三大特性

1.归类型（即组合性）使用逗号分隔

h1,p{
font-family:黑体
}

如上，h1且为p的字体为黑体
2.继承性

<p>这是一个段落
     <h1>我是h1标题</h1>
</p>

如上，如果给p设置了css样式，h1未设置，但是，h1会继承p,同样拥有p的样式
3.情景选择

ul li{
   color:red;
}

如上：ul标签内的li子标签设置成如上属性

5.css常见属性

1. background:背景颜色
2. color:字体颜色
3. font-family:改变字体
4. font-size:字体大小

6.关于定位

position:relative 相对定位
可以通过 left、top、right、bottom给相对定位的元素设置位置 定位元素：
根据 原先默认的位置 去定位

position:absolute 绝对定位 元素绝对定位后，脱离文档流，影响后面的元素。 宽度默认会被内容撑开

可以通过 left、top、right、bottom给绝对定位的元素设置位置

定位规则： 根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。 祖先元素什么定位都可以

position: fixed;

left/top/right/bottom: 长度单位；

根据屏幕进行定位

脱离文档流 （宽度默认变成内容撑开）

元素设置为固定定位或绝对定位之后，会变为块状元素

7.盒子模型

padding内边距
margin、border、padding元素内部内容与边框之间的距离

设置一个值,如margin：10px四条边框都使用这个值
设置二个值，如margin：10px 15px 上下为10 左右为15
设置四个值，则分别代表上右下左（以上为起点，顺时针）

8.样式不能正常显示的原因

1. 单词拼写错误
2. 引入样式表的路径错误
3. 样式表被覆盖
4. 浏览器不支持
5. 其他语法错误（标签未正确闭合，导致作用范围溢出）
6. 数组越界

2.javascript复习

1.Java与Javascript

注意：Java与JavaScript没有关系，蹭热度而已
java与javascript的不同点：
1.java是强语言类型，javascript是弱语言类型
2.java是编译型，javascript是解释型
3.java面向对象，JavaScript基于对象
4.代码格式不一样
5.嵌入方式不一样（一个是.java，一个是html）

2. javascript声明变量

使用var 变量名=值 如var a=55;
缺点：无作用域
let:定义一个变量
const:定义一个常量

特别说明：
1.=代表赋值
2.==判断值的内容是否相等
3.===判断值的内容与类型是否相等

3.声明函数

function 函数名（参数）{
      函数体
      return 返回值(表达式);
}

获取当前函数的参数个数：
var num=function_name.arguments.length;

4.11个内置对象

1. Array
2. Boolean
3. Date
4. Function
5. Math
6. Number
7. Object
8. RegExp
9. Error
10. String
11. Global

5. 宿主对象

1. 浏览器对象 Navigator
2. 屏幕对象 Screen
3. 窗口对象 Window
4. 位置对象 Location
5. 历史对象 History
6. 文档对象 Document

6.定义数组

注意：javascript数组默认为empty

1.定义一个空数组

var 数组名=new Array();

数组名[下标]=XXX;

2.定义时指定长度

var 数组名=new Array(n);//n是数组长度

3.定义时填充

var 数组名=new Arrary(元素1，元素2，元素3，.......)

4.常用的方法

var 数组名=["first","second","third"];

特别说明：
1.JavaScript数组不定长，可自动扩容
2.数组元素不要求类型一致

7.Global对象

特点：不同于其他的，global对象引用它的方法和属性，不适用Global.XXX而直接使用XXX
eval（）：把括号内的字符串当作标准语句来运行
isFinite():如果括号内的数字是有限个则返回true,否则返回false
toString():把对象转换成字符串

8.return false;

return false;//抑制默认事件（行为）

9.innerText和innerHTML的区别

1. innerText会把内部的文本内容，无论是否是标签，都视作文本
2. innerHtml会把文本中的标签，解释运行，然后展示带有功能的文本
3. 如果是纯文本的话，innerText和innerHtml没有区别

10.Dom对象和操作