前端基础知识整理

一、基础部分
1.Web标准的构成：主要包括结构（Strcture）、表现（Presentation）和行为（Behavior）。
结构：结构用于对网页元素进行整理和分类，html
表现：设置网页元素的版式、颜色、大小等外观样式，主要指css
行为：网页模型的定义以及交互的编写，js
2.vscode插件

chinese：中文插件
Auto Rename Tag：对两端tag进行操作
Open in browser：右键用浏览器打开
CSS Peek：追踪至样式
插件安装完后要重启软件
二、HTML
1.HTML标签的关系有包含关系和并列关系两种
2.文本格式化标签

倾斜	<em></em>或者<b></b>
删除	<del></del>或者<s></s>
下划线	<ins></ins>或<u></u>

3.图像标签

替换文本属性alt	图像显示不出来时显示替换文本
提示文本title	放到图片上提示的文字

4.超链接标签
属性herf的值为#时表明为空连接，属性为压缩包或者文件时，则会下载
锚点链接设置属性为**#id**的形式，可以快速定位到页面中的某个位置
5.注释
ctrl+/
&nbsp表示空格
6.表格

• 跨行合并：rowspan=“合并单元格个数”
• 跨列合并：colspan=“合并单元格个数”
  合并单元格时要注意删除多余单元格

7.列表
自定义列表标签<dl></dl>
其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
</dl>
8.表单
表单域：表单域内的所有元素都会打包发送给服务器
单选框必须保证name属性相同才可以保证实现多选一
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上，用来增加用户体验
语法
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心：标签的for属性应当与相关元素的id属性相同
三、CSS
1.多类选择器
可以用class=“类名1 类名2…”来表示多类
2.通配符选择器：用“*”来定义，表示选取页面中所有标签
3.font：18px/26px表示字体大小为18px，行高为26px
4.首行缩进两字符 text-indent：2em
5.



6.后代选择器：

ol li{
	color：pink
}#把ol里的子标签li选出来

7.子元素选择器
只选择亲儿子元素

元素1>元素2{样式声明}

8.并集选择器

元素1，元素2{样式声明}

表示选择元素1和元素2
并集选择器喜欢竖着写
9.focus伪类选择器

10.链接伪类选择器

11.元素分类

12.元素转换技巧

13.背景的一些属性


14.选择器的一些性质


15.边框和内边距会影响盒子的实际大小
所以量盒子大小的时候不要把边框量上去，包含了边框大小的盒子应该减去边框粗细大小；如果盒子已经有了宽度和高度，再指定内边距，会撑大盒子，要用盒子宽高减去内边距大小才能保证原来效果

16.盒子阴影
17.网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

18.如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以设置宽高

19.浮动的特性

20.清除浮动

21.CSS书写顺序

22.导航栏注意点

23.定位模式（重要）

24.杂七杂八

25.HTML5新增标签

26.CSS3新增















27.移动端布局













28.bootstrap框架

三.Javascript部分
1.数组的三种表达方式：

//创建空数组
var arr = new Array()
//第二种方式
var arr =  []
//创建一个不为空的数组
var arr = [1,'小明', 3]

2.函数的形参个数不同时的情况
①实参个数大于形参个数，则会取到形参个数
②实参个数小于形参个数，多余的形参定义为undefined,最终的结果就是NaN，形参的默认值是undefined

3.return返回的结果只有一个值，如果返回两个，则取最后一个，如果想返回多个值，可以利用数组

3.如果没有定义返回值，则默认为undefined

4.arguments的使用

5.函数的两种表达方式
①命名函数（利用函数关键字自定义函数）

function fn(){
}
fn();

②匿名函数（函数表达式）

var fun = function() {};
fun();

6.变量和函数预解析

console.log(num); //undefined
var num = 10;
//相当于执行了以下代码
var num;
console.log(num);
mun = 10;

fun();//报错
var fun = function(){
	console.log(22);
}
//相当于执行了以下代码
var fun;
fun();
fun = function(){
	console.log(22);

7.创建对象的三种方式：
①利用对象字面量创建对象：

var obj  = {
	uname: '张三疯',
	age: 18,
	sex: '男',
	sayHi: function() {
		console.log('hi~')
}

②利用new Object创建对象

var obj = new Object();
obj.name = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
	console.log('hi~');
}

③利用构造函数创建对象

function Star(uname, age ,sex){
	this.name = uname;
	this.age = age;
	this.sex = sex;
}
var ldh = new Star('刘德华', 18,'男');

8.对象的遍历

//for(变量 in 对象）{
}
for (var k in obj){
	console.ldh(k);//遍历输出得到属性名
	console.ldh(obj[k]);//遍历输出得到属性值
	//一般喜欢用k或者key
}

9.倒计时算法

function countDown(time){
	var nowTime = +new Date();//返回当前时间的毫秒数
	var inputTime = +new Date(time);//返回用户输入的总毫秒数
	var times = (inputTime - nowTime) / 1000;//times是剩余时间的总的秒数
	var d = parseInt(times / 60 / 60 / 24); //天
	d = d < 10 ? '0' + d : d;
	var h = parseInt(times / 60 / 60 % 24); //时
	h = h < 10 ? '0' + h : h;
	var m = parseInt(times / 60 % 60);//分
	m = m < 10 ? '0' + m : m;
	var s = parseInt(times % 60);//秒
	s = s < 10 ? '0' + s : s;
	return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown(2021-8-16 18:00:00'));
var date = new Date();
console.log(date);

10.检测是否为数组

11.添加或删除数组元素的方法
12.排序

13.数组去重

14.数组转换为字符串



15.字符串的不可变

16.查找字符在字符串中的位置

17.根据位置返回字符

18.判断一个字符串中出现次数最多的字符，并返回其统计次数



19.字符串的操作方法

20.replace和split


21.简单类型和复杂类型



22.获取某一元素下的子元素

23.H5新增的三种选择器

24.事件三要素

25.执行事件步骤

26.元素的自定义属性只能通过elements.getAttribute()来获取
H5规定以data开头的均为自定义属性，如data-index

27.结点操作
①父级结点

②子节点


③兄弟结点

④添加节点的两种方式

28.删除结点案例

29.节点复制

30.三种动态创建元素的区别

31.注册事件监听

同一个元素、同一个事件可以添加多个侦听器

32.删除监听事件

33.DOM事件流


34.target和this的区别

35.事件对象常见的属性和方法

阻止事件冒泡

36.事件委托


37.常用鼠标事件

38.常用键盘事件


39.窗口事件




40.定时器

41.同步和异步


42.JS执行机制
43.URL

44.offset

45.client


46.立即执行函数

47.

48.flexible.js源码分析

49.mouseeter鼠标事件


50.检测是否完成过渡

51.ClassList属性


52.本地存储


53.Echarts