前端面试题

最新推荐文章于 2024-08-16 19:04:45 发布

花菜的棉花糖

最新推荐文章于 2024-08-16 19:04:45 发布

阅读量86

点赞数

分类专栏： web前端文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_40547717/article/details/117596122

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Html

语义化的理解

用正确的标签做正确的事情,让页面的内容结构化，便于对浏览器、搜索引擎解析
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO（搜索引擎优化）
便于阅读维护理解
html不是用来显示样式的,默认样式是在没有CSS情况下也以一种文档格式显示，并且是容易阅读的

文档类型

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
HTML5的Doctype是<!DOCTYPE html>，现在的浏览器都支持这个写法，不需要再像HTML4一样区分三种Doctype（严格、松散、框架）模式了。因为HTML4基于SGML(标准通用标记语言),所以需要对DTD（文档类型定义:是一套关于标记符的语法规则）进行引用，才能告知浏览器文档所使用的文档类型。HTML 5 不基于 SGML，也不需要引用 DTD，但是需要声明文档类型让浏览器按照它们应该的方式来运行。

CSS

选择器其实就是一套规定了选择页面上元素的规则

选择器（伪类/伪元素）详情见：https://segmentfault.com/a/1190000013737796

基本选择器
选择器	含义	作用	css
.class	类选择器	匹配 class 包含(不是等于)特定类的元素	1
#id	id选择器	匹配特定 id 的元素	1
*	通用元素选择器	匹配页面任何元素（这也就决定了我们很少使用）	2
element	元素选择器	选择HTML元素	1

组合选择器
选择器	含义	作用	css
E,F	多元素选择器	同时匹配元素E或元素F	1
E F	后代选择器	匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F	1
E>F	子元素选择器	匹配E元素的所有直接子元素	2
E+F	直接相邻选择器	匹配E元素之后的相邻的同级元素F	2
E~F	普通相邻选择器（弟弟选择器）	匹配E元素之后的同级元素F（无论直接相邻与否）	3

属性选择器
选择器	示例	示例说明	css
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute ^= language]	[lang ^= en]	选择一个lang属性的起始值="EN"的所有元素	2
[attribute $= language]	[lang $= en]	选择一个lang属性的结尾值="EN"的所有元素	2
[attribute *= language]	[lang *= en]	选择一个lang属性的包含"EN"的所有元素	2

伪类选择器
选择器	示例	示例说明	css
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:hover	a:hover	把鼠标放在链接上的状态	1
:active	a:active	选择正在活动的链接	1
:focus	input：focus	选择元素输入后具有焦点	2

伪元素选择器
选择器	含义	作用	css
::before/:before	在被选元素前插入内容	需要使用content属性指定插入的内容。被插入的内容，实际上不在文档树中	2
::after/:after	在被选元素后插入内容	其用法和特性与:before相似。	2
::first-letter/:first-letter	匹配元素中文本的首字母	被修饰的首字母不在文档树中。	1
::first-line/:first-line	匹配元素中第一行的文本	这个伪元素只能在块元素中，不能用在内联元素中	1

css三大特性

css三大特性
	定义
层叠性	简单来说，当多个选择器选中同一个元素,并且设置了相同的属性时,CSS解决这种冲突的能力就叫做CSS的层叠性。
继承性	子元素具备父级元素的样式
优先级	优先级是决定CSS如何层叠的一套规则

层叠性：

简单来说，当多个选择器选中同一个元素,并且设置了相同的属性时,CSS解决这种冲突的能力就叫做CSS的层叠性。
层叠性的概念需要和继承性，优先级一起理解。
层叠性，继承性和优先级是CSS的三大特性，它们一起决定着如何解决CSS的冲突。

继承性：

不是所有的属性都可以被继承,只有color和以font-/text-/line-开头的属性才可以继承
在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
a标签不能继承来自父元素的颜色和取消下划线属性
h标签不能继承来自父元素的的字体大小和加粗属性,但是由于h标签默认的字体大小用的是em单位,所以字体的大小会随着父级元素大小的改变而改变
一般情况下可以通过给body元素设置一些通用的样式来保持页面风格的统一

优先级：

间接选中(通过继承选中)

优先级根据就近原则,离被选中的元素越近优先级越高

直接选中(通过选择器选中)

单一选择器直接选中

当多个单一选择器同时选中同一个元素,并且设置相同样式时,选择器越精确优先级越高，选择器的精确度从高到底依次是:

ID选择器->类选择器->标签选择器->通用选择器->继承间接选中->浏览器默认的样式

混合选择器直接选中

当多个混合选择器同时选中同一个元素,并且设置相同样式时,越精确的选择器越多优先级越高:

谁的ID选择器多,就听谁的
如果ID选择器个数相同,看类选器,谁的类选择器多听谁的
如果ID选择器和类选择器一样多,看标签选择器,谁的标签选择器多听谁的
如果ID选择器,类选择器和标签选择器一样多的情况下,就不继续往下找了,谁的样式写在后面听谁(就近原则)

提高优先级

我们可以通过关键字!important来提高优先级

说明

!important必须写在需要改变优先级属性的分号;前面
!不能省略
!important只能提高某个属性的优先级,不能提高该选择器中其他属性的优先级
由于!important会改变选择器的优先规则,所以在实际项目中谨慎使用

布局

详情见：教程/css/布局

网页布局就是对网页中各个元素进行排版

布局
	定义	说明
标准流布局	浏览器默认的排版方式，是将窗口自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。	流可以理解为流式排列在标准流中，块状元素从上向下排列在标准流中，行内元素,行内块状元素从左到右排列
浮动流布局	浮动流主要是用来水平排版的 float：left/right	父元素的`margin`/`border`/`padding`的值对浮动定位的子元素的位置没有影响,浮动定位的子元素是从父元素的内容区域开始参考的
定位流布局	相对定位:position: relative 绝对定位:position: absolute 固定定位:position: fixed	相对定位：相对于自己在标准流当中的位置发生的移动绝对定位：相对于父元素发生位置的移动固定定位：参照`body`发生位置的移动,固定定位的元素不会随着滚动条的移动而移动
弹性布局	块：display: flex 行：display: inline-flex	弹性布局主要是通过给父元素添加`display:flex`属性来控制子元素的布局。

盒模型

详情见：教程/css/盒模型

css3

详情见：教程/css/css3

移动端适配

详情见：教程/css/移动端方案

js基础

数据类型的分类和转换

在JS中，大的方面把数据分为基本数据类型(原始类型)和引用数据类型(复杂类型)

基本数据类型
类型	名称	说明
Undefined	未定义	1.未定义类型只有一个值`undefined`,这个值的意思是变量没有定义 2.未定义有两种情况,一个是真的没有定义,一个是定义了但是没有赋值
Null	空对象	空对象类型只有一个值`null`,代表一个空对象指针
Number	数字类型	用来表示数字,数字包括整数和小数(也叫浮点数或者双精度数)
String	字符串类型	用单引号或者双引号括起来的字符序列,单引号和双引号表示的字符串完全一样,一般推荐用单引号
Boolean	布尔类型	1.布尔型也被称为逻辑值类型或者真假值类型 2.布尔型只能够取真（`true`）和假（`false`）两种数值 3.所有类型的值都可以表示布尔值,其中真有`true`,非零数字,非空字符,非空对象,假有`false`,数字零,空字符,`null`,`undefined`,`NaN`

特点：

基本类型访问的变量的实际值
基本类型不能动态的添加属性
基本类型变量复制时会新建一个变量并分配空间,将变量的值分配在新的空间上
Undefined和Null是一种数据类型,而undefined和null是值,是一个字面量

引用类型

引用类型
`Object` 对象类型	对象是一组数据和功能的集合 `null`代表了一个空对象指针,所以用 `typeof` 检测时会返回 `object` 函数在ES中是对象,但函数也有一些特殊的属性,所以用 `typeof` 检测时会返回 `function` 数组在ES中是对象