【免费】前端面试手册，中高端前端程序员面试必备资源-CSDN文库

5星 · 超过95%的资源需积分: 0 192 浏览量 2023-03-01 00:48:40 上传评论 3 收藏 24.66MB PDF 举报

资源推荐

资源详情

资源评论

1.1
1.2
1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10
1.11
1.12
1.13
1.14
1.15
1.16
1.17
1.18
1.19
⽬录
前⾔
HTML⾯试题
CSS⾯试题
JS⾯试题
HTTP⾯试题
TCP⾯试题
DOM⾯试题
浏览器原理⾯试题
前端⼯程化⾯试题
React⾯试题
Vue⾯试题
前端安全⾯试题
webpack⾯试题
算法⾯试题
字符串类笔试题
JS笔试题
如何应对HR⾯
如何应对项⽬⾯
如何写简历
1

HTML基础

点击关注本公众号获取⽂档最新更新,并可以领取配套于本指南的《前端⾯试⼿册》以及最标准的简历模板.

doctype(⽂档类型)的作⽤是什么？✨

这三种模式的区别是什么？(接上⼀问追问)

HTML、XML和XHTML有什么区别？

什么是data-属性？

你对HTML语义化的理解？✨

HTML5与HTML4的不同之处

有哪些常⽤的meta标签？

src和href的区别？

知道img的srcset的作⽤是什么？（追问）

还有哪⼀个标签能起到跟srcset相似作⽤？（追问）

script标签中defer和async的区别？✨

有⼏种前端储存的⽅式？✨

这些⽅式的区别是什么？（追问）✨

本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。

我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题

doctype的作⽤是什么？✨

DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个

⽂档，不同的渲染模式会影响到浏览器对于CSS代码甚⾄JavaScript脚本的解析

⽂档解析类型有：

BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个

模式）

CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染⻚⾯。

IE8还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。

这三种模式的区别是什么？

标准模式(standardsmode)：⻚⾯按照HTML与CSS的定义渲染

怪异模式(quirksmode)模式：会模拟更旧的浏览器的⾏为

近乎标准(almoststandards)模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），

除此之外符合标准定义

HTML、XHTML、XML有什么区别

HTML(超⽂本标记语⾔):在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散

XML(可扩展标记语⾔):主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼

效，所以XML现在市场越来越⼩了

XHTML(可扩展超⽂本标记语⾔):基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了

HTML5，开头加⼊<!DOCTYPEhtml>的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。

HTML⾯试题

什么是data-属性？

HTML的数据属性，⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它，来达到操作数

据的⽬的。

<article

id="electriccars"

data-columns="3"

data-index-number="12314"

data-parent="cars">

...

</article>

前端框架出现之后，这种⽅法已经不流⾏了

你对HTML语义化的理解？✨

语义化是指使⽤恰当语义的html标签，让⻚⾯具有良好的结构与含义，⽐如<p>标签就代表段落，<article>代表正⽂

内容等等。

语义化的好处主要有两点：

开发者友好：使⽤语义类标签增强了可读性，开发者也能够清晰地看出⽹⻚的结构，也更为便于团队的开发和维护

机器友好：带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，语义类还可以⽀持读屏软件，根据

⽂章可以⾃动⽣成⽬录

这对于简书、知乎这种富⽂本类的应⽤很重要，语义化对于其⽹站的内容传播有很⼤的帮助，但是对于功能性的web软

件重要性⼤打折扣，⽐如⼀个按钮、Skeleton这种组件根本没有对应的语义，也不需要什么SEO。

HTML5与HTML4的不同之处

⽂件类型声明（<!DOCTYPE>）仅有⼀型：<!DOCTYPEHTML>。

新的解析顺序：不再基于SGML。

新的元素：section,video,progress,nav,meter,time,aside,canvas,command,datalist,details,embed,

figcaption,figure,footer,header,hgroup,keygen,mark,output,rp,rt,ruby,source,summary,wbr。

input元素的新类型：date,email,url等等。

新的属性：ping（⽤于a与area）,charset（⽤于meta）,async（⽤于script）。

全域属性：id,tabindex,repeat。

新的全域属性：contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck。

移除元素：acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt

有哪些常⽤的meta标签？

meta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、

关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义name。

charset，⽤于描述HTML⽂档的编码形式

<metacharset="UTF-8">

http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期

HTML⾯试题

＜metahttp-equiv="expires"content="Wed,20Jun201922:33:00GMT"＞

viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例

apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉，为了⾃定义评估⼯具栏的颜⾊。

src和href的区别？

src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源

下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处

理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。

href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的

⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。

知道img的srcset的作⽤是什么？（追问）

可以设计响应式图⽚，我们可以使⽤两个新的属性srcset和sizes来提供更多额外的资源图像和提示，帮助浏览器选择

正确的⼀个资源。

srcset定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。

sizes定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。

所以，有了这些属性，浏览器会：

查看设备宽度

检查sizes列表中哪个媒体条件是第⼀个为真

查看给予该媒体查询的槽⼤⼩

加载srcset列表中引⽤的最接近所选的槽⼤⼩的图像

srcset提供了根据屏幕条件选取图⽚的能⼒

<imgsrc="clock-demo-thumb-200.png"

alt="Clock"

srcset="clock-demo-thumb-200.png200w,

clock-demo-thumb-400.png400w"

sizes="(min-width:600px)200px,50vw">

还有哪⼀个标签能起到跟srcset相似作⽤？（追问）

<picture>元素通过包含零或多个<source>元素和⼀个<img>元素来为不同的显示/设备场景提供图像版本。浏览器

会选择最匹配的⼦<source>元素，如果没有匹配的，就选择<img>元素的src属性中的URL。然后，所选图像呈现

在<img>元素占据的空间中

picture同样可以通过不同设备来匹配不同的图像资源

HTML⾯试题

剩余163页未读，继续阅读

评论收藏

内容反馈

scldblb

2023-03-01

下载后才能评论呢~
Marigold_Docila

2023-03-02

#完美解决问题 #运行顺畅 #内容详尽

sanbaofengs

粉丝: 509
资源: 711

前端面试手册，中高端前端程序员面试必备

《程序员面试宝典》程序员面试必备

前端面试宝典

vue面试题-前端程序员必备-前端框架-大厂面试准备.docx

前端面试宝典大全.pdf

前端面试题含答案.pdf

前端面试资料，适合中高级前端面试者

程序员面试手册

web前端参考手册

前端面试题 必看--

web前端面试宝典

前端面试宝典V3.0.pdf

程序员面试手册-超级全的程序员面试题-CHM版

黑马程序员西安校区前端学科面试宝典-2019.pdf

前端面试宝典V4.0.pdf

2024前端面试八股文

程序员 必备 面试题 Accp 5.0 S2

C#、ASP面试题程序员面试必备

程序员面试笔试宝典

程序员面试笔试宝典（全）

前端面试汇总

前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue

前端程序员必备：JavaScript与ES的25个重要知识点.pdf

前端开发面试题整合（css、js、vue。react等）

内文-程序员面试手册.pdf

2020年前端面试真题（阿里、网易、滴滴等）文件为百度网盘链接永久有效

【黑马面试宝典】虐面试官神器之必备黑马程序员Android面试宝典.zip

《程序员面试笔试宝典》.part1

java程序员面试交流项目经验

PHP程序员面试宝典 笔试 (PHP版).zip

前端面试基础知识汇总

最新资源

前端面试题必看--

程序员必备面试题 Accp 5.0 S2

PHP程序员面试宝典笔试 (PHP版).zip