更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

2020年Web前端笔试题汇总

  • 发布:Web前端培训
  • 来源:web前端面试
  • 时间:2020-10-19 16:06

今天小编要跟大家分享的文章是关于2020年Web前端笔试题汇总。正在学习Web前端知识和准备换工作的Web前端工程师们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。

1、html5为什么只需要写<!doctype html>?

答:html5不是基于sgml(标准通用标记语言),不需要对dtd文件进行引用,但是需要doctype来规范浏览器的行为,

否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型

2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素有:a b span img input select strong(强调的语气)

块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素:

<br> <hr> <img> <input> <link> <meta>

鲜为人知的是:

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3、页面导入样式时,使用link和@import有什么区别?

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

补充:@import最优写法

@import的写法一般有下列几种:

@import‘style.css’//Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import“style.css”//Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh NS4不识别

@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url(“style.css”) //Windows NS4, Macintosh NS4不识别

由上分析知道,@import url(style.css)和@import url(“style.css”)是最优的选择,兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。

4、常见的浏览器内核有哪些?

使用Trident内核的浏览器:IE、Maxthon、TT、The World等;

使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

使用Presto内核的浏览器:Opera7及以上版本;

使用Webkit内核的浏览器:Safari、Chrome。

5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和html5?

新增的元素有绘画canvas,用于媒介回放的video和audio元素,本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除,此外,还新增了以下的几大类元素。

内容元素,article、footer、header、nav、section。

表单控件,calendar、date、time、email、url、search。

控件元素,Webworker, Websockt, Geolocation。

移出的元素有下列这些:

显现层元素:basefont,big,center,font, s,strike,tt,u。

性能较差元素:frame,frameset,noframes。

如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

处理兼容问题有两种方式:

1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

6、iframe有哪些优缺点?

优点:

1.用来实现长连接,在Websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于HTTP长连接的”服务器推”技术

2.跨域通信。JavaScript跨域总结与解决办法 ,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。

3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了

缺点:

1、在网页中使用框架结构最大的弊病是搜索引擎的”蜘蛛”程序无法解读这种页面。当”蜘蛛”程序遇到由数个框架组成的网页时,它们只看到框架而 无法找到链接,因此它们会以为该网站是个死站点,并且很快转身离去。对一个网站来说这无异于一场灾难。

如果你想销售产品,你需要客户;如想得到客户,你首先要让人们访问你的网站,而要做到这一点,你就非求助于搜索引擎不可。你花费了大量的时间、 精力和金钱开设了一家网上商店,却又故意不让搜索引擎检索你,这就好象开家零售商店,却将窗户全部漆成黑色,而且还不挂任何招牌一样。

2、框架结构有时会让人感到迷惑,特别是在几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外,还会分散 访问者的注意力。访问者遇到这种网站往往会立刻转身离开。他们会想,既然你的主页如此混乱,那么网站的其他部分也许更不值得浏览。

3、链接导航问题。使用框架结构时,你必须保证正确设置所有的导航链接,如不然,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架 内,这种情况下访问者便被陷住了,因为此时他没有其他地方可去。

7、label的作用是什么?是怎么使用的?

Label中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。

用法:<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox”type=”text”>

ACCESSKEY属性:

功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

用法:<Label FOR=”InputBox”ACCESSKEY=”N”>姓名</Label><input ID=”InputBox”type=”text”>

局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

8、实现不使用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?

<div style=”height:1px;overflow:hidden;background:red”></div>

9、网页验证码是干嘛的?是为了解决什么安全问题?

网页验证码介绍:”验证码”的英文表示为CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart),翻译过来就是”全自动区分计算机和人类的图灵测试”,顾名思义,它是用来区分计算机和人类的。在CAPTCHA测试中,作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题,所以回答出问题的用户就可以被认为是人类。CAPTCHA是由计算机来考人类,而不是标准图灵测试中那样由人类来考计算机,因此人们有时称CAPTCHA是一种反向图灵测试。

验证码的原理:服务器端随机生成验证码字符串,保存在内存中,并写入图片,发送给浏览器端显示,浏览器端输入验证码图片上字符,然后提交服务器端,提交的字符和服务器端保存的该字符比较是否一致,一致就继续,否则返回提示。攻击者编写的robot程序,很难识别验证码字符,顺利的完成自动注册,登录;而用户可以识别填写,所以这就实现了阻挡攻击的作用。而图片的字符识别,就是看图片上的干扰强度了。就实际的效果来说,验证码只是增加攻击者的难度,而不可能完全的防止。

10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?

盒子模型有两种,分别是ie盒子模型和标准w3c盒子模型

W3C盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

IE盒子模型的范围也包括margin、border、padding、content,和标准W3C盒子模型不同的是:IE盒子模型的content部分包含了border和pading

11、如何居中div,如何居中一个浮动元素?如何让绝对定位的div居中?

a.margin:xpx auto;

b.确定容器的宽高,这里宽度是必须的,高度可以不设,设置外层的上外边距和左外边距分别是宽高的一半。

实现居中关键在于margin设置与position:relative.

.div {

width:500px ;

height:300px;

margin: -150px 0 0 -250px;

position:relative;

left:50%;

top:50%;

}

c.position:absolute;

top: 50%;

left: 50%;只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100

12、display有哪些值?说明他们的作用?

block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

13、position的值relative和absolute的定位原点是什么?

Absolute,CSS中的写法是:position:absolute;他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

2020年Web前端笔试题汇总

Relative,CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

2020年Web前端笔试题汇总

14、display设置为inline-block时,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,所以会有间隔

解决:设置ul的font-size为0,缺陷是必须重新在li中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

a.添加新的元素 、应用clear:both;

b.父级定义overflow: auto(注意:是父级div也就是这里的div.outer) 一个对seo比较友好,另个hidden对seo不是太友好

在IE6中还需要触发hasLayout,例如zoom:1;

c.据说是最高大上的方法:after

方法:(注意:作用于浮动元素的父亲)IE6-7不支持:after,

使用zoom:1触发hasLayout

{zoom:1;} /*==for IE6/7 Maxthon2==*/

:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

d.使用br标签和其自身的html属性,<br clear=”all”/> clear=”all | left | right | one” 属性

e.父元素也设置浮动

f.父元素设置display:table盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

16、在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数字号相对更容易和Web设计的其他部分构成比例关系

使用奇数号字体不好的地方是,文本段落无法对齐

17、margin和padding分别适合什么场景使用?

何时应当使用margin:

(1)需要在border外侧添加空白时,

(2)空白处不需要有背景(色)时,

(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白(注意地方见第三点)。

何时应当使用padding

(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),

(2)空白处需要背景(色)时,

(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。

margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加,水平方向上相邻的值会相加。margin取负值时,在垂直方向上,两个元素的边界仍然会重叠。但是,此时一个为正值,一个为负值,并不是取其中较大的值,而是用正边界减去负边界的绝对值,也就是说,把正的边界值和负的边界值相加。

18、元素竖向的百分比设定是相对于容器的高度吗?

答:相对于父容器的宽度

19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容较低版本的IE?

答:一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点:

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点:

兼容各种设备工作量大,效率低下

代码累赘,会出现隐藏无用的元素,加载时间加长

其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

respond.js和css3-mediaqueries-js

20、设置元素浮动后,该元素的display值是多少?

display:block;

以上就是小编今天为大家分享的关于2020年Web前端笔试题汇总的文章,希望本篇文章能够对正在从事Web前端工作和学习的小伙伴们有所帮助,想要了解更多Web前端知识记得关注达内Web培训官网,最后祝愿小伙伴没呢工作顺利,成一名优秀的Web前端工程师。

文章来源:原创 冯梦兰 IT高级程序吸金 5月25日

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年Web前端面试问题总结之React问题
下一篇:Web前端面试必备面试题整理

2020年前端面试题汇总之算法和应用

2020年前端面试题汇总之常见性能优化

2020年前端面试题汇总之Webpack

Web前端面试必备面试题整理

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省