总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总
HTML表单用于收集用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
<form></form>
用于创建HTML表单,常用属性如下:
action:规定表单提时,表单数据提交的URL
method:规定用于发送form-data的HTTP方法,常用属性值为get、post
<input />
元素是最重要的表单元素,根据input元素的不同type类型,表现形式也是不一样的
| 类型 | 描述 |
| — | — |
| text
| 普通文本框,一般默认20个字符宽度 |
| textarea
| 多行文本框 |
| button
| 普通按钮 |
| radio
| 单选框 |
| checkbox
| 多选框 |
| reset
| 表单重置按钮 |
| submit
| 表单提交按钮 |
| password
| 密码输入框,密码字段使用圆点或星号代替 |
<label></label>
用于为input标签提供标注
点击label文本,浏览器会自动将焦点转到和标签相关的表单控件上
label标签的for属性值应当与相关元素的id属性值相同
示例
<select></select>
用于创建下拉列表
select元素中的 <option></option>
标签用于定义列表的可选项
<button></button>
用于定义普通按钮
======================================================================
HTML标签语义化,简单来说,就是让标签有含义,给某块内容用上一个最恰当最合适的标签,使页面有良好的结构,页面元素有含义,更利于开发者、程序和其他设备对于标签的理解。
语义化在盲人软件、机器翻译等方面发挥着重要作用,同时搜索引擎会通过语义化标签增强文章的SEO搜索。
下表为部分常见的语义化标签:
| 元素 | 描述 |
| — | — |
| article
| 定义独立的来自外部的文档,如新闻投稿、博客文章、论坛帖子等 |
| aside
| 一般用于网页中的侧边栏或者文章内部的标注框 |
| header
| 页面的头部区域,通常包括网站logo、链接导航、搜索框、banner |
| nav
| 页面的导航链接区域 |
| main
| 定义文档主要内容 |
| section
| 定义文档的区域 |
| footer
| 文档的页脚 |
| mark
| 标记、突出显示文本 |
| ul
| 无序列表 |
| form
| 创建HTML表单 |
| button
| 定义按钮 |
| i
| 用于表示区分普通文本的其他文本,浏览器通常会将其内容显示为斜体 |
=======================================================================
head标签中一般可以包含以下标签:<title>、<style>、<script>、<link>、<meta>、<base>
常见Head头
<title></title>
用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时,该标题为页面链接的默认名称
例:
<link />
用于定义文档与外部资源的关系,最常用于链接样式表,也常用于给标题添加小图标
<link />
是空元素,仅包含属性,只能存在于head部分
| 属性 | 属性值 | 描述 |
| — | — | — |
| href
| URL | 设置目标链接的文件路径 |
| rel
| stylesheet、icon、sidebar、prev等 | 规定当前文档与链接文档之间的关系 |
| type
| MIME_type | 目标连接文档的MIME类型 |
<style></style>
用于给文档引入 CSS
样式信息,将样式表包含在 style
开始与结束标签之间
<script></script>
用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本
也可以通过script的src属性链接外部脚本文件
<meta />
提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
name
和 content
属性通常一起使用,以键值对的方式给文档提供元数据,其中 name
的属性值作为元数据的名称,content
作为元数据的值
keywords
和 description
这两个名称使用频率最高,是搜索引擎优化的主要方式之一
| 名称 | 值 | 描述 |
| — | — | — |
| keywords | 关键字 | 描述网页关键字,使用逗号分隔 |
| description | 描述内容 | 网站主要内容的简短描述 |
| author | 作者 | 描述网站作者 |
| viewport | width | viewport视口宽度,设置为device-width表示为设备的宽度 | 定义viewport的初始大小,仅用于移动设备 |
| height | viewport视口高度 |
| maximum-scale | 最大缩放比例 |
| initial-scale | 初始缩放比例 |
| minimum-scale | 最小缩放比例 |
| user-scalable | 是否允许用户缩放 |
charset
属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv
属性可用于模拟一个HTTP响应头,与content属性搭配使用,常用属性值如下:
-
content-type
:规定文档的字符编码,等同于charset属性设置字符编码 -
default-style
:设置默认CSS样式表组的名称 -
refresh
:设置文档自动刷新的时间间隔,content只包含一个正整数,则为重新载入页面的时间间隔(秒),content包含一个正整数和【url=XXX】格式的字符串时,该正整数则是重定向到指定链接的时间间隔(秒)
<base />
用于为页面中的所有相对链接设置默认URL或默认 target
属性
========================================================================
CSS(层叠样式表)定义了HTML元素在页面中的样式、布局以及整个页面的布局。
CSS遵循W3C规范,实现了跨浏览器的标准化。
直接使用HTML元素的style属性引入CSS样式
uiu
使用标签引入样式
链接样式
导入确实比较方便,当然也是最常用的,但在比较大的工程之中我常使用 导入样式
,我认为这可以让我的代码得到更方便的管理
3.1 链接样式
在 <head></head>
标签中,使用 <link />
标签链接外部的CSS文件
link
标签的 href
属性设置为目标链接的 CSS
文件路径,rel
属性设置为 stylesheet
表示链接样式表,type
属性设置为 text/css
3.2 导入样式
使用 @import url()
引入CSS文件
在CSS文件中直接使用 @import url()
在HTML文件中需要在 <style></style>
标签中使用 @import url()
在HTML初始化时,@import url()
导入的CSS会被直接导入到 HTML
或 CSS
文件中,成为文件的一部分
/*
CSS文件中导入
*/
@import url(style.css);
========================================================================
在前端开发过程中,为了页面的美观,往往都会给HTML元素添加背景,使用CSS(层叠样式表)背景属性能够在页面美化的同时,实现页面的表现与内容分离。
| 属性 | 属性值 | 描述 |
| — | — | — |
| background-color
| 颜色值,如rgb
,rgba
,十六进制表示
等,设置为 transparent
表示背景透明 | 设置背景颜色 |
| background-image
| url( filepath )
或 none
| 设置背景图像 |
| background-size
| 宽高
、百分比宽高
、contain
、cover
| 设置背景图片尺寸 |
| background-repeat
| repeat
/ repeat-x
/ repeat-y
| 设置背景图片重复方式 |
| background-position
| top left
/ top center
/ cente
r等 | 设置背景图片的位置 |
- contain
保持图片纵横比例缩放背景图片,使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域
- cover
保持图片纵横比不变,最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示
- repeat(默认)
允许水平和垂直方向重复(平铺)背景图片
- repeat-x
只允许水平方向重复(平铺)背景图片
- repeat-y
只允许垂直方向重复(平铺)背景图片
简写属性可以在一个属性声明中设置一个或多个背景属性
background: #000 url(‘bannner.png’) no-repeat cover;
上面代码的意思为:黑色背景、背景图片为:bannner.png、关闭平铺、保持图片纵横比不变
========================================================================
通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式,将页面的正文与标题区分开,同时能够丰富整个页面布局。
用于设置文本的颜色,可设置的值有:
-
颜色英文名,如
red
-
十六进制值,如
#FFFFFF
-
RGB值,如
rgb(255, 0, 0)
-
rgba值 ,如
rgba(255, 0, 0, 0.9)
用于设置文本字体大小,可以设置为绝对大小,单位为px
,也可设置为相对大小,单位为 rem
、em
等
字体大小未设置时默认字体大小为 16px
用于设置文本的粗细,可设置的值有:
| 属性值 | 说明 |
| — | — |
| normal
| 标准字符(默认) |
| bold
| 粗体字符 |
| bolder
| 更粗的字符 |
| lighter
| 更细的字符 |
| 100、200、300、400、500...
| 400
相当于 normal
700
相当于 bold
,数值越大字体越粗 |
用于规定文本使用的字体名或字体族名列表,字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体,则会尝试下一个,以此类推
font-family: “PingFang SC”,“Hiragino Sans GB”,“Arial,Microsoft YaHei”,“Verdana”,“Roboto”,“Noto,Helvetica Neue”,“sans-serif”;
用于设置文本的水平对齐方式,可设置的值有
-
center(居中对齐)
-
left(左对齐)
-
right(右对齐)
文本方向是从左到右则默认左对齐,文本方向是从右至左则默认右对齐
用于设置行间距,可设置的值如下
-
数字 :行间距为当前字体大小乘此数字
-
固定值 :设置固定的行间距,如20px
-
百分比 :行间距为当前字体大小乘百分比
用于指定首行缩进值,可设置的值如下
-
固定值 :设置固定首行缩进,如20px
-
百分比 :首行缩进值为父元素宽度乘此百分比
用于设置字间距,设置固定值为字间距,如10px
用于指定文本中单词之间的间距,设置固定值为单词间距,如10px
用于设置文本的装饰线,是下表属性的简写
| 属性 | 属性值 | 描述 |
| — | — | — |
| text-decoration-line | none | 无线条 | 设置要使用哪种文本装饰的类型
(下划线、上划线、删除线)。 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
| text-decoration-color | 颜色名、十六进制颜色、rgb等 | 设置装饰线颜色 |
| text-decoration-style | solid | 实线 | 设置装饰线的样式 |
| double | 双实线 |
| dotted | 点划线 |
| dashed | 虚线 |
| wavy | 波浪线 |
/*
表示为黑色波浪形下划线
*/
text-decoration: underline wavy black;
用于设置文本大小写字母,常用属性如下
-
uppercase :全部文本均为大写字母
-
lowercase :全部文本均为小写字母
-
capitalize :文本的每个单词首字母为大写字母
设置文本在水平或垂直方向的排布方式
-
horizontal-tb :文本流在水平方向从上到下排列,文字方向为水平方向
-
sideways-lr :文本流在垂直方向,从下至上、从左至右排列
-
sideways-rl :文本流在垂直方向,从上至下、从右至左排列
-
vertical-lr :文本流在垂直方向,从上至下、从左至右排列,文字方向为水平方向
-
vertical-rl :文本流在垂直方向,从上至下、从右至左排列,文字方向为水平方向,跟古诗阅读顺序一致
用于设置文本的空白符处理方式,属性值如下
| 属性值 | 描述 |
| — | — |
| normal
| 合并空格,换行符转化为一个空格,允许自动换行 |
| nowrap
| 合并空格,换行符转化为一个空格,不允许自动换行 |
| pre
| 保留空格,保留换行符,不允许自动换行 |
| pre-line
| 合并空格,保留换行符,允许自动换行 |
| pre-wrap
| 保留空格,保留换行符,允许自动换行 |
| break-spaces
| 保留空格,保留换行符,允许自动换行,行尾空格保留,空白符占用空间 |
======================================================================
CSS(层叠样式表)选择器是CSS规则的一部分,用来指定需要设置样式的HTML元素。
通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制。
|
选择器类型
| 描述 |
示例
|
| :-: | — | — |
| 通配选择器 | 通配选择器使用一个星号*
表示,*
会匹配所有元素 | * {
color: red;
}
|
| 标签选择器 | 通过标签名匹配,匹配文档中所有为此标签名的元素 | p {
color: red;
}
|
| id选择器 | 通过井号#
来定义id选择器,根据元素的id
属性匹配(精确匹配)元素 | #box {
width: 100px;
}
|
| 类选择器 | 通过点.
来定义类选择器,根据元素的class
属性匹配(精确匹配)元素 | .container {
height: 100px;
}
|
| 组合选择器 | 包括四种组合方式:后代选择器、子代选择器、相邻选择器、兄弟选择器 | #box>.nav p {
color: red;
}
|
可以与其他选择器相结合,选择某元素下的所有元素
/*
选择类名为box的元素的所有后代,添加一个黑色的字体颜色
*/
.box * { color: #000; }
由于每个浏览器对元素的默认边距不一致,通配选择器常用于reset样式文件中,覆盖浏览器的默认样式
- {
margin: 0;
padding: 0;
border: 0;
}
标签选择器也常用于reset样式文件中,用于清除元素的默认样式,如li标签的小圆点、a标签的下划线等
id属性的属性值应当是当前文档唯一
class属性值在文档中可以重复
通过间隔符将基础选择器连接起来,实现组合选择的效果
| 选择器 | 间隔符 | 描述 |
| — | — | — |
| 后代选择器 | 空格 | 选取该元素的后代元素 |
| 子代选择器 | > 大于号 | 选择该元素的第一级子元素 |
| 相邻选择器 | + 加号 | 选择该元素之后相邻第一个元素,且两者具有相同的父元素 |
| 兄弟选择器 | ~ 波浪号 | 选择该元素之后的同层级元素 |
======================================================================
将伪类与选择器相结合,可以指定选择元素的特殊状态,也可以根据元素的所处的状态应用不同的样式,掌握伪类选择器可以帮助我们实现更加丰富的样式。
| 伪类 | 描述 |
| — | — |
| :hover
| 用于设置鼠标悬停在元素上方时的样式 |
| :focus
| 用于设置元素获得焦点时的样式 |
| :active
| 用于设置元素被激活时(按下按键时、松开按键时)的样式 |
| :link
| 用于设置元素点击之前的样式(仅可用于a
标签) |
| :visited
| 用于设置被访问的元素的样式(仅可用于a
标签) |
| :first-child
| 用于选取属于其父元素的第一个子元素,且满足冒号前的基础选择器选取要求 |
| :first-of-type
| 用于选取属于其父元素的第一个特定类型的子元素 |
| :last-child
| 用于选取属于其父元素的最后一个子元素且满足基础选择器选取要求 |
| :last-of-type
| 用于选取属于其父元素的最后一个特定类型的子元素 |
| :nth-child(N)
| 选择匹配属于其父元素的第N
个子元素且满足基础选择器选取要求,N
可以为数字、关键字(odd / even
)、公式(如:2n+1) |
| :nth-of-type(N)
| 选择匹配属于其父元素的第N
个指定类型的子元素,N
可以为数字、关键字(odd / even
)、公式 |
| :nth-last-child(N)
| 选择匹配属于其父元素的第N
个子元素且满足基础选择器选取要求,从最后一个子元素开始计数,N
可以为数字、关键字(odd / even
)、公式 |
| :nth-last-of-type(N)
| 选择匹配属于其父元素的第N
个指定类型的子元素,从最后一个子元素开始计数,N
可以为数字、关键字(odd / even
)、公式 |
=======================================================================
伪元素选择器通过选择元素的某个部分,对元素的特定部分单独设置样式。伪元素是某个元素的子元素,是逻辑上存在的虚拟元素,但是实际并不存在与DOM树中。
一个选择器只能使用一个伪元素,伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素,使用双冒号 ::
作为伪元素选择符
|
伪元素
| 描述 | 示例 |
| :-: | — | — |
| ::after
| 用于创建伪元素,在元素内容之后插入内容,该伪元素默认为行内元素 | p::after {
content: "结束";
}
|
| ::before
| 用于创建伪元素,在元素内容之前插入内容,该伪元素默认为行内元素 | p::before {
content: "开始";
}
|
| ::first-line
| 向文本的首行添加样式,只能应用于块级元素 | p::first-line {
color: #333;
}
|
| ::first-letter
| 向文本的首字母添加样式,只能应用于块级元素 | p::first-letter {
font-size: 16px;
}
|
| ::marker
| 用于改变li元素的数字或符号的样式,只能作用于display
属性值为list-item
的元素 | ul li::marker {
content: '*';
}
|
| ::placeholder
| 用于设置表单元素占位符文本的样式 | input::placeholder {
color: blue;
}
|
========================================================================
当创建的CSS样式表越来越多、越来越复杂的时候,一个元素的样式可能受到多个CSS样式表的影响,到底这个元素显示的是哪个样式表的样式呢?通过CSS优先级可以帮助我们得出结论。
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
内联样式
>ID选择器
>类选择器、属性选择器、伪类选择器
>标签选择器 、伪元素选择器
通配符选择器 *
和关系选择符 +
(相邻选择符)、>
(子代选择符)、~
(兄弟选择符)、" "
(后代选择符)等对优先级没有影响
在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
| 选择器 | 权重 |
| — | — |
| 内联样式 | 1000 |
| ID选择器 | 100 |
| 类选择器、属性选择器、伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 相邻选择符、子代选择符、兄弟选择符、后代选择符 | 0 |
选择器的权重可以相加
#header .nav li { list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
-
权重相同时,根据HTML代码从上往下执行的特点,后面选择器会覆盖前面选择器中相同的属性
-
权重不同时,权重大的选择器生效
3、!important规则
当你在一个样式声明中使用 !important
规则时,这个样式将覆盖其他的任何声明
!important
规则与优先级无关,但是会直接影响样式的最终显示结果
===========================================================================
HTML(超文本标记语言)中元素大多数为块级元素或行内元素,浏览器在显示页面时,对这两类元素的默认处理方式是不一样的。
-
在浏览器显示时总是独占一行
-
宽高、内外边距可以控制,且上下左右的外边距均可对周围元素产生影响
-
可以包含内容、行内元素和其他块级元素
-
宽度未设置时默认为其父级元素的宽度,高度未设置时为内容的高度
-
常见块级元素:
div、form、footer、h1-h6、ol、ul、p、video
-
设置
display
属性为display: block
可将元素转换为块级元素
-
不独占一行,默认不自动换行
-
宽高、上下边距不可以控制,仅有左右边距可以控制且会对周围元素产生影响
-
一般只能包含内容和其他行内元素,不可包含块级元素
-
设置宽高无效,宽高默认为内容的宽高
-
常见行内元素:
span、label、a、em、strong、img
-
设置
display
属性为display: inline
可将元素转换为行内元素
-
综合块级元素与行内元素的特性
-
不独占一行
-
元素宽高、内外边距均可设置,上下左右边距均会对周围元素产生影响
-
宽高未设置时默认为内容宽高
-
常见行内块级元素:
button、input、textarea、select
-
设置
display
属性为display: inline-block
可将元素设置为行内块级元素
======================================================================
所有的HTML元素都可以看做是一个盒子模型,每个盒子模型包含外边距、内边距、边框、实际内容四个部分,通过对以上四个部分的属性设置可以极大的丰富盒模型乃至整个HTML文档的表现效果和布局结构。
当对一个页面进行布局(lay out)的时候,浏览器会将所有元素表示为一个个矩形的盒子(box),HTML页面可以理解为将多个盒子堆叠累加而成。
盒模型由里到外包括四个部分:
-
内容部分
-
padding(内边距)
-
border(边框)
-
margin(外边距)
内容部分一般用来显示图像或文字,在标准盒模型中(默认),内容部分的宽高可以通过width、height属性设置
-
padding(内边距) 是包围在内容区域外的空白区域,代表的是盒子边框与实际内容之间的距离,通过
padding
相关属性设置大小 -
border 指的是盒子模型的边框。border除了可以使用
border-width
设置边框大小外,可以使用border-style
设置边框的样式,如实线、虚线,使用border-color
设置边框颜色 -
margin(外边距) 指的是盒子和其他元素之间的空白部分,代表的是盒子的边框与其他相邻盒子边框之间的距离,通过
margin
相关属性设置大小
3.1标准盒模型
标准盒模型结构图
在标准盒模型中,给盒模型设置width和height,实际上是给内容区域设置大小
标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小
如果将div设置为标准盒模型 box-sizing:content-box
,CSS设置如下
div{
width: 100px;
height: 100px;
margin: 50px;
padding: 15px;
box-sizing: border-box;
}
检查元素如下图所示,div设置的
width
和height
是100×100,div的实际大小是130×130
,div的实际宽度 = width + padding-left + padding-right + border-left + border-right
= 100+ 15 + 15 + 0 + 0 = 130,div的实际高度计算同理
div在标准盒模型中的实际大小
标准盒模型属性
3.2怪异盒模型
最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】