【前端基础知识体系】【按问题梳理】（持续更新中）

最新推荐文章于 2024-08-05 22:41:52 发布

原创最新推荐文章于 2024-08-05 22:41:52 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #css #面试

前端基础专栏收录该内容

2 篇文章

订阅专栏

本文是作者的前端面试笔记，详细梳理了HTML语义化、CSS布局与定位、ES语法以及Web API等方面的知识，旨在帮助读者巩固基础并准备面试。内容涵盖HTML语义标签、盒模型、浮动布局、BFC、CSS3动画、原型链、异步处理、DOM操作等核心概念，并提供了实践案例。

文章的介绍：

笔者曾在Udacity、九章算法系统性地学习前端基础知识。但是Udacity对面试的针对性不足，九章则主要讲的是React。幸而在网上找到了面试为导向的课程：https://coding.imooc.com/learn/list/400.html。此文章为笔者的课堂笔记，其中所有图片皆标明出处。如果有侵权请联系本人删除。

0. 思维导图-知识体系

根据 W3C 标准和 ECMA262 标准梳理。在开发环境和运行环境中思考。

0. HTML

如何理解HTML语义化？【HTML】

思考：

表现形式：

少地使用无语义的div和p标签；
表格和图片要有对应的alternaive text和caption；
加粗或斜体的文本放在strong或em标签中而不是用纯样式标签（b与i）等。

语义化标签的作用如下：

对人类而言，更可读。
同时，有利于SEO。对搜索引擎而言，爬虫也更容易分清重点和逻辑关系（比如h1是大标题）。（SEO search engine optimization 搜索引擎优化）
此外，对于其他类型的设备如盲人阅读器，语义标签便于解析。使用者因此能按照逻辑层次来选择阅读的内容。
- （盲人阅读器会根据各h标签来组织文章的内容，并用语音提供给盲人）
  - 【所以应该按照逻辑层次用h1-h3 不要跳过】
  - 【更不要因为喜欢h3的默认字体大小来直接用h3】

语义元素如下：

header - 页眉，作为整个页面的标题，可以包括搜索框或者nav。也可以为每个内容块增加一个header。
footer - 页脚，含有页面的基本信息，比如姓名、联系方式、版权、备案号。
nav - 导航连接区域，菜单、目录或索引。前往网站不同页面。
aside - 侧边栏（页面内导航、其他相关页面），也可以在article内，作为当前文章内容的解释文本（一种特殊的section）
article - 页面的主体，比如一篇文章或者一篇评论。
h1 to h6，文章的不同section前编写。
hgroup - 包裹连续的多级标题，参考https://www.runoob.com/tags/tag-hgroup.html

回答：

作用和目的：三个主要思考方向

增加代码可读性（人）；
让搜索引擎更容易获得有效信息；
让其他类型的设备更容易解析。

举简单的例子说明。例子的参考：https://www.pluralsight.com/guides/semantic-html

默认情况下，哪些HTML标签是块级元素、哪些是内联元素？【HTML】

思考：https://blog.youkuaiyun.com/tianxintiandisheng/article/details/82715923

默认display: block/table

块状元素，独占一行。div, p, list, h1-h6, article, section, long quote.

元素宽度默认是它本身父容器的100%，可以设定。

默认display: inline/inline-block

内联元素，不会独占一行，会挨着往后排直到换行。 span, img, input, button, 以及下方说的links, em, strong,

元素的宽度是它本体，或者它所包含的文字或图片的宽度。

img, input,作为inline-block可以设定高度，其余的不可以设定。

回答：

分成 block/table 和 inline/inline-block；
分别列举种类和特点。

1. CSS

1.1 布局

【盒模型】【BFC】【float】【flex】

盒模型的宽度该如何计算？

题目：请问div1的 offsetWidth 是多大？

https://coding.imooc.com/lesson/400.html#mid=36690

理解：

我感觉他问的其实是offsetWidth的含义，MDN给出定义如下：HTMLElement.offsetWidth - MDN

The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer

Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered).

总结一下：

$offsetWidth = \left ( width + 2\cdot padding + 2\cdot border \right )$

回答：

122px，包括width，左右padding，左右border。

题目-追问：

如果想让offsetWidth等于100px，该如何做？

回答-追问：

加一个box-sizing: border-box; （默认是content-box，即为content设定宽高，而不是为border设定宽高。）

加了这一行以后，box-sizing就从默认的 content-box改成了border-box。

所以，width:100px 就不再是内容宽度（content）了，而是border-box的宽度。内容宽度会相应缩小。（测试中，从100px减小到78px）

https://coding.imooc.com/lesson/400.html#mid=36691

https://www.w3school.com.cn/cssref/pr_box-sizing.asp

margin纵向重叠的问题（很多元素纵向排列，如果有margin会有重叠的问题）

题目：AAA和BBB之间的距离是多少

理解：

相邻元素的margin-top和margin-bottom会发生重叠。如果AAA和BBB之间没有p标签，那么重叠后距离应该是15px。

空的<p></p>也会重叠。相当于被忽略掉了。(空，即border也没有，如果有border就会配置margin了）。所以还是15px。

回答：

15px，因为：

1. 中间的空内容被忽略，距离就不算了

2. margin-top和margin-bottom会发生重叠，所以答案是15.（没有BFC的话会，margin会重叠）

注意事项：把margin-bottom那一行删掉后，并不是margin-bottom为0了，而是按浏览器的默认设置赋值，如下图margin-block-end为1em，即16px。

margin负值问题（比如margin-left = -100是什么情况）

题目：对margin的 top left right bottom 设置负值，分别有什么效果？

理解：（文中“它”代指被设置margin的元素）

margin-top 负值: 它自己向上移动（被拖动n像素）

margin-left 负值: 它自己向左移动（被拖动n像素）

margin-bottom 负值: 它的下方元素向上移，它自身不受影响。

margin-right 负值: 它的右侧元素向左移，它自身不受影响。

回答：

分上下左右四种情况来回答。

上、左，是自己被拖走；下、右是自己不变，相邻元素被拖走。

BFC的理解和应用

题目：什么是BFC？有何应用？

理解：

BFC:

Block format context, 块级格式化上下文。
它是一块独立的渲染区域，内部元素的渲染不会影响边界外的元素。
- 理解：就是内部的东西不会被挤到外面，也不会受到外部的影响
  - 比如图片不会float到外面（内部的东西不会被挤到外面）；
  - 而自己的margin不会被其他类的BFC的margin重叠（不过，会和别的非BFC元素、同一个类的BFC重叠）。

举例来说，如果一个 container 包括了一个img、一段<p>，如果想让图片在文字左侧浮动：

没有style的时候他们俩是这样的：

对图片加了float:left后是这样的：

为container添加了下方“触发BFC条件”之一后：（本处使用overflow: hidden，实际上别的也可以）

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。（inline行内元素也占一行）
因此，多个Box垂直间距由margin决定。注意，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（包括块盒与行盒）的margin box的左边，与它们的包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与外部float box重叠。如右图，BFC不会伸展到float box的背后。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。（这就是为什么能完成上面例子中，把图片float到左侧的任务）

触发形成BFC的常见条件：https://zhuanlan.zhihu.com/p/25321647

理解记忆：在Normal Flow中出现的异常区域（float和absolute、fix区域、Flex），以及会导致overflow后看不到的区域。

浮动元素：float 不是 none（设置float为left等）【理解：normal flow中的float区域】
绝对定位元素：position 是 absolute或fixed （不是static 或 relative）【理解：normal flow中的绝对定位区域】
overflow 不是 visible（比如是hidden）【理解：毕竟不能真的让子元素超出就消失了】
display 是flex 或 inline-block等【理解：Flex框架】

常见应用：

清除浮动（会撑大容器），如本节的例子就是，浮动元素回到了BFC的内部。
可以实现两栏自适应布局（左边float，宽度固定；右边BFC，自适应内容宽度）https://zhuanlan.zhihu.com/p/25321647

回答：

先说明BFC是block fomatting context（块级的格式化的上下文（即区域））。有BFC特性的元素可以认为是隔离了的一个容器，内部元素的变化不影响外部。

然后讲怎么触发，可以说一下我对它们的归纳。

随后，举例子说明两个应用场景。

float布局的问题

考点：（双飞翼布局）（圣杯布局）

题目：如何实现圣杯布局和双飞翼布局？

这是PC端用float布局的经典布局，老系统中可能用了这样的布局而不是用Flex，Grid等。

目的：

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网站

https://coding.imooc.com/lesson/400.html#mid=36693

技术总结：

符合这三点就是圣杯or双飞翼布局

使用float布局
两侧使用margin的负值，以便让两侧和中间内容横向重叠。
防止中间内容被两侧覆盖，用padding预留空间，防止覆盖（也可以用margin来预留空间）

具体实现过程概要：

1. 【center先加载】注意：因为要让center的内容先加载，所以按照center、left、right这个顺序定义三个模块。

2. 【启动float】让 center \ left \ right 都float left。但是footer也因此环绕上去了，出现在了right的右侧。

3. 【清除不需要环绕的元素】footer环绕上去了，要对它设置 clear: both，即让它的左右没有float元素（所以它就会自动换到下一行了，只有这样才能让左右没有float元素。）

4. 【预留空间】设定padding或者margin来预留左右宽度的空间。

5.【左侧-1】【向上移动】margin-left: -100% 父元素container宽度值，直接拖拽到上一行中；

6. 【左侧-2】【向左移动一个自己的宽度】用right: 宽度px 向左移动一个自己的宽度（在relative下才有用，static下无用）

7. 【右侧】【一步到位】margin-right: -自己的宽度）

回答：

clearfix（清除浮动）-> 手写clearfix

题目：迅速手写一个clearfix

理解：

简单而重要。

回答：

Flex布局的问题（Flex画色子）

题目：Flex实现一个三点的色子。

理解：

实际上是指实现色子的一个面，该面显示为三点。

回答：

1.2 定位

absolute和relative分别依据什么定位？

考点：

相关：

回答：

居中对齐有哪些实现方式？（包括水平、垂直对齐）（多种方式都要了解）

考点：

相关：

回答：

1.3 图文样式

line-height的继承问题（注意，有什么坑？）（line-height的设置有几种形式？怎么去继承？）

考点：

相关：

回答：

1.4 移动端响应式

【rem】【media query】【vw/vh】

rem是什么？rem和em、px对比

考点：

相关：

回答：

如何实现响应式

考点：

相关：

回答：

1.5 CSS3

【Flex（在布局中讲）】【动画（非重点）】

关于CSS3动画（并非重点）

考点：

相关：

回答：

2. ES语法

2.1 变量类型和计算

【值类型 & 引用类型】【类型判断】【逻辑运算】

2.2 原型原型链

【class】【继承】【原型】【原型链】【instanceof】

2.3 作用域闭包

【作用域】【自由变量】【闭包】【this】

2.4 异步

【单线程】【callback】【promise】【event-loop】【async/await】【微任务/宏任务】

Promise 实例

Promise 链

处理程序（handler）返回的不完全是一个 promise，
而是返回的被称为 “thenable” 对象，它可以当做promise来对待。
无论handler是then还是catch，它返回的这个promise的state只取决于它的内容有无出错，
而它的result是handler的返回值。【返回了new Promise的见下文例外部分】

// Promise 链

// 处理程序（handler）返回的不完全是一个 promise，
// 而是返回的被称为 “thenable” 对象，它可以当做promise来对待。
// 无论handler是then还是catch，它返回的这个promise的state只取决于它的内容有无出错，
// 而它的result是handler的返回值。【返回了new Promise的见下文例外部分】

// 例子 1
const pp = Promise.resolve().then(()=>{ // 返回fulfilled状态的promise，对它调用.then
  console.log(1);   // 1
}).catch(()=>{      // then只要没报错，就返回的是fulfilled状态的promise。fullfilled状态的promise不会执行catch，所以不打印2
  console.log(2);   
}).then(()=>{
  console.log(3);   // 3
})                 // 最后将返回一个fulfilled状态的promise，因为


// 例子 2
Promise.resolve().then(()=>{
  console.log(1);   // 1
  throw new Error('error 1'); // 返回rejected的promise
}).catch(()=>{
  console.log(2);   // 2
}).then(()=>{
  console.log(3);   // 3 (因为catch中没有报错，所以返回的是fulfilled的promise，进而触发了此处的.then)
})


// 例子 3
Promise.resolve().then(()=>{
  console.log(1);   // 1
  throw new Error('error 1');
}).catch(()=>{
  console.log(2);   // 2
}).catch(()=>{      // (因为catch中没有报错，所以返回的是fulfilled的promise，无法触发.catch)
  console.log(3); 
})

例外，如果链式调用中有一步行为，则需要返回new Promise，下一个.then将在它之上调用。
注意，Promise的状态必须由resolve或者reject改变，如果没有改变则一直是pending。pending不会触发catch也不会触发then
所以下方代码是1 7 3 4 2，因为new Promise是pending状态，所以不会出发后续的.then了。

// 例外，如果链式调用中有一步行为，则需要返回new Promise，下一个.then将在它之上调用。
// 注意，Promise的状态必须由resolve或者reject改变，如果没有改变则一直是pending。pending不会触发catch也不会触发then
// 所以下方代码是1 7 3 4 2，因为new Promise是pending状态，所以不会出发后续的.then了。
new Promise((resolve, reject) => {
  console.log(1);     // 同步部分，先执行（1）
  setTimeout(() => {  
    console.log(2);   // 异步部分，宏任务，先跳过。（1,7,3,4,2）
  });
  resolve();          // 改变promise状态为fulfilled
}).then(() => {       // Promise 的处理程序（handlers）.then、.catch 和 .finally 都是异步的。可以都跳过了。跳到46行。
  console.log(3);     // 异步部分，微任务。（1,7,3）
}).then(() => {
  return new Promise((resolve, reject) => {
    console.log(4);   // 异步部分，微任务。（1,7,3,4）
  }).then(() => {     // promise状态为pending，不触发后续内容。
    console.log(5);
  });
}).then(() => {
  console.log(6);
});
console.log(7);       // 同步部分，执行。（1,7）

错误处理：Promise 链在错误（error）处理中十分强大。当一个 promise 被 reject 时，控制权将移交至最近的 rejection 处理程序（handler）。https://zh.javascript.info/promise-error-handling

// 加载图片
const loadImg = (src) => {
  // pending
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    const body = document.body;
    body.appendChild(img);
    img.onload = () => {  // 加载完之后的回调函数
      resolve(img);       // 通过resolve来改变state和value
    }
    img.onerror = () => { // 加载失败
      const err = new Error(`图片加载失败 ${src}`);// 通过reject来改变state和value
      reject(err);
    }
    img.src = src;
  })
}
 
// 演示先加载第一个图，再加载第二个图的情况。
const url1 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1741509155,1900582370&fm=26&gp=0.jpg";
const url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1423865931,1775886535&fm=26&gp=0.jpg";
 
loadImg(url1).then(img1 => {
  console.log(img1.src);
  return loadImg(url2);      // 通过串联解决回调地狱，return了promise，则后一个是这个promise了。
}).then(img2 => {
  console.log(img2.src);
}).catch(error => {          // 当一个 promise 被 reject 时，控制权将移交至最近的catch。所以可以同时catch住loadImg、第一个then、第二个then中出现的错误。
  console.error(error);
})