没有合适的资源?快使用搜索试试~ 我知道了~
大厂内部资料,格式排版严谨精细,内容经验案例丰富
资源推荐
资源详情
资源评论
2
开课吧web全栈架构师
前�
⾯试官到底想看什么样的简历?
本�册是基于《前端�试与进阶指南》的精简版,可�于快速突击前端�试的知识点。
公众号
想要实时关注笔者最新的�章和最新的�档更新请关注公众号程序员⾯试官,后续的�章会优先在公众号更新.
简历模板: 关注公众号回复「模板」获取
《前端⾯试⼿册》: 配套于本指南的突击�册,关注公众号回复「fed」获取
3
开课吧web全栈架构师
HTML�试题
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,加了就是标准模式。
4
开课吧web全栈架构师
HTML�试题
什么是data-属性?
HTML的数据属性,�于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它,来达到操作数
据的�的。
前端框架出现之后,这种�法已经不流�了
你对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�档的编码形式
http-equiv,顾名思义,相当于http的�件头作�,�如下�的代码就可以设置http的缓存过期�期
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
<meta charset="UTF-8" >
5
开课吧web全栈架构师
HTML�试题
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提供了根据屏幕条件选取图�的能�
还有哪⼀个标签能起到跟srcset相似作⽤?(追问)
<picture> 元素通过包含零或多个 <source> 元素和�个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会
选择最匹配的� <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的URL。然后,所选图像呈现在
<img> 元素占据的空间中
picture同样可以通过不同设备来匹配不同的图像资源
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<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">
<picture>
剩余164页未读,继续阅读
资源评论
五味书屋
- 粉丝: 101
- 资源: 45
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功