前端的学习与实战（一）
前端学习
基础知识
div中直接使用submit并且 完成输入后按回收并不会有任何效果而form却会在按回车之后刷新浏览器。其实底层就是他会自动找到当前input所对应的form，然后再找到他底下的 submit 自动实施了一次。
placeholder在输入框中显示但是不占用格子 --提示
maxlength 限制输入框的最大输入长度
button一般作为按钮，不是单闭合所以里面可以填写很多东西。默认就是提交按钮,如果给他type = "button"那么就是一个不同按钮，可以与后面的JS 相结合。如果里面使用的type="reset"那么就是把表单的内容全部重置。
multiple表示可以对选项进行多选，但是要求值和名相同————布尔属性（两种状态） ，可以只写属性名
span表示的是一个选中按钮，其中可以定义 name 使他们在一个组里面就会互斥
checked 表示默认选中
label 标记用来和其他元素是关联在一起的，其中有个元素为 for 填写对应的id就可以关联起来了。也可以直接使用 label 里面的所有元素都是关联在一起的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="IE=edge"><title>Document</title><link ref =stylesheet href="./css/index.css" />
</head>
<body><form class="container"><h1> User Login</h1><div class="form-item"><input type="text" placeholder="请输入11位手机号" maxlength="11" /></div><div class="form-item"><input type="text" placeholder="请填写验证码"/><button type="button" class="form-button" >发送验证码</button></div><div class="form-item"><input type="password" placeholder="请输入密码" /></div><div class="form-item"><input type="password" placeholder="请再次确认密码" /></div><div class="form-item"><select multiple><option >爱好1</option><option selected="select" >爱好2</option><option >爱好3</option><option >爱好4</option><option >爱好5</option><option >爱好6</option><option >爱好7</option><option >爱好8</option><option >爱好9</option><option >爱好10</option></select></div><div class="form-item"><div class="title" >性别</div> <label><input type="radio" name="sex" checked /><span>男</span></label><label><input type="radio" name="sex" checked /><span>女</span></label></div><div class="form-item"><textare placeholder="个人简介"></textarea></div><div class="form-item"><label><input type="checkbox"/><span>同意申请</span></label></div><div class="form-item"><button>立即注册</button><button type="reset">重置表单</button></div></form>
</body>
</html>
精灵图
即通过一个大图将里面的 特殊的图片抠出来。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.item{width: 120px;height: 110px;background: url(./img/sprite.webp) no-repeat -18px -30px;}</style>
</head>
<body><div class="item"></div>
</body>
</html>
直接用CSS 就可以实现
绝对定位
- 元素出现在一个毫不相关的位置
- 元素是否存在，不影响其他元素排列
- 单个元素在某个区域内水平垂直居中
postion:absolute可以随意的调整位置，参考的是有定位的父元素——一般设置为 relative（就是定义的有postion属性的 ，如果一直没有找到的就是使用html。）
postion:fixed参考的是视口 — viewpoint ，就是浏览器的大小，固定不变的。
box-sizing: border-box表示的就是设置的大小就是确定的 大小不会随着边距而变大
朦层：即登录界面实现的时候其实就相当于使用了一个半透明的div去遮挡住。
其中定位元素之间也有覆盖关系默认是后面的代码在后面的会覆盖前面的，可以使用z-index去调整，值越大越靠近用户，只对定位元素有效。
text-align: right;能实现内部的元素靠右的属性
所有浮动、绝对定位的内部行级元素都会自动变成display:block块级元素
属性值的计算过程
一个HTML元素都有很多CSS属性，这些属性必须全部有值（默认属性）。其中每个CSS属性从无属性值到每个属性都有值要经过：1.确定声明值。 2.层叠冲突。 3.使用继承。 4.使用默认值。 所以在Computed 层会有计算过程——所以最终显示由计算结果。
其中注意的是元素使用%、em、rem最后都会化作为px的绝对定位
<h1 class = "red">Lorem</h1>//作者样式
.red{ color:red; font-size:40px}
h1{font-size:26px}
div h1.red{ font-size:3em; font-size:30px}//浏览器默认样式
h1{display:block; font-size:2em ; font-weight:30px}
1.确定声明值：就是把样式里面没有冲突的声明选出来，直接作为css的属性值——就是一个取名。
2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
（层叠规则：1.作者样式表覆盖浏览器默认样式表——比较重要性。
2.利用元素选择器的权重比较——比较特殊性 {内联属性第一<h1 id="title" class="highlight" style="color: blue;">，再比ID数量（第二位），再比类/属性/伪类数量（第三位），再比元素/伪元素数量（第四位），不进位：10个类也比不过1个ID}
3.比较源次序——后面的代码淘汰前面的。）
3.使用继承：对仍然没有值的属性，若可以继承的，可以继承父元素的值。
4.使用默认值：对仍然没有值的属性，使用默认值——针对不能继承的。
伪类选择器
:link-表示选中未访问过的超链接
:visited-选中已访问过的超链接
:hover-选中鼠标移入的元素
:active-选中鼠标按下的元素
:focus-选中聚焦的表单元素
:disabled-选中被禁用的表单元素
:frist-child-表示必须是第一个子元素才会
:last-child-表示必须是最后一个子元素才会
:nth-child(an+b)-选中该第[an+b]个子元素，a、b是常量，n的值会从0开始依次递增。其中子元素从1开始。
:first-of-type-选中第一个子元素类
其中对于用户体验感来说应该遵顼
link->visited->hover->active鼠标移入和鼠标点击某个按钮的感觉应该不一样，否则就会根据上一章节的因为元素冲突会后面覆盖前面的。
contenteditable属性
该属性为一个布尔属性，可以设置到任何元素上面，它可以让元素变为可编辑的状态。在实际开发中可以用于制作富文本框（里面是个div)可以添加任何的东西
<div contenteditable> </div>
但是需要导入https://at.alicdn.com/t/font_2960521_rqz39d8moo.css的网址，其中习惯使用i元素因为为icon行级元素，这不是一个图片是一个文字，所以可以更改颜色和大小 <i class="i-weixin iconfont"></i>
截图工具有：windows snipaste,Mac ishot。
line-height行高的100%相当于字体的应该在多大的范围内。
overflow: hidden:如果文本内容的宽度超过了其父容器的宽度，超出部分将被“裁剪”并不可见
white-space: nowrap;:文本将强制在一行内显示，即使内容很长也不会自动折行到下一行。
text-overflow: ellipsis:当文本溢出时，显示省略号（…）表示被截断,必须配合 overflow: hidden; 和 white-space: nowrap; 使用，否则无效。
每个元素最多只能有一个 ::after 伪元素。
如果你在 CSS 中多次定义 ::after，后面的会覆盖前面的，不会叠加。
所以，不能通过多次使用 ::after 来添加多个“之后”的内容。
font-weight:normal表示字体加粗
两个相邻的行盒子的垂直距离修改使用vertical-align调整垂直距离
JS学习
声明式语言HTML CSS SQL
命令式语言C C++ C# PHP Python Java JS -本质就是处理数据
JS提供了三种方式表达一个数据：
1.变量
2.字面量——直接用一个值表达的如1 NULL
3.表达式——1+3返回值就是一个数据，返回类型
标识符—程序中所有可以自行命名的地方
变量名、函数名、参数名
合法的有：数子、字母、下划线、$符号，但是不得以数字开头，不能和关键字冲突，建议使用驼峰命名（从第二个开始大写）。
可以使用$、_开头的
一般换行使用的是\r\n 来源于远古习惯
数据类型
原始类型：number 、string 、boolean、null 、undefined
undefined是属于一个不存在的对象。
引用类型：对象（包含普通对象、数组、函数）——复合型
对象的所有属性都是字符串，因此必须使用单/双引号，但是为了书写方便，当对象的属性是纯数字或符合标识符规范时，可省略引号
使用.的时候表示直接读取里面字符串，而使用[]的时候会转化里面的标识符再取读取。读属性的时候obj['name'],读到里面的name属性。在对象里面取对象的值obj['name']['frist name']就可以取name里面的值了 。其中可以直接使用字符串类型的去写入里面。
var dengBro = {name: '丧彪',sex: '男',height: 185,wifes: [{ name: '翠花', from: '东北' },{ name: '丧彪', from: "铜锣湾" },],
};console.log(dengBro)array[111, 123, 1245]
其实本质上就是array['0']=array[0]的含义，所以我们可以这样array.abe = 1234
console.log(array['abc'])也是对的
数组其实就是对象的含义只是默认了从0开始的一个对象而已。
var teachers = [
{
name:"邓哥",
age:81,
hobit:["香菜","秋葵","遛鸟"]
},
{
name:"邓哥",
age:81,
hobit:["香菜","秋葵","遛鸟"]
},
{
name:"邓哥",
age:81,
hobit:["香菜","秋葵","遛鸟"]
},
]
数据运算
类型的隐式转化 ——临时的。并不会对原数据造成影响
var a ='3'
console.log(a*3)
输出6但并不会对原本的a进行改变
所以当对于不确定的可以使用a*1把a强制转化成为一个数字，也可以使用+a表示转化为一个数子，这是把表达式转化，并不是a转化了。
如果两端存在字符串的话两边执行的就是拼接，而不再是加法了。
1+'2'变成12的字符串了，可以使用n+''这样n如果是个数字就可以转化成为字符串了。
a*=2+3就是a=a*(2+3)
赋值运算也是一个表达式 a=b=7其实执行的是先把7赋值给b,然后再b=7的结果其实就是7再给a
===表示等号，!==表示不等于 这个结果始终返回boolean
!这是取反符号一定返回boolean，布尔判定——即为false , null , undefined , 0 ,NaN ,''都表示false其他为true。 可以使用!!符号用来转化为布尔。
&&运算返回的值是最后判定的符号，即1&&2返回的就是2，而0&&1返回的就只有0因为0就是最后判断的
三目运算符号?，n = exp ? 1:2; 如果是真就选1 否则是2
function sum(a, b){a = +a|| 0 ;b = +b || 0;return a+b
}console.log()function a(year){var result = year%4===0 && year%100!==0 || year%400 == 0 result = result ? '是':'否'; }function b(height,weight){height = height/100var bMI = weight/(height**height);result = bMI>= 20 && bMI<=25? '正常': bMI<20?'偏廋':'偏胖'; ;
}
使用for in 循环，其实就是拿出里面的属性名称，这个key所以我们可以使用obj[key]的方式拿到属性值
var obj ={a:1 ,name :['a','b','v'] ,b: 2 ,c:'abc',
};for (var key in obj){console.log(key)
}
typeof可以用来判断属性的类型typeof obj[key]==='string'判断是否为字符串类型
其中我们一般遵循immutable的原理即不动原来的数据。
delete属性表示直接删除对象的某些属性即：delete s.id 这样id这个属性就不存在原来数组里面了。
数据的作用域
这个里面var c = function(){}c是一种变量而不是函数。
JS只有两种作用域：
1.函数作用域
2.全局作用域
里面可以访问外面，外面不能访问里面 。如果存在相同的就是从内到外查找
如果内部使用外部数据就会产生闭包
内部作用域能访问外部，取决于函数定义的位置和调用无关
var a =1function m (){a++}//每次调用都会使得全局的a++ function m2(){
var a = 3 ;m()console.log(a)//输出的是3
}m2()console.log(a)// 输出的是2
在一个作用域中所有的函数定义和变量声明都会提前到顶部。
console.log(a,e)
var a =1
function e(){}
结果是undefined和函数e，就等价于
var a
function m(){}
console.log(a,m)
a = 1
其中注意的是b = function(){}就不是函数声明了，而是函数表达式就不会提到顶部 那么只能按照顺序调用了b()
全局对象
浏览器的全局对象是window
node的全局对象是global
特点：全局对象的属性可以直接访问 ——log
给未声明的对象赋值，其实就是给全局对象赋值——永远不要这么干
所有的全局变量、全局函数都会附加给全局对象，这样就可以使一个页面引用两个js达到互通的作用——全局污染
如果不希望污染全局可以使用局部作用域使他不污染，但是任然有函数污染。可以使用函数表达式立即执行函数(IIFE)/匿名函数。强行改变作用域
(function (){
var a =1
var b = 2
})();
把所有代码都放入立即执行函数中就可以了,但是我们希望某些元素暴露给全局对象
var a = (function (){
var a =1
var b = 2
return a+b
})();
可以使用对象去添加所有需要暴露的属性
构造函数
var person = {fristName: '邓',lastName: '虚名',name: person.fristName + person.lastName
}
这个运行会报错，因为要先构建右边的但没有声明person这个名称所以找不到
var person = {fristName: '邓',lastName: '虚名',//方法getName: function(){return person.fristName + person.lastName
}
}
console.log(person.getName())
这样就可以实现了，因为方法他只有在调用的时候才需要执行，或者之后再给他添加一个属性
person.fullName = person.firstName+person.lastName这样就可以了，但是需要注意的是如果存在很多个一个一个写就会很麻烦。
function createPerson(fristName,lastName){obj = {fristName :fristName,lastName:lastName,fullName : fristName+lastName};obj.sayHi= function(){console.log("你好"+obj.fullName)}return obj;
}var person = createPerson("等","虚名");console.log(person)
通过方法让他能够调用自己的属性和方法
上面的这些有更加简单的方法就是使用构造函数——使用大驼峰命名
function Person(fristName,lastName){this.fristName =fristName;this.lastName=lastName;this.fullName = fristName+lastNamethis.sayHi= function(){console.log("你好"+obj.fullName)}
}var person1 = new Person("zhou","gargamel")要是用new来调用
JS的所有对象都是通过构造函数产生的
var obj = {
a:1 ,
b:2, };
本质上就是语法糖var obj =new Object()创建一个空的对象然后添加值 obj.a =1 ; obj .b=2;
数组本质上也是一样的 var arr = new Array(1,2,3);
函数也是一样的var sum = new Function('a','b','return a+b')；
总的来说调用函数的次数远远大于声明函数的次数。