一、基础部分
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+/
 表示空格
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