海创软件组-20200712-学习过程中的记录

HTML5/CSS 部分

1.搜索引擎的搜索问题

搜索引擎搜索网站的时候，是根据网站中按标签的重要性来搜索的，例如你输入了一个词条并且搜索时，它会以这个词条现在title标签进行检索，然后再往下继续检索。如果说想要能够搜索到你自己网页中的页面内容，需要合理分布标签以及标签的内容。

2.图片的格式问题

经常使用的图片格式有三种：JPGE（JPG）/PNG/GIF
三者之间的区别是：
    JPGE（JPG）支持色彩多并且可压缩，但不支持透明
    GIF支持的色彩少较为模糊，但支持简单的透明，例如圆形，矩形这类的规则透明。
    PNG支持的色彩多，且支持复杂透明

3. 盒子模型中的margin垂直方向的问题

		.box1{
			background: red;
			height: 200px;
			width:200px;
			margin-bottom: 20px; 
		}
		.box2{
			background: green;
			height: 200px;
			width:200px;
			margin-top: 20px;
		}

在这里box1和box2为相邻元素，相邻元素垂直方向上的margin规则是这样的，如果说margin-bottom和margin-top都为20px，那么两者之间的间隔只是20px，并不会叠加成为40px，但是如果前者为30px，而后者为10px,那么两者之间的margin将会取30px，有大取大，但是不叠加。

4. 盒子模型的大小计算

    a) 盒子模型的实际宽度width+左右padding+左右border
    b) 盒子模型的实际高度width+上下padding+上下border

5. 盒子模型的区域划分

    a) border属性以内的都是可视区域
    b) width和height设定的区域称为内容区，标签和元素只能在内容区显示
    c) 如果设置width的大小为auto的时候，修改border和padding是不会影响可见区域的大小

6.高度塌陷的问题

高度塌陷指的是文档流中父元素本应被子元素撑开，但是由于子元素设置了浮动而导致父元素失去了高度，出现的现象，这种情况父元素的height为0px，解决这个问题的最基础方法就是固定一个高度，但是这样导致的问题就是设计不灵活。高度塌陷会导致原有的布局产生重大的变化，因此在编写中应尽量避免出现这样的问题，以下是它的解决方案：

高度塌陷：

通过Clear属性和after伪类来实现解决高度塌陷，我们知道clear属性的作用如下：
    i. Left/right/none/both 清除其他浮动元素对当前元素的影响
    ii. 清除浮动之后，元素会回到其他元素浮动之前的位置
    iii. 清除浮动的作用是让其他元素浮动的时候自己的位置不受影响

因此想要让一个可能产生高度塌陷的问题的标签添加以下的CSS就可以解决：

	box1:after{
			content: "";
			//添加一个空内容隔开相邻元素
			display: block;
			//转换成一个块元素
			clear: both;
			//清除两边的浮动
	}

7.position属性

a) Relative 相对定位
    i. 当开启定位的时候可以通过left/right/top/bottom来控制偏移量
    ii. 相对定位是相对于元素再文档流中原来的位置进行定位
    iii. 相对定位不会让元素脱离文档流
    iv. 相对定位会让元素提升一个层级，因此定位的元素会覆盖文档流的元素
b) Absolute 绝对定位
    i. 开启绝对定位会使元素脱离文档流
    ii. 如果不设置偏移量的话，位置是不会改变的
    iii. 绝对定位的元素是相对于他最近的开启了定位的祖先元素定位的
    iv. 如果没有祖先元素开启定位，则以浏览器的原点为基准点来偏移，原点在页面的左上角
    v. 一般情况开启了子元素的相对定位，父元素都会开启绝对定位
    vi. 绝对定位会改变元素的性质，使内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
c) Fixed 固定定位
    i. 它绝大部分的性质和绝对定位一样
    ii. 它不论什么时候都是相对原点偏移的
    iii. 并且它不会因为滚动条的移动改变它的位置，

Javascript 部分

1.“ == ” 和 “ === ”的区别，以及数据类型

1. == 指的是等同运算符，它只会检查两者之间的值是否相等
2. === 指的是全等运算符，它不仅会检查两者之间的值是否相等，还会检查两者之间的数据类型
3. null,undefined,NaN三者之间的数据类型的区别：

alert(typeof null);//Object
alert(typeof undefined);//undefined
alert(typeof NaN);//number

值得一提的是，当var定义一个变量的时候，若不对变量进行赋值，那么那个变量的值是undefined

var a;
alert(a);

2.函数

1.返回值，就是函数执行的结果。
	- 使用return 来设置函数的返回值。
	- 语法：return 值;
		- 该值就会成为函数的返回值，可以通过一个变量来接收返回值
	- return后边的代码都不会执行，一旦执行到return语句时，函数将会立刻退出。
	- return后可以跟任意类型的值，可以是基本数据类型，也可以是一个对象。
	- 如果return后不跟值，或者是不写return则函数默认返回undefined。
	- break、continue和return
		- break
			- 退出循环
		- continue
			- 跳过当次循环
		- return
			- 退出函数
			//因此如果写for循环的时候，return后面不要有语句，否则是无法执行的无效代码块
2.参数，函数的实参也可以是任意的数据类型。

3.方法（method）
	- 可以将一个函数设置为一个对象的属性，
		当一个对象的属性是一个函数时，
			我们称这个函数是该对象的方法。
	- 对象.方法名();
	- 函数名();	
4.this
	- 我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。
		使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。
	- this的不同的情况：
		1.以函数的形式调用时，this是window
		2.以方法的形式调用时，this就是调用方法的对象
		3.以构造函数的形式调用时，this就是新创建的对象
5.函数作用域
	-在JavaScript中函数作用域有两中，分别是全局作用域和局部作用域
		1.全局作用域
			-直接在script中编写的都在全局作用域中
			-全局作用域在打开时创建，页面关闭时候销毁
			-全局作用域中有一个全局对象window，由浏览器提供，指代浏览器的整个窗口页面
			-在全局作用域创建的变量和函数都会以window的属性或方法保存
			-尽量不要在全局作用域中定义变量，会污染全局作用域的变量命名池
		2.函数作用域（局部作用域）
			-函数作用域时函数执行时创建的作用域
			-执行时创建，结束时销毁
			-函数作用域的变量不能被全局访问
			-函数作用域使用变量时会由内向外寻找，若本作用域无，则向上一层作用域查询，会一直查询直到得到变量。
6.函数的执行
	-script中的每个函数的执行其实都是以方法来执行的，因为他们都隶属于window的对象下
	-window.test()此格式和test()作用是一致的，都是执行
7.原型（prototype）
	- 创建一个函数以后，解析器都会默认在函数中添加一个数prototype
	prototype属性指向的是一个对象，这个对象我们称为原型对象。
	- 当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。
	这个隐含的属性可以通过对象.__proto__来访问。
	- 原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。
	我们可以将对象中共有的属性和方法统一添加到原型对象中，
		这样我们只需要添加一次，就可以使所有的对象都可以使用。
	- 当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找，
		如果在自身中找到了，则直接使用。
		如果没有找到，则去原型对象中寻找，如果找到了则使用，
		如果没有找到，则去原型的原型中寻找，依此类推。直到找到Object的原型为止，Object的原型的原型为null，
	如果依然没有找到则返回undefined
	- hasOwnProperty()
		- 这个方法可以用来检查对象自身中是否含有某个属性
		- 语法：对象.hasOwnProperty("属性名")

3.Dom对象

- Document Object Model
- 文档对象模型，通过DOM可以来任意来修改网页中各个内容
- 文档
	- 文档指的是网页，一个网页就是一个文档
- 对象
	- 对象指将网页中的每一个节点都转换为对象
		转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
- 模型
	- 模型用来表示节点和节点之间的关系，方便操作页面
- 节点（Node）
	- 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
	- 虽然都是节点，但是节点的类型却是不同的
	- 常用的节点
		- 文档节点 （Document），代表整个网页
		- 元素节点（Element），代表网页中的标签
		- 属性节点（Attribute），代表标签中的属性
		- 文本节点（Text），代表网页中的文本内容
		
- DOM操作
	- DOM查询
	- 在网页中浏览器已经为我们提供了document对象，
		它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
	- document查询方法：
		- 根据元素的id属性查询一个元素节点对象：
			- document.getElementById("id属性值");
		- 根据元素的name属性值查询一组元素节点对象:
			- document.getElementsByName("name属性值");
		- 根据标签名来查询一组元素节点对象：
			- document.getElementsByTagName("标签名");
			
	- 元素的属性：
		- 读取元素的属性：
			语法：元素.属性名
			例子：ele.name  
				  ele.id  
				  ele.value 
				  ele.className
				  
		- 修改元素的属性：
			语法：元素.属性名 = 属性值
			
		- innerHTML
			- 使用该属性可以获取或设置元素内部的HTML代码
			
			
- 事件（Event）
	- 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
	- 我们可以为事件来绑定回调函数来响应事件。
	- 绑定事件的方式：
		1.可以在标签的事件属性中设置相应的JS代码
			例子：
				按钮
		2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件