总结
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！
而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
资料截图 ：
高级前端工程师必备资料包
-
表格标签
<table></table> -
表格的一行
<tr></tr> -
表格的表头
<th></th> -
单元格
<td></td> -
表格合并，同一行内，合并几列
colspan="2"，同一列内，合并几行rowspan="3"
表单标签
- 表单标签
<form>
<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action，浏览者输入的数据被传送到的地方
method，数据传送的方式
- 输入标签
<input/>
name：为文本框命名，用于提交表单，后台接收数据用。
value：为文本输入框设置默认值。
type：通过定义不同的type类型，input的功能有所不同。
text 单行文本输入框
password 密码输入框（密码显示为***)
radio 单选框 （checked属性用于显示选中状态）
checkbox 复选框（checked属性用于显示选中状态）
file 上传文件
button 普通按钮
reset 重置按钮（点击按钮，会触发form表单的reset事件）
submit 提交按钮（点击按钮，会吃饭form表单的submit事件）
email 专门用于输入 e-mail
url 专门用于输入 url
number 专门用于number
range 显示为滑动条，用于输入一定范围内的值
date 选取日期和时间（还包含：month、week、time、datetime、datetime-local）
color 选取颜色
button按钮，下拉选择框<select></select>
- 文本域：
<textarea></textarea>，当用户想输入大量文字的时候，使用文本域。cols，多行输入域的列数，rows，多行输入域的行数。
其他语义化标签
-
盒子
<div></div> -
网页头部
<header></header>，html5新增语义化标签，定义网页的头部，主要用于布局，分割页面的结构 -
底部信息
<footer></footer>，html5新增语义化标签，定义网页的底部，主要用于布局，分割页面的结构 -
导航
<nav></nav>，html5新增语义化标签，定义一个导航，主要用于布局，分割页面的结构 -
文章
<article></article>，html5新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构 -
侧边栏
<aside></aside>，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。 -
时间标签
<time></time>，语义化标签，定义一个时间
网页结构
-
<!DOCTYPE html>定义文档类型，告知浏览器用哪一种标准解释HTML -
<html></html>可告知浏览器其自身是一个HTML文档 -
<body></body>标签之间的内容是网页的主要内容 -
<head></head>标签用于定义文档的头部，它是所有头部元素的容器 -
<title></title>元素可定义文档的标题 -
<link>标签将css样式文件链接到HTML文件内 -
<meta>定义文档的元数据
模块划分
-
常见的企业网站，多由头部区，展示图片区域，主题区域，底部信息区域组成
-
网页拆分原则: – 由上到下 - 由内到外
CSS代码语法
-
CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 -
css代码通常存放在<style></style>标签内 -
css样式由选择符和声明组成，而声明又由属性和值组成 -
选择符
{属性:值} -
选择符：又称选择器，指明网页中要应用样式规则的元素
CSS 放置位置
-
行内样式，不建议使用
-
内联式样式表
-
外联样式表
CSS的继承
-
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。 -
不可继承样式：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear -
可以继承的样式：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
选择器的种类
-
标签选择器:通过标签的名字，修改
css样式 -
通配符选择器:选择页面中所有的元素
-
属性选择器
-
后代选择器:选择某个父元素下面所有的元素
-
一级子元素选则器:选择某个父元素的直接子元素，后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
-
id选择器：通过id查找页面中唯一的标签 -
class选择器:通过特定的class（类）来查找页面中对应的标签，以.class名称 -
伪类选择器:
:hover鼠标移入某个元素;:before在某个元素的前面插入内容;:after在某个元素的后面插入内容 -
群组选择器:可以对多个不同的选择器设置相同的样式
选择器的优先级
-
当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
-
通过测算那个选择器的权重值最高，应用哪一个选择器的样式
-
权重计算方式:
标签选择器：1
class选择器：10
id选择器：100
行内样式：1000
!important 最高级别，提高样式权重，拥有最高级别
背景样式
-
背景颜色
background-color -
背景图片
background-image
background-image:url(bg01.jpg);
- 背景图片位置
background-position
background-position:10px 100px;
// 代表坐标x，y轴
- 背景图片重复
background-repeat
background-repeat:no-repeat
// no-repeat 设置图像不重复，常用
// round 自动缩放直到适应并填充满整个容器
// space 以相同的间距平铺且填充满整个容器
- 背景图片定位
background-attachment
background-attachment:fixed
// 背景图像是否固定或者随着页面的其余部分滚动
// background-attachment的值可以是scroll（跟随滚动），fixed（固定）
background缩写
background:#ff0000 url(bg01.jpg) no-repeat fixed center
字体样式
- 字体族
font-family
font-family:“微软雅黑”,“黑体”;
- 字体大小
font-size
font-size:12px;
网页默认字体大小是
16px
- 字体粗细
font-weight
font-weight:400;
normal（默认）
bold（加粗）
bolder（相当于和标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）
- 字体颜色
color
颜色的英文单词color:red;
十六进制色：color: #FFFF00;
RGB(红绿蓝)color:rgb(255,255,0)
RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)
- 字体斜体
font-style
font-style:italic
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
文本属性
- 行高
line-height
line-height:50px;
可以将父元素的高度撑起来
- 文本水平对齐方式
text-align
left 左对齐
center 文字居中
right 右对齐
- 文本所在行高的垂直对齐方式
vertical-align
baseline 默认
sub 垂直对齐文本的下标，和标签一样的效果
super 垂直对齐文本的上标，和标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
- 文本缩进
text-indent
text-indent:2em;
通常用在段落开始位置的首行缩进
-
字母之间的间距
letter-spacing -
单词之间间距
word-spacing -
文本的大小写
text-transform
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
- 文本的装饰
text-decoration
none 默认。
underline 下划线。
overline 上划线。
line-through 中线。
- 自动换行
word-wrap
word-wrap: break-word;
基本样式
- 宽度
width
width:200px;
定义元素的宽度
- 高度
height
height:300px
元素默认没有高度
需要设置高度
可以不定义高度，让元素的内容将元素撑高
- 鼠标样式
cursor
定义鼠标的样式cursor:pointer
default默认
pointer小手形状
move移动形状
- 透明度
opacity
opacity:0.3
透明度的值0~1之间的数字，0代表透明，1代表完全不透明
透明的元素，只是看不到了，但是还占据着文档流
- 可见性
visibility
visibility:hidden;
visible 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。
- 溢出隐藏
overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容
visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- 边框颜色
outline
input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框
outline:1px solid #ccc;
outline:none清除边框
样式重置
早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。
清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线
盒模型样式
- 块状元素、内联元素和内联块状元素。
块级元素:
-
每个块级元素都从新的一行开始，并且其后的元素也另起一行。
-
元素的高度、宽度、行高以及顶和底边距都可设置。
-
元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。
行内元素:
-
和其他元素都在一行上
-
元素的高度、宽度、行高及顶部和底部边距不可设置
-
元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素:
-
和其他元素都在一行上
-
元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素分类转换
display
block：将元素转换为块级元素
inline：将元素装换为行级元素
inline-block：将元素转换为内联块元素
none: 将元素隐藏
- 描边
border
border:2px solid #f00;
线条的样式：
dashed（虚线）| dotted（点线）| solid（实线）。
css样式中允许只为一个方向的边框设置样式：
下描边border-bottom:1px solid red;
上描边border-top:1px solid red;
右描边border-right:1px solid red;
左描边border-left:1px solid red;
- 间距
margin
div{margin:20px 10px 15px 30px;}
- 内填充
padding
padding:10px
浮动float
- 浮动原理
-
浮动使元素脱离文档普通流，漂浮在普通流之上的。
-
浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
-
浮动会产生块级框（相当于设置了
display:block），而不管该元素本身是什么。
- 清除浮动带来的影响
clear 清除浮动：
none : 不清除（默认值）。
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象
- 利用伪类实现清除浮动
.clearFix {
content=“”;
display:block;
width:0;
height:0;
clear:both;
}
定位position
-
定位功能可以让布局变的更加自由。
-
层模型–绝对定位（相对于父类）
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下图所示：
如果想为元素设置层模型中的绝对定位，需要设置
position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
- 层模型–相对定位（相对于原位置）
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下图所示：
如果想为元素设置层模型中的相对定位，需要设置
position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
- 层模型–固定定位（相对于网页窗口）
position:fixed
总结
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
