惊！！前端卡拉米居然被“ele”玩弄

大家好~前端卡拉米准备水帖子了！！！

一、基础部分 1.Web标准的构成：主要包括结构（Strcture）、表现（Presentation）和行为（Behavior）。 结构：结构用于对网页元素进行整理和分类，html 表现：设置网页元素的版式、颜色、大小等外观样式，主要指css 行为：网页模型的定义以及交互的编写，js 2.vscode插件 红框为插件查找 chinese：中文插件 Auto Rename Tag：对两端tag进行操作 Open in browser：右键用浏览器打开 CSS Peek：追踪至样式 插件安装完后要重启软件 二、HTML 1.HTML标签的关系有包含关系和并列关系两种 2.文本格式化标签 倾斜 或者 删除 或者 下划线 或

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

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

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

7.列表 自定义列表标签

其基本语法如下：

名词1

名词1解释1

8.表单 表单域：表单域内的所有元素都会打包发送给服务器 单选框必须保证name属性相同才可以保证实现多选一 标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上，用来增加用户体验 语法 男 核心：标签的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选出来

1
2
3

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

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

1

8.并集选择器

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

1

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

10.链接伪类选择器

11.元素分类

12.元素转换技巧

13.背景的一些属性在这里插入图片描述

14.选择器的一些性质

15.边框和内边距会影响盒子的实际大小

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

16.盒子阴影在这里插入图片描述 17.网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

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

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

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

1
2
3
4
5
6

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

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

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

4.arguments的使用 在这里插入图片描述 5.函数的两种表达方式 ①命名函数（利用函数关键字自定义函数）

function fn(){ } fn();

1
2
3

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

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

1
2

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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述 7.创建对象的三种方式： ①利用对象字面量创建对象：

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

1
2
3
4
5
6
7
8

在这里插入图片描述

②利用new Object创建对象

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

1
2
3
4
5
6
7

③利用构造函数创建对象 在这里插入图片描述 在这里插入图片描述

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

1
2
3
4
5
6

8.对象的遍历

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

1
2
3
4
5
6
7

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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17