⾯试官到底想看什么样的简历？
本⼿册是基于《前端⾯试与进阶指南》的精简版，可⽤于快速突击前端⾯试的知识点。
公众号
想要实时关注笔者最新的⽂章和最新的⽂档更新请关注公众号程序员⾯试官,后续的⽂章会优先在公众号更新.
简历模板:关注公众号回复「模板」获取
《前端⾯试⼿册》:配套于本指南的突击⼿册,关注公众号回复「fed」获取
前⾔
2
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还有⼀种介乎于上述两者之间的近乎标准的模式，但是基本淘汰了。
这三种模式的区别是什么？
标准模式(standardsmode)：⻚⾯按照HTML与CSS的定义渲染
怪异模式(quirksmode)模式：会模拟更旧的浏览器的⾏为
近乎标准(almoststandards)模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），
除此之外符合标准定义
HTML、XHTML、XML有什么区别
HTML(超⽂本标记语⾔):在html4.0之前HTML先有实现再有标准，导致HTML⾮常混乱和松散
XML(可扩展标记语⾔):主要⽤于存储数据和结构，可扩展，⼤家熟悉的JSON也是相似的作⽤，但是更加轻量⾼
效，所以XML现在市场越来越⼩了
XHTML(可扩展超⽂本标记语⾔):基于上⾯两者⽽来，W3C为了解决HTML混乱问题⽽⽣，并基于此诞⽣了
HTML5，开头加⼊<!DOCTYPEhtml>的做法因此⽽来，如果不加就是兼容混乱的HTML，加了就是标准模式。
HTML⾯试题
3
什么是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>）仅有⼀型：<!DOCTYPEHTML>。
新的解析顺序：不再基于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⽂档的编码形式
<metacharset="UTF-8">
http-equiv，顾名思义，相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期
HTML⾯试题
4
＜metahttp-equiv="expires"content="Wed,20Jun201922:33:00GMT"＞
viewport，移动前端最熟悉不过，Web开发⼈员可以控制视⼝的⼤⼩和⽐例
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">
apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉，为了⾃定义评估⼯具栏的颜⾊。
<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent">
src和href的区别？
src是指向外部资源的位置，指向的内容会嵌⼊到⽂档中当前标签所在的位置，在请求src资源时会将其指向的资源
下载并应⽤到⽂档内，如js脚本，img图⽚和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处
理，知道将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在底部⽽不是头部。
href是指向⽹络资源所在位置（的超链接），⽤来建⽴和当前元素或⽂档之间的连接，当浏览器识别到它他指向的
⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。
知道img的srcset的作⽤是什么？（追问）
可以设计响应式图⽚，我们可以使⽤两个新的属性srcset和sizes来提供更多额外的资源图像和提示，帮助浏览器选择
正确的⼀个资源。
srcset定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩。
sizes定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。
所以，有了这些属性，浏览器会：
查看设备宽度
检查sizes列表中哪个媒体条件是第⼀个为真
查看给予该媒体查询的槽⼤⼩
加载srcset列表中引⽤的最接近所选的槽⼤⼩的图像
srcset提供了根据屏幕条件选取图⽚的能⼒
<imgsrc="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png200w,
clock-demo-thumb-400.png400w"
sizes="(min-width:600px)200px,50vw">
还有哪⼀个标签能起到跟srcset相似作⽤？（追问）
<picture>元素通过包含零或多个<source>元素和⼀个<img>元素来为不同的显示/设备场景提供图像版本。浏览器
会选择最匹配的⼦<source>元素，如果没有匹配的，就选择<img>元素的src属性中的URL。然后，所选图像呈现
在<img>元素占据的空间中
picture同样可以通过不同设备来匹配不同的图像资源
<picture>
HTML⾯试题
5
