前端知识点汇总
内容来源 - github🐝🐝🐝
记录要点即可。。
HTML
基础知识点
Web
Web（World Wide Web）即全球广域网，也称为万维网。W3C
World Wide Web Consortium，
万维网联盟组织，用来制定web标准的机构（组织）。Web标准包括三个方面
- HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。
- CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。
- JS：JavaScript。从交互的角度描述页面的行为。
常见的浏览器
浏览器是网页运行的平台，
常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。浏览器分成两部分：
- 1、渲染引擎（即：浏览器内核）
- 2、JS 引擎
- 渲染引擎是浏览器兼容性问题出现的根本原因。
常见浏览器的内核
浏览器 内核 chrome Blink 欧鹏 Blink 360安全浏览器 Blink 360极速浏览器 Blink Safari Webkit Firefox 火狐 Gecko IE Trident 移动端浏览器内核
移动端浏览器 内核 Android webkit iOS webkit 黑莓 webkit Windows Phone trident 常见浏览器JS引擎
浏览器 JS 引擎 chrome / 欧鹏 V8 Safari Nitro Firefox 火狐 SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-） Opera Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-） IE Trident JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），
然后由计算机去执行。
所以 JavaScript 语言归为脚本语言，会逐行解释执行。浏览器工作原理
1113-1 - 记住图形位置。。
- User Interface
- Browser engine
- Rendering enging
- Networking
- JavaScript Interpreter
- UI Backend
- Data Persistence - 数据存储 - cookie、sessionStorage。。
HTML基础知识
- html骨架
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签，我们成为根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> |
文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
文档声明头
任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……>开头的语句。
这一行，就是文档声明头，即 DocType Declaration，简称DTD。head标签
- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
- 答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
- utf-8 \ description \ title \ viewport \ ico
1
2
3
4
5
6
7
8
9<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
- meta标签
meta表示“元”。“元”配置，就是表示基本的配置项目。
- （1）字符集 charset：
- （2）视口 viewport：
- （3）定义“关键词”：
- （4）定义“页面描述”：
- HTML基本语法特性
- （1）HTML对换行不敏感，对tab不敏感
- （2）空白折叠现象
- （3）标签要严格封闭
- 常用标签 - 语义
<h1>- 标题 - 语义<p>-
<hr /> <br /><div><span>
- 特殊字符 - 转义字符
- 今天看到 - 可以防止攻击XSS。链接
：空格 （non-breaking spacing，不断打空格）<：小于号（less than）-
>：大于号（greater than） &：符号&"：双引号'：单引号©：版权©™：商标™-
绐：文字绐。其实，#32464是汉字绐的unicode编码。
- 超链接属性
href：目标URLtitle：悬停文本。name：主要用于设置一个锚点的名称。target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开。_parent：在父窗口中显示_top：在顶级窗口中显示
- HTML5新增内容
H5经典网页布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer>
</footer>H5新增语义标签
<section>表示区块<article>表示文章。如文章、评论、帖子、博客<header>表示页眉<footer>表示页脚<nav>表示导航<aside>表示侧边栏。如文章的侧栏<figure>表示媒介内容分组。<mark>表示标记 (用得少)<progress>表示进度 (用得少)<time>表示日期
- H5新增表单类型
email只能输入email格式。自动带有验证功能。tel手机号码。url只能输入url格式。number只能输入数字。search搜索框range滑动条color拾色器time时间date日期datetime时间日期month月份week星期
- 表单元素
- 1、
<datalist>数据列表： - 2、
<keygen>元素： - 3、
<meter>元素：度量器
- 表单属性
placeholder占位符（提示文字）autofocus自动获取焦点multiple文件上传多选或多个邮箱地址autocomplete自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)form指定表单项属于哪个form，处理复杂表单时会需要novalidate关闭默认的验证功能（只能加给form）required表示必填项pattern自定义正则，验证表单。例如
- 表单事件
oninput()：用户输入内容时触发，可用于输入字数统计。oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
- DOM操作
- 获取元素
- document.querySelector(“selector”) 通过CSS选择器获取符合条件的第一个元素。
- document.querySelectorAll(“selector”) 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
- 类名操作
- Node.classList.add(“class”) 添加class
- Node.classList.remove(“class”) 移除class
- Node.classList.toggle(“class”) 切换class，有则移除，无则添加
- Node.classList.contains(“class”) 检测是否存在class
- 自定义属性
- H5可以直接在标签里添加自定义属性，但必须以
data-开头。 - HTML data-* 属性
- 拖拽
- 设置了
draggable="true"属性的元素。 - 拖拽元素的事件监听 - 4个
- 拖拽目标元素的事件监听 - 4个
- 地理位置
- Web存储
- 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
window.sessionStorage会话存储：- 关闭时销毁
- 约5M
window.localStorage本地存储：- 永久生效 - 可自行删除
- 约20M
- Web存储API
- 存储 - setItem(key, value);
- 获取 - getItem(key);
- 删除 - removeItem(key);
- 清空 - clear();
- 根据索引获取 - key(n);
- 应用缓存
。。。未解。。
- 语义化
- 开发者容易理解，便于维护。
- 机器（搜索引擎、读屏软件等）容易理解结构
- 有助于 SEO
CSS基础
- 单位
- 绝对单位
in：英寸Inches (1 英寸 = 2.54 厘米)cm：厘米Centimetersmm：毫米Millimeterspt：点Points，或者叫英镑 (1点 = 1/72英寸)pc：皮卡Picas (1 皮卡 = 12 点)- 相对单位
px：像素 - 思考电脑尺寸不变，可以显示不同的分辨率em：印刷单位相当于12个点%：百分比，相对周围的文字的大小
- 常见文本属性
letter-spacing: 0.5cm ;单个字母之间的间距word-spacing: 1cm;单词之间的间距text-decoration: none;字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线text-transform: lowercase;单词字体大小写。uppercase大写、lowercase小写color:red;字体颜色text-align: center;在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justifytext-transform: lowercase;单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）
- 常见背景属性
background-color:#ff99ff;设置元素的背景颜色。background-image:url(images/2.gif);将图像设置为背景。background-repeat: no-repeat;设置背景图片是否重复及如何重复，默认平铺满。（重要）no-repeat不要平铺；repeat-x横向平铺；repeat-y纵向平铺。
background-position:center top;设置背景图片在当前容器中的位置。background-attachment:scroll;设置背景图片是否跟着滚动条一起移动。background，它的作用是：将上面的多个属性写在一个声明中。- CSS3
- background-origin
- background-clip 背景裁切
- background-size 调整尺寸
- 超链接的四种状态
- a标签有4种伪类（即对应四种状态），要求背诵。如下：
:link“链接”：超链接点击之前:visited“访问过的”：链接被访问过之后:hover“悬停”：鼠标放到标签上的时候:active“激活”： 鼠标点击标签，但是不松手时。
- CSS特性
- CSS继承性 - 文本
- CSS层叠性 - 就近原则
- ID > class > 标签
- 都是类 - 行级样式 > 内嵌样式表 > 外部样式表
- 外部样式表的ID选择器 > 内嵌样式表的标签选择器
- !important提升的是一个属性，而不是一个选择器
- !important无法提升继承的权重，该是0还是0
- !important不影响就近原则
- 盒子模型
- 标准盒子模型 - content
- IE盒子模型 - border + padding + content
- 标准文档流
- （1）空白折叠现象：
- （2）高矮不齐，底边对齐： - 高度不统一 - 底边
- （3）自动换行，一行写不满，换行写。
- 行内/块级
- 行内元素
- 与其他行内元素并排，不能设置宽、高，默认宽度 - 文字的宽度
- 块级元素
- 霸占一行，不与任何元素并列，可以设置宽高，不设置，默认，父亲100%
- 脱离标准流
- （1）浮动
- （2）绝对定位
- （3）固定定位
- 渐进增强/优雅降级
- 开发方式不同 - 先/后
- 目的不同 - 大量用户 - 内容/体验
- 渐进增强 VS 优雅降级 | 简书
- CSS3选择器
- div 标签选择器
- .box 类名选择器
- #box id选择器
- div p 后代选择器
- div.box 交集选择器
- div,p,span 并集选择器
- div>p 子代选择器
- : 通配符
- div+p: 选中div后面相邻的第一个p
- div~p: 选中的div后面所有的p
- 属性选择器 - 好多。。。
- 伪类选择器 -
E:first-child - 伪元素选择器 - ::before
- 处理兼容性问题：私有前缀
1
2
3
4-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：IE
-o-：欧朋1
2
3
4
5background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);
- 动画🌱
- 过渡：transition
transition-property: all;如果希望所有的属性都发生过渡，就使用all。transition-duration: 1s;过渡的持续时间。transition-timing-function: linear;运动曲线。属性值可以是：linear线性ease减速ease-in加速ease-out减速ease-in-out先加速后减速
transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。
- 2D 转换 transform
- 可以实现元素的位移、旋转、变形、缩放
- 1、缩放：
scale - 2、位移：
translate - 3、旋转：
rotate- 正值 顺时针；负值：逆时针。
- 动画：animation
- （1）通过@keyframes定义动画；
- （2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
- （3）在指定元素里，通过
animation属性调用动画。1
2
3
4
5
6
7
8定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
- flex布局
- 缺点 - 不支持低版本的IE浏览器
- 主轴和侧轴 - 默认从左到右
- flex-wrap - 子元素溢出换行
- justify-content - 子元素在主轴排列方式
-flex-start从主轴的起点对齐（默认值）flex-end从主轴的终点对齐center居中对齐space-around在父盒子里平分space-between两端对齐 平分
- align-items - 子元素在侧轴上的对齐方式
flex-start从侧轴开始的方向对齐flex-end从侧轴结束的方向对齐baseline基线 默认同flex-startcenter中间对齐stretch拉伸
- Flex 布局教程：语法篇
- Flex 布局教程：实例篇
- 常见布局方式
- table
- float + margin - 兼容低版本IE
- inline-block
- flex - 唯一缺点 - 兼容性
- 响应式布局 - 移动端
- float的影响
- 对自身的影响
- 形成BFC
- 位置尽量靠上
- 位置尽量靠左/右
- 对兄弟元素的影响
- 不影响其他块级元素的位置
- 影响其他块级元素的内部文本
- 对父级元素的影响
- 从父级的布局中消失 - 脱离文档流
- 造成父级元素的高度塌陷
- 字体
- 多字体fallback机制 - 如果当前字体不存在，往后找
- font-weight - 有的字体只支持400，700
- 免费可商用字体
- 思源黑体（推荐）
- 思源宋体
- 站酷系列字体
- 方正系列
- 文泉驿系列字体
- 郑庆科黄油体
- Font Space
- 濑户字体
- Arual
- 元素水平垂直居中
- 行内元素水平垂直居中
text-align: center- 水平line-height: 20px- 垂直- 块级元素水平垂直居中
margin: auto- 水平- 绝对定位 + margin - 不推荐
- 绝对定位 + translate - 推荐
- flex布局 - 待改进 - 内部所有都水平垂直居中
- flex + margin: auto - 推荐
- 父容器设置
display: flex， - 子元素设置
margin: auto
- 弹窗标准代码
- 还有要解决滚动穿透的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66<!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>
/* 整个弹窗组件 */
.component_popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
/* 遮罩背景 */
.popup_mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
/* 弹窗区域（内容 + close）：严格居中 */
.popup_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 弹窗的内容部分 */
.content_box {
width: 15.45rem;
height: 19.32rem;
background: url(http://img.smyhvae.com/20191010_1500_red-packet.png) no-repeat;
background-size: 15.45rem 19.32rem;
}
/* 弹窗的close图标 */
.content_close {
width: 1.25em;
height: 1.25em;
background: url(http://img.smyhvae.com/20191010_1500_close.png) no-repeat;
background-size: 1.25rem 1.25rem;
margin: 0 auto;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="content">默认文档流中的页面主体</div>
<div class="component_popup">
<div class="popup_mask"></div>
<div class="popup_content">
<div class="content_box"></div>
<div class="content_close"></div>
</div>
</div>
</body>
</html>
- 隐藏盒子
- overflow：hidden; //隐藏盒子超出的部分
- display: none; 隐藏盒子，而且不占位置(用的最多)
- visibility: hidden; //隐藏盒子，占位置。
- visibility: visible; //让盒子重新显示
- opacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置
- Position/top/left/…-999px //把盒子移得远远的，占位置。
超链接跳转
1
2
3
4href="" //刷新页面
href="#" //跳转到当前页面的顶部（不会刷新）
href="javascript:void(0)" // 什么都不做
href="javascript:;" // 什么都不做css实用代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28// flex布局常用的三行代码
display: flex;
justify-content: center; // 子元素在横轴的对齐方式 （左右居中）
align-items: center; // 子元素在竖轴的对齐方式（上下居中）
// 让文字只显示一行，超出显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// 让文字最多只显示两行，超出后显示省略号
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
// 去掉滚动条
&::-webkit-scrollbar {
display: none;
}
// 撑满屏幕
width: 100vw;
min-height: 100vh;
// meta viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">CSS面试
- 你是如何理解 HTML 语义化的？
- 举例， 好处
- canvas元素干什么的
- canvas 入门手册。
- 如何清除浮动
- overflow: hidden
- .clearfix 清除浮动写在父类身上 - clear: both;
- 伪类和伪元素的区别是什么？
- 伪类 - 一种状态，实用单冒号
- 伪元素 - 真的有元素，实用双冒号
JS基础
JS简介
JS语法
1
2
3
4
5
6// ES5 写法
var a;
// ES6 写法
const a;
let a;JS特点
- 解释型语言 - 不需要事先被翻译为机器码
- 单线程
- ECMAScript标准
变量
变量：是用于存放数据的容器。我们通过「变量名」获取数据，甚至可以修改数据。
本质：变量是程序在内存中申请的一块用来存放数据的空间。
- 命名规范
- 只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成
- 不能以数字开头
- 不用使用 JS 语言中保留的「关键字」和「保留字」作为变量名。
- 建议用驼峰命名规则，比如getElementById
变量数据类型
为什么需要数据类型？
在计算机中，不同的数据所需占用的存储空间不同，
为了充分利用存储空间，于是定义了不同的数据类型。
而且，不同的数据类型，寓意也不同。
JS是弱类型语言
在程序运行过程中，类型会自动被确定。根据等号右边的值来确定的
1
2
3var name = 'qianguyihao';
name = 123; // 强制将变量 name 修改为 数字类型JS中一共有六种数据类型
- 基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
- 引用数据类型（引用类型）：Object 对象。
- 注意：内置对象 Function、Array、Date、RegExp、Error等都是属于 Object 类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
- 数据类型之间最大的区别
- 基本数据类型：参数赋值的时候，传数值。
- 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
栈内存和堆内存
JS中，所有的变量都是保存在栈内存中的。
基本数据类型的值，直接保存在栈内存中。
值与值之间是独立存在对象是保存到堆内存中的。每创建一个新的对象，
就会在堆内存中开辟出一个新的空间；
而变量保存了对象的内存地址（对象的引用），
保存在栈内存当中。如果两个变量保存了同一个对象的引用，
当一个通过一个变量修改属性时，另一个也会受到影响。
String
1 | var a = "abcde"; |
在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用\进行转义。
\"表示"双引号\'表示'单引号\\表示\\r表示回车\n表示换行。n 的意思是 newline。\t表示缩进。t 的意思是 tab。\b表示空格。b 的意思是 blank。
字符串特点
- 获取字符串的长度 - length
- 字符串拼接 - 加号
+ - 字符串的不可变性 - 如果修改了值，其实是开辟了一个空间，改变引用
模板字符串
- console.log(
我是${name},age:${age}); //ES6 写法。注意语法格式 - console.log(
www.${getName()}.com); // 打印结果：www.qianguyihao.com1
2
3
4
5
6
7
8
9
10
11
12const nameList = ['千古壹号', '许嵩', '解忧少帅'];
function myTemplate() {
// join('') 的意思是，把数组里的内容合并成一个字符串
return `<ul>
${nameList
.map((item) => `<li>${item}</li>`)
.join('')}
</ul>`;
}
document.body.innerHTML = myTemplate();
Boolean
布尔型有两个值：true 和 false。主要用来做逻辑判断： true 表示真，false 表示假。
布尔型和数字型相加时， true 按 1 来算 ，false 按 0 来算。
1 | var a = true; |
Number
在JS中所有的数值都是 Number 类型，包括整数和浮点数（小数）。
1 | var a = 100; // 定义一个变量 a，并且赋值整数100 |
数值范围
- 最大值：
Number.MAX_VALUE，这个值为： 1.7976931348623157e+308 - 最小值：
Number.MIN_VALUE，这个值为： 5e-324 - 如果使用 Number 表示的变量超过了最大值，则会返回Infinity。
- 无穷大（正无穷）：Infinity
- 无穷小（负无穷）：-Infinity
注意：
typeof Infinity的返回结果是number。
NaN
NaN：是一个特殊的数字，表示Not a Number，非数值。比如：
注意：typeof NaN的返回结果是 number。
Undefined和任何数值计算的结果为 NaN。NaN 与任何值都不相等，包括 NaN 本身。
1 | console.log("abc" / 18); //结果是NaN |
隐式转换
"2"+1得到的结果其实是字符串，但是"2"-1得到的结果却是数值1，这是因为计算机自动帮我们进行了“隐式转换”。-、*、/、%这几个符号会自动进行隐式转换。例如：
1 | var a = "4" + 3 - 6; |
Null
null 专门用来定义一个空对象（例如：
let a = null）。
如果你想定义一个变量用来保存引用类型，但是还没想好放什么内容，这个时候，可以在初始化时将其设置为 null。
1 | let myObj = null; |
undefined
声明了一个变量，但没有赋值，此时它的值就是
undefined。举例：
使用 typeof 检查一个 undefined 值时，会返回 undefined。
如果你从未声明一个变量，就去使用它，则会报错（这个大家都知道）；此时，如果用typeof检查这个变量时，会返回undefined。举例：
1 | let name; |
如果一个函数没有返回值，那么，这个函数的返回值就是 undefined。
1 | function foo() {} |
调用函数时，未传参
1 | function foo(name) { |
null 和undefined的相似性
看看 null == undefined 的结果为 true
但是 null === undefined 的结果是 false。它们虽然相似，但还是有区别的，其中一个区别是，和数字运算时：
1 | - 10 + null 结果为 10。 |
数据类型转换
typeof()表示“获取变量的数据类型”，返回的是小写，语法为：（两种写法都可以）
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
| typeof 的代码写法 | 返回结果 |
|---|---|
| typeof 数字 | number |
| typeof 字符串 | string |
| typeof 布尔型 | boolean |
| typeof 对象 | object |
| typeof 方法 | function |
| typeof null | object |
| typeof undefined | undefined |
备注 1：为啥 typeof null的返回值也是 object 呢？因为 null 代表的是空对象。
备注 2：typeof NaN的返回值是 number，NaN 是一个特殊的数字。
1 | console.log(typeof []); // 空数组的打印结果：object |
typeof 无法区分数组，但 instanceof 可以。比如：
1 | console.log([] instanceof Array); // 打印结果：true |
类型转换分为两种：显示类型转换、隐式类型转换。
1 | 显示类型转换 |
1 | 隐式类型转换 |
1 | 隐式类型转换（特殊） |