前端学习笔记（不断更新中）

HTML基础

1.img标签中alt：图片加载失败时的提示文字

2.a标签中的target：

• _blank：在新窗口中打开被链接文档
• _top：在窗口主体中打开被链接文档
• _self：在被点击时的同一框架中打开被链接文档（默认）
• _parent：在父框架中打开被链接文档

3.input标签中的require：将文本输入框设置为必填项

4.input标签的radio属性（单选按钮）

<!--方法1-->
<label> 
    <input type="radio" name="indoor-outdoor">indoor 
</label>
<label> 
    <input type="radio" name="indoor-outdoor">outdoor 
</label>
<!--方法2 （checked表示默认已选中）-->
<input name="sex" type="radio" checked="checked"/>男       
<input name="sex" type="radio" />女

5.label的for属性

<label for="email">Email:</label>
<input type="text" id="email" name="email">
# 自动将焦点移动到绑定的元素

6.单选框（更好的可访问性）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4tmHpvB-1588511903874)(./img/HTML01.png)]

<fieldset>
    <legend>What level ninja are you?</legend>
		<input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
    
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
    
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
</fieldset>

CSS基础

1.选择器（以color）

(1).text {
    color:red!important;  			<!-- !Important的优先级最高 --> 
}
(2)<div style="color:red"></div> 	<!-- 内联样式 -->
(3)#text {
	color:red;						<!-- id选择器 -->
}
(4).text {
	 color:red;						<!-- 类选择器（多类选择器个从上到下） -->
}

2.CSS 变量可以简化媒体查询的方式

3.盒子阴影

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);	 //卡片

4.字母大小写

text-transform:lowercase/uppercase/capitalize;   // 小写、大写、首大写

5.定位

position：fixed；   // 固定定位 
# fixed定位和absolute定位的最明显的区别是fixed定位元素不会随着屏幕滚动而移动

6.渐变色（应用视觉设计）

background: linear-gradient(35deg,#CCFFFF,#FFCCCC);  		     // 创建一个CSS线性渐变
background: repeating-linear-gradient(
                                        45deg,
                                        yellow 0px,
                                        yellow 40px,
										black 40px,
										black 80px);  			// 创建建条纹元素

7.更改元素的大小

transform:scale(2);  // 页面的段落元素放大两倍：

8.使用 CSS 创建一个图形月亮

{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0 0 blue; 
}

9.使用 CSS 创建一个心形

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg) ;
}
.heart:after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart:before {
  content:'';
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

10.动画

#anim {
  animation-name: colorful;
  animation-duration: 3s;         			// 时长
  animation-fill-mode: forwards;    		// 动画结束时元素的样式
  animation-iteration-count: 3/infinite;	// 循环次数3/无限循环
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  50% {
    background-color: yellow;
  }
   100% {
    background-color: red;  
  }
}

11.颜色

HSL：通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色

ES6

1.比较 var 和 let 关键字的作用域

• var :全局

• let：防止变量污染

• let：块作用域

let => const # 拥有let的全部优点，但是const声明的变量只能被赋值一次（数组形式可以改变）

2.防止对象改变（冻结属性）

Object.freeze(变量名)

3.map()、filter()、reduce()

(1) map():遍历，将原数组映射成一个新的数组

//例子1
function myfun_1(arr){
 var array = [];
  arr.map( item => {
   	//push() 方法可向数组的末尾添加一个或多个元素，并返回的是新的长度
    array.push(item*item);
  });
  console.log(array);
}
var arr3 = [1,2,3,4,5];
myfun_1(arr3);    		//[1,4,9,16,25]

//例子2
/*map和forEach等遍历方法不同，在forEach中return语句是没有任何效果的，而map则可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值。*/
let arr1 = [1,2,3];
let arr2 = arr1.map((value,key,arr) => {
    console.log(value)    // 1，2，3
    console.log(key)      // 0，1，2
    console.log(arr)      //[1,2,3] [1,2,3] [1,2,3]
    return value * value;
})
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 4, 9 ]

（2）filter():过滤后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素

//例子1 删掉偶数保留奇数
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var arr1 = arr.filter(function (x) {
    return x % 2 !== 0;
});
console.log(arr1); // [1, 5, 9, 15]

//例子2 回调函数
var arr = ['A', 'B', 'C'];
var arr1 = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

//例子3 删掉Array中的空字符串
var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var arr1 = arr.filter(function (x) {
    //trim()删除字符串的头尾空格
    return x && x.trim(); 
});
console.log(arr1); // ['A', 'B', 'C']

//例子4 去除数组中重复的元素
var arr1 = [],
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    arr1 = arr.filter(function (element, index, self) {
    //indexOf()返回数组元素第一次出现的索引（失败返回-1）
    return self.indexOf(element) === index;
});
console.log(arr1); // ['apple', 'strawberry', 'banana', 'pear', 'orange'];

（3）reduce()： 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

//例子1 计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}