2024年前端最新笔试题附答案

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注！个人知乎

今天给同学们分享下前端的常见笔试题，通过这些笔试题可以检验个人知识的掌握情况，也可以提高面试时笔试题的通过率，一起看看吧！

HTML基础（一）

下列不属于标准HTML文档必须要包含是？

DOCTYPE
body
html
p

答案4

关于XHTML和HTML的区别不正确的是？

XHTML是一个基于XML的标记语言
XHTML是一个基于XML的设计语言
HTML是一种基本的WEB网页设计语音
全部都是

答案1

以下属于行内标签的是？

form
img
p
ul

答案2

创建带有id属性的DOM元素的副作用有？

会创建同名的全局变量
会造成DOM树分支过多
会增加内存负担
全部都是

答案1

下列哪些功能不可以通过Cookie来实现？

记录访问者的信息
自动识别用户
在页面之间传递信息
对数据库进行操作

答案4

关于web表单登录中用到的图形验证码的实现，一下做法正确的有？

服务器生成验证码后一方面通过图片将验证码返回给客户端，同时在服务器端保存文本的验证码，由服务器端验证输入内容是否正确。
返回浏览器的html代码中包含图形验证码和文本字符串，登录器客户端判断输入内容和页面中保存的内容是否一致。
服务器端在返回的图片和cookie中同时包含图形验证码，登录前客户端判断输入内容和cookie保存的内容是否一致
浏览器通过识别图形验证码中的内容和用户输入的内容判断是否一致。

答案1

下列哪些不是块元素？

input
ul
hr
li

答案1

以下不属于HTML置换元素的是？

img
select
input
label

答案4

关于空元素正确的是？

1.在XHTML、XML以及未来版本的HTML中，所有元素必须被关闭
2. 在开始标签中添加斜杠，比如<br />，是开启空元素的正确方法
3. <br>是关闭标签的空元素
4. 空元素是在开始标签中开启的

答案1

p元素使用正确的是？

1.This is my first paragraph.
2.<p>This is my first paragraph.</p>
3.<p>This is my first paragraph.
4.This is my first paragraph.</p>

答案2

关于HTML属性正确的是？

属性值应该只能被包括在双引号内
属性总是以名称/值对的形式出现
属性总是在HTML元素的结束标签中规定
属性值本身就含有双引号，不必加引号

答案2

img图片标签上title与alt属性的区别不正确的是？

title是关于元素的注释信息，主要是给用户解读。
alt是给搜索引擎识别，在图像无法显示时的替代吗文本
当鼠标放到文字或图片上时没有title文字显示
在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用

答案3

关于静态网页和动态网页不正确的是？

有动画的网页是动态网页
动态网页是指有后台数据参与的网页
静态网页是指没有数据交互的网页，即没有数据库参与，没有服务器端数据
动态网页中的数据是从数据库中提取的，需要有后台逻辑的支持

答案1

不属于浏览器的渲染模式的是？

非标准模式
接近标准模式
怪异渲染
标准模式

答案1

input元素的type属性的取值不可以是？

button
select
checkbox
img

答案2

新窗口打开网页，用到以下哪个值？

_self
_parent
_blank
_top

答案3

以下哪个是无序列表？

答案1

网页开发中，一般需判断浏览器类型，需通过userAgent获取浏览器内核来判断，下列说法错误的是？

IE是目前最快的浏览器
chrome是webkit内核
firefox是Gecko内核
一直到IE9，都是Trident内核

答案1

常见的浏览器内核包括？

Geckos
Trident(MSHTML)
Presto
全部都是

答案4

在HTML中嵌入PHP代码，有一下几种方法，其中错误的是？

1."<!"开头，以"! >"结束，中间为PHP操作代码
2.以<script language="php">开头，</script>结束，中间为PHP操作代码
3.以"<?php" 开头，以"?>"结束，中间为PHP代码
4.以"<?" 开头，以"?>"结束，中间为PHP代码

答案1

关于以下代码的显示结果，说法错误的是？

<input type="date" name="bday">
<input type="datetime-local" name="bdaytime">

两者都可以用来绘制日历
后者可以显示本地时间，且不可以修改
日历的样式可以通过CSS进行修改
日历标签目前可以应用于主流浏览器

答案2

属于元素事件属性的是？

onerror
onfocus
onblur
全部都是

答案4

下面有关html结构不正确的是？

1.<dl><dt></dt><dd></dd></dl>
2.<ul><li></li></ul>
3.<table><tr></tr><td></td></table>
4.<ol><li></li></ol>

答案3

请选出不正确的答案：

一个id在页面中只能使用一次
一个class可以在一个网页中多次使用
id和class都能和javascript即css一起使用
同一个id或class，都可以在一个网页中多次出现

答案1

关于HTML语义化，以下哪个说法是正确的？

语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化
语义化的HTML有利于及其的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读
Table属于过时的标签，遇到数据列表时，需尽量使用div来模拟表格
header、article、address都属于语义化明确的标签

答案4

以下几组标签中全部符合HTML5标准的是：

1.<nav><image><footer>
2.<fieldset><canvas><pre>
3.<section><audio><video>
4.<address><svg><aside>

答案3

在HTML5中，哪个元素用于组合标题元素？

headings
header
group
hgroup

答案4

下列不属于HTML5新元素的是？

viewport
nav
header
section

答案1

属于HTML5标签语义化的元素有？

header、nav、banner
article、footer
block
section

答案2、4

以下哪个选项是HTML5的dtd？

1.<!DOCTYPE xhtml>
2.<!DOCTYPE HTML5>
3.<!DOCTYPE html>
4.<DOCTYPE HTML PUBLIC>

答案3

下列哪些是HTML5相关的框架或类库？

Bootstrap
AngularJS
ReactiveJS
全部都是

答案4

关于DOCTYPE说法错误的是？

1.<!DOCTYPE>声明是HTML标签
2.<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前
3.HTML文档添加<!DOCTYPE>声明，这样浏览器才能获知文档类型
4.<!DOCTYPE>声明没有结束标签

答案1

在img元素中必须要有的属性是？

rel
src
title
alt

答案2

下面关于HTML的Doctype和严格模式与混杂模式的描述，错误的是？

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法
DOCTYPE不存在或格式不正确会导致文档以标准模式呈现
DOCTYPE声明位于文档的最前面，处于html标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

答案2

下面关于html Doctype的描述中，说法错误的是？

它的责任就是告诉浏览器文档使用哪种html或者xhtml规范
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式
不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析
不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言

答案2

设置锚点用的a标签的（）属性，label的for属性指向的是表单元素的 id 属性。

id
label
name
href

答案4

不属于浏览器渲染模式的是？

Quirk（怪异/兼容模式）
Almost Standard（近似标准模式）
Standard（标准模式）
严格模式

答案4

DOCTYPE标签声明的文档类型不包括？

严肃版本
严格版本
过渡版本
基于框架的HTML文档

答案1

在HTML5中，哪个方法用于获得用户的当前位置？

getUserPosition()
getLocation()
getPosition()
getCurrentPosition()

答案4

HTML基础（二）

关于HTML5中的自定义属性，下列哪个选项是正确的？

自定义属性以data开始，并将根据您的需求进行命名
您可以使用 JavaScript 获得这些属性的值
两项都是
两项都不是

答案2

在使用数据属性的规则时，正确的是？

数据属性应该只在没有其他合适的HTML元素或属性时使用
存储在这些属性中的数据应该是字符串类型
一个元素可以具有任意数量的数据属性，这些数据属性也可以具有任何所需要的值
以上都是

答案2

data-/dataset与getAttribute/setAttribute相比，正确的是？

两者都把属性设置到了attribute上
用data-*，不可以把所有自定义属性在dataset对象中统一管理
两项都正确
两项都不正确

答案1

确保InAPPBrowser 能被正确调用，正确答案是？

1.在调用外部资源的HTML文件的标签中加入 type="text/javascript" charset="utf-8" src="cordova.js"
2.完整调用不会出现底部返回按钮无法出现的情况
3.在调用外部资源的HTML文件的标签中要加入 type="text/javascript" charset=src="cordova.js"
4.全部正确

答案1

用iscroll实现上拉刷新、下拉刷新和加载，正确的是？

只能实现上下滑动，不能左右滑动
把页面嵌入客户端的tab下，不会阻止客户端的左右滑动
把iscroll插件中的onBeforeScrollStart: function(e) {e.preventDefault()}; 改为onBeforeScrollStart: null
全部错误

答案3

Web App 的优点，正确的是？

开发成本低
迭代速度快
能够跨平台终端
全部都是

答案4

Web App 的缺点，正确的是？

获取系统级别的通知和提醒效率低
入口临时
用户留存率低
全部都是

答案4

关于混合 APP 说法错误的是？

混合 APP 指半原生一半 Web 的混合 APP
混合 APP 受限于技术和网速等因素限制体验不如原生APP
可以直接访问 Web 的内容
新闻类 App、视频类 App 普遍都是混合 APP

答案4

下面对于Web App和 Native app 说法错误的是？

Native app 交互效果更好，可以实现更酷炫的效果
Native app 控制力更强、更能保证用户界面的一致性
Native app运行速度更快、加载时间更短
Web app 迭代更灵活、节奏更快

答案2

关于混合开发的概念不正确的是？

混合开发相等于一种框架开发
混合开发通常由"HTML5 云网站+App 应用客户端"两部分组成
同一套代码Android和IOS不能通用
混合开发是一种取长补短的开发模式，原生代码部分利用WebView插件或者其他框架为H5提供容器

答案3

关于 HTML5 和 Native 的交互，说法不正确的是？

需要开启 Webview 的 javascropt 脚本执行功能
Webview 不支持 javascript 和 Java 相互作用
需要在 HTML5 页面中注入一个 Java 对象
全部都是

答案2

关于 Hybid 开发正确的是？

是在 Native 客户端中嵌入 HTML app 的功能
Hybrid App 只适用于某些场景
微信是Hybrid开发的
全部都是

答案4

关于 Hybrid 开发的缺点，说法不正确的是？

一些周期比较短的活动页面适合用 HTML5 开发
登陆和注册做成 HTML5 版本的 App，在弱网环境下会出现加载不出来的情况
用户对 Web App 体验不满意可能是因为 HTML5 的效率和耗电问题
调整手机摄像头做成 Native 的功能，让 HTML5 调用的使用体验比较好

答案1

如何选择使用原生 APP 开发还是混合 App 开发，说法正确的是？

小需求可以选择混合 App
预算少选择原生 App
大需求选择混合 App
全部正确

答案1

打开新页面的导航栏下面有一条加载线的 APP 是哪类 App?

Web App
混合 App
原生 App
都不是

答案1

关于混合应用程序的实现原理不正确的是？

在云端代码和 JavaScript 中实现操作
在本地应用程序中添加 WebView 来显示 HTML5 内容
通过 JavaScript 来实现代码和HTML5之间的交互操作
全部正确

答案1

关于 ReactNative 说法正确的是？

ReactNative 只能用于开发 IOS/Android App
ReactNative 在 JavaScript 中用 React 抽象 Android、IOS原生的UI组件，代替DOM元素渲染
不可以用View标签取代Div标签
全部正确

答案2

不属于 ReactNative 与原生 Android 常用的通信方式的是？

通过 React 通信
通过回调函数通信
通过Promise规范实现通信
通过原生 Android 直接向 ReactNative 传递常量数据

答案1

从 ReactNative 中数据发生变化到把新的数据渲染到页面中，Reactive 生命周期函数按照执行顺序正确的是？

属性改变，依次执行componentWillRecivePros、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
状态改变，依次执行componentWillRecivePros、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
属性改变，componentWillRecivePros、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、render
状态改变，依次执行shouldComponentUpdate、componentWillRecivePros、componentWillUpdate、componentDidUpdate、render

答案1

从ReactNative中数据发生状态变化，把新的数据渲染到页面中，ReactNative生命周期函数按照执行顺序正确的是？

shouldComponentUpdate、componentWillUpdate、render、componentWillRecivePros、componentDidUpdate
componentWillRecivePros、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
componentWillRecivePros、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、render
shouldComponentUpdate、componentWillRecivePros、componentWillUpdate、render、componentDidUpdate

答案1

HTML进阶

关于CSS Sprite 不正确的是？

维护合成的图片时，最好只是往下加图片，而不要更改已有图片
图片合成很方便
背景设置时，需要得到每一个背景单元的精确位置
一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中

答案2

将CSS样式应用到元素的方式的区别，不正确的是？

内联样式不可以定义伪类和伪元素
内嵌样式的特殊性比外部样式的特殊性高
外部样式有HTTP请求
内嵌样式的重用范围是当前文档

答案2

关于超链接不正确的是？

通过使用 a 标签在HTML中创建链接
当使用命名锚时，不能创建直接跳至该命名锚的链接
通过使用href属性 - 创建指向另一个文档的链接
通过使用name属性 - 创建文档内的书签

答案2

关于HTML解析遇到script元素，说法正确的是？

不推荐将脚本放置在body标签的位置
会先执行脚本，再恢复文档的解析和渲染
会先恢复文档解析和渲染，再执行脚本
默认情况下脚本的执行是同步阻塞的

答案4

name 属性中的 generator 的含义是？

用于移动设备，可设置浏览器中的视口
标识生成页面的工具名
规定文档的关键字
规定搜索引擎如何操作文档

答案2

下列哪项不是 iframe 的优点？

iframe能够原封不动的把嵌入的网页展现出来
网页如果为了统一风格，头部和版本都一样，就可以写成同一个页面，用iframe来嵌套，可以增加代码的可重用性
如果多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
如果遇到加载缓慢对的第三方内容如图标和广告，这些问题不可以由iframe来解决

答案4

不是将CSS样式应用到元素上的方式是？

内部样式表
内嵌样式
外部样式表
内联样式

答案1

有关iframe的缺点正确的是？

样式/脚本需要额外链入，会增加请求
iframe会阻塞主页面的onload事件
代码复杂，无法被一些搜索引擎引到
全部都是

答案4

下列不属于超级链接常见表现形式的是？

下载链接
普通链接
空链接
图片链接

答案4

sessionStorage 保存数据的方法正确的是？

sesseionStorage.setItem(“键名”, “键值”)
sesseionStorage.saveItem(“键名”, “键值”)
sesseionStorage.setItem(“键值”, “键名”)
sesseionStorage.saveItem(“键值”, “键名”)

答案1

不属于将 javascript 嵌入 html 文档中的方式是？

内嵌脚本
内联脚本
外部脚本
元素属性

答案1

在下列HTML中，哪个可以添加背景颜色？

1.<body&nbsp;color="yellow">
2.<body&nbsp;bgcolor="yellow">
3.<background>yellow>/background>
4.都不可以

答案2

使用meta元素的原因是？

有些元数据信息不能被title、base、link、style或script元素描述
因为meta元素只有一个用途
因为meta元素具备4个属性
meta标签永远位于head元素内部

答案1

不属于meta属性的是？

link
charset
name
http-equiv

答案1

meta 元素可以定义文档的哪些元数据？

完善文档描述数据，提升 SEO
制定首选样式，执行重载或重定向
声明HTML文档内容所用的字符编码
全部都是

答案4

可以实现分布式相应的元素是？

id元素和img元素
coords元素和area元素
shape元素和map元素
map元素和area元素

答案4

嵌入在HTML文档中的图像格式有哪些？

GIF
JEPG
APNG
全部都是

答案4

不包含 maxlength、readonly和size的元素是？

hidden
tel
email
url

答案1

关于表格布局的弊端错误的是？

难以实现响应式
可维护性差
可访问性好
不够语义化

答案3

下列关于iframe的用途的是？

嵌入第三方内容
可用 iframe 唤起移动客户端的某个功能
能实现长轮询，可用于设备监控、文字直播等
全部都是

答案4

有关HTML iframe和frameset 的说法不正确的是？

1.iframe是内联框架，在页面生成内部框架
2.使用<iframe></iframe>添加的内容可以在展示页面中显示
3.使用frameset标签时，需要去掉外层的<body></body>标签
4.使用iframe标签时，需要去掉外层的<body></body>标签

答案4

CSS（一）

在CSS选择器当中，优先级排序正确的是？

id选择器>标签选择器>类选择器
类选择器>标签选择器>id选择器
id选择器>类选择器>标签选择器
标签选择器>类选择器>id选择器

答案3

下列定义的CSS中，权重最低的是？

#game .name
#game div
#game .name span
#game div.name

答案2

CSS 中 clear 的作用是什么？

指明该元素周围不可出现浮动元素
清除该元素父元素的所有样式
清除该元素所有样式
指明该元素的父元素周围不可出现浮动元素

答案1

CSS 默认的定位类型是？

relative
absolute
fixed
static

答案4

CSS 样式，下面哪一个元素能够达到最大宽度，且前后各有一个换行？

Square Element
Side Element
Box Element
Block Element

答案4

以下哪些动画效果无法通过贝塞尔曲线实现？

ease
linear
fade-in
ease-out

答案3

不属于 CSS 引入方式是？

内联
内嵌
导出
外链

答案3

有一个元素，需要在PC端显示而在手机端隐藏，需要使用的方法是？

visible-md-8 hidden-xs
visible-xs-8 hidden-md
visible-md-8 hidden-sm
visible-sm-8 hidden-md

答案1

关于CSS的单元，以下说法错误的是？

百分比单位始终根据父元素相应值来计算
vw、vh、em、rem都是相对单位
90deg表示顺时针旋转90度
1s=1000ms

答案1

可继承的样式属性包括？

color
background-color
margin
border

答案1

CSS优先级顺序正确的是？

!important>id>class>tag
!important>class>id>tag
!important>tag>class>id
class>!important>id>tag

答案1

要让一个元素不可见且在文档流中不占位，应该使用下面那个CSS规则？

display: none
visibility: hidden
overflow: hidden
opacity: 0

答案1

浮动会导致页面的非正常显示，以下集中清除浮动的方法，哪个是不推荐使用的？

1.父元素也设置浮动
2.在浮动元素末尾添加一个空的标签例如<div style="clear:both"></div>
3.通过设置父元素overflow值为hidden
4.给父元素添加clearfix类

答案1

以下说法正确的是？

display: hidden; 不为被隐藏的对象保留其物理空间
visibility: hidden；与 display: none; 两者没有本质上的区别
visibility: hidden；所占据的空间位置仍然存在，仅为视觉上的完全透明；
visibility: hidden；产生回流与重绘

答案3

下面属于CSS3新增属性的有？

box-shadow
text-shadow
border-radius
全部都是

答案4

关于position定位，下列说法错误的是？

fixed元素，可定位与相对浏览器窗口的指定坐标，它始终是以body为依据
absolute元素，如果它的父容器设置了position属性，并且属性值为absolute或relative，那么就会一句父容器进行偏移
relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间
fixed属性的元素在标准流中不占位置

答案3

CSS盒子模型中（）是透明的，这部分可以显示背景？

margin
border
content
padding

答案4

CSS样式，边距：10px 20px 40px 30px; 哪一个是底边距？

20px
40px
30px
10px

答案2

CSS中下面哪个属性是不可继承的？

font-family
color
border
font-size

答案3

下列哪个不是浏览器支持的锚伪类？

a:hover
a:disabled
a:link
a:active

答案2

关于CSS选择器，以下说法正确的是？

每条选择器最多只能出现1个伪类
:nth-child(an+b)中n的值从0开始
每条选择器最多只能出现2个伪元素
A+B匹配A之后所有符合B规则的元素

答案2

关于浮动元素，下面说法错误的是？

行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之下
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象
浮动元素会尽可能地向顶端对齐、向左或向右对齐

答案1

下列哪个不属于id与class之间的区别？

在class中可以定义:hover伪类，在id中不能定义
id与class具有更高的样式优先级
一个元素只能有一个id属性值，却可以拥有多个class属性值
id在文档中只能使用一次，而class可以多次使用

答案1

在鼠标移到按钮并点击时，会产生一串什么样的事件？

hover active focus
focus hover active
hover focus active
active hover focus

答案3

CSS 的英文单词全称是什么？

Colorful Style Sheet
Creative Style Sheet
Cascading Style Sheet
Computer Style Sheet

答案3

以下全部属于块级标签的是？

div/p/input/span/img
div/p/form/ul/li
div/h1/p/img/dl
span/h1/p/img/dl

答案2

关于行内元素不正确的是？

div
img
sapn
select

答案1

下述有关css属性position的属性值的描述，说法错误的是？

static 没有定位，元素出现在正常的文档流中
relative 生成相对定位的元素，相对于元素自身正常位置进行定位
absolute 生成绝对定位，相对于 static 定位以外的第一个祖先元素进行定位
fixed 生成绝对定位，相对于父元素进行定位

答案4

CSS样式，下面哪一个能够用于边距的单位？

px
pt
em
全都可以

答案4

CSS（二）

下列不是 CSS3 新特性的是？

@keyframes
font-size
@media
flex

答案2

使用什么可以实现 CSS3 动画效果？

transform
keyframes
transition
rotate3d

答案2

实现翻书效果可以使用 CSS3 的什么方法？

rotateY
translateY
scaleY
perspective(n)

答案1

下面哪个选择器不是 CSS3 才定义的？

:enabled
:only-child
:before
:checked

答案3

下列选项中不属于 CSS3 样式选择器的是？

root 选择器
id 选择器
target 选择器
empty 选择器

答案2

CSS3 中什么功能可以实现文字或图像的变形处理？

deform
scale
rotate
transform

答案4

以下是 CSS3 支持的单位有？

vw
em
%
全部都是

答案4

下面属于 CSS3 新增属性的有？

box-shadow
text-shadow
border-radius
全部都是

答案4

在 CSS3 中，以下哪个是IE浏览器（Trident内核）的私有属性前缀？

-trident
-ms
-ie
-webkit

答案2

下列 CSS3 新特性在移动端兼容性较好，我们可以在工作中使用的是？

字体大小或尺寸单位使用rem
CSS Grid Layout
Position: sticky
CSS.supports() API

答案1

first-of-type 和 first-child 的区别不正确的是？

first-of-type 匹配的元素的范围都属于同一级
first-of-type 匹配的是该类型的第一个元素，不限制是第一个子元素
first-of-type 匹配的是该类型的第一个元素，必须是第一个子元素
first-child 是结构上的第一个子元素

答案3

有两个上下相邻的div，它们的样式如下，请问它们的上下间隔是？

.div1 {width: 100px;height: 100px;margin-bottom: 30px;
}
.div2 {width: 100px;height: 100px;margin-top: 20px;
}

10px
50px
30px
20px

答案3

超链接被点击访问后，hover和active将不再起作用，下列哪种 CSS 属性的排列顺序能解决这个问题？

H-L-V-A
L-V-H-A
L-A-H-V
A-L-H-V

答案2

以下不是 box-sizing 的属性的是？

content-box
inherit
auto
border-box

答案3

关于 CSS3 动画不正确的是？

代码相对简单
在动画控制上不够灵活
兼容性不好
动画功能都可以实现

答案4

以下哪个是 animation 的属性？

animation-name
animation-duration
animatioin-timing-function
全部都是

答案4

关于媒介查询的使用方法正确的是？

@media 媒体类型 and (媒体特性) { 样式规则 }
通常在移动端使用
为了适配多屏幕，使用 rem 单位
全部正确

答案1

如果要将一个元素旋转90度，可以使用 CSS 中的哪个属性实现？

translate
transition
animation
transform

答案4

CSS（三）

下列哪个不是 CSS 预编译工具？

sass
basss
less
stylus

答案2

下列关于 Canvas 和 SVG 图形的区别说法正确的是？

Canvas 绘制的形状都能被记忆和操作
Canvas 不能使用绘制对象的相关事件处理，因为我们没有他们的参考
SVG 为了之后的操作，需要记录坐标，所以比较快速
Canvas 和分辨率无关

答案2

下述有关 border:none 和 border:0 的区别，描述错误的是？

border:none 表示边框样式无
当定义边框时，仅设置边框宽度不可以达到显示的效果
当定义了 border:node，即隐藏了边框的显示，实际就是边框宽度为0
border:0 表示边框宽度为0

答案3

Canvas 匀速属性和用 CSS 设置宽高的区别错误的是？

绘图都是在画布上进行的
CSS 控制的是画布的尺寸
CSS 控制的是容器的尺寸
画布默认宽为300px，高为150px

答案2

下面关于sass/scss和less的说法正确的是？

less和sass都是CSS预编译器，对CSS赋予了动态语言的特性
sass的安装不需要Ruby环境，是在服务器端处理的，而less是需要引入less.js来处理less代码输出css到浏览器
less和sass的变量符号都是$
less和sass都支持条件语句，可以使用if/else、for循环等。

答案1

关于 scss 正确的是？

scss 可以将 CSS 当做函数编写
可以定义变量、可以嵌套定义
scss 是 Sass语言中的一套语法扩展名
全部都是

答案

关于 Sass 和 Less 的区别不正确的是？

编译环境不一样
输出配置不同
变量名可以一样
插值语法不同

答案2

关于 Sass 说法正确的是？

需要安装 Ruby 环境，在服务端处理
Sass 的继承相当于 Less 的混合
Sass 的变量名使用 $
全部正确

答案2

以下不属于 Sass 提供输出项的是？

compact
compressed
nested
没有输出项

答案4

关于 Sass 输出项正确的是？

expanded 选项用于多行 CSS 代码
compact 选项显示简洁格式的 CSS 代码
nested 选型用于嵌套缩紧的 CSS 代码
全部正确

答案4

关于预处理器下列说法正确的是？

增强了 CSS 代码的复用性
具有很方便的 UI 模块化开发能力
能极大地提高工作效率
全部正确

答案4

关于 Sass 与 Scss 的区别不正确的是？

Scss 包含了 Sass 的特色功能
Scss 支持所有 CSS3 语法
Scss 是新语法，Sass 是旧语法
Sass 语法用分号分隔语句

答案4

哪个处理器可以进行如下运算？

body {margin: (14px/2);top: 50px + 100px;right: 80 * 10%;
}

Less
stylus
sass
都可以

答案4

属于 Stylus 颜色处理函数的是？

complement($color)
darken(color, 10%)
spin(@color, 10)
darken(@color, 10%)

答案2

下列代码使用了哪个预处理器的颜色处理函数？

$color: #0982c1;
h1 {background: $color;border: 3px solid darken($color, 50%)
}

Less
Stylus
Sass
都不是

答案3

关于 Mixins 说法正确的是？

Mixins 可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用
Sass 样式中声明 Mixins 时需要使用“@mixin”,然后后面紧跟 Mixins 的名
在 Less 中，混入是指将定义好的“ClassA”引入到另一个已经定义的“ClassB”中
全部正确

答案4

下列代码是哪个预处理器的 Mixins？

/* 声明一个Mixin叫做error */
error(borderWidth = 2px) {border: borderWidth solid #000;color: #f00;
}
/* 调用error */
.generic-error {error(); /*直接调用*/ 
}
.login-error {error(5px); /*传递参数*/ 
}

stylus
sass
less
都不是

答案1

以下属于 Sass 上的运算符的是？

字符串运算符
布尔运算法
列表运算符
全部都是

答案4

关于预处理器的继承说法不正确的是？

Sass 和 Stylus 的继承是把一个选择器的所有样式继承到另一个选择器上
CSS 预处理器语言不可以从一个选择器继承另一个选择器下的所有样式
Sass 和 Stylus 在继承另一个选择器的样式时需要使用"@extend"开始
Less 支持的继承和 Sass 与 Stylus 不一样，它不是在选择器上继承，而是将Mixins 中的样式嵌套到每个选择器里。

答案2

关于 Less 的条件语句不正确的是？

条件语句是常见的关键词if和else if之类
其实现方式是利用关键词“when”
Less 的条件语句提供了很多类型检查函数来辅助表达式，例如iscolor、isnumber、isstring、iskeyword、isurl等
Less 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式

答案1

关于循环语句不正确的是？

Sass 中使用 for 循环语句需要“@for”，并且配合“from”和“through”一起使用
Less 支持 for 循环语法
Sass 和 Stylus 还支持 for 循环语句
在 Less 中可以使用 When 来模拟出 for 循环的特性

答案2

JavaScript（一）

[“1”, “2”, “3”].map(parseInt)的返回值是什么？

[“1”, “2”, “3”]
[1, NaN, NaN]
[1, 2, 3]
[0, 1, 2]

答案2

JavaScript 中 window 对象的子对象不包含以下哪个对象？

self
history
message
document

答案3

以下代码的输出结果是：

function showCase(value) {switch(value) {case 'A':console.log('Case A');break;case 'B':console.log('Case B');break;case undefined:console.log('undefined');break;default:console.log('Do not know')}
}showCase(new String('A'))

Case B
Case A
Do not know
undefined

答案3

下面代码的输出结果是？

var two = 0.2
var one = 0.1
var eight = 0.8
var six = 0.6
console.log([two - one === one, eight - six === two])

[true, false]
[false, false]
[true, true]
other

答案1

下面代码的执行结果是什么？

var string = "string";
var number = 0;
var bool = true;
console.log(number || string);
console.log(number && string);
console.log(bool || number);
console.log(bool && number);

“string”, “string”, true, 0
“string”, 0, true, true
“string”, 0 true, 0
“string”, true, 0, 0

答案3

[typeof null, null instanceof Object] 的结果是什么？

[“object”, false]
[null, false]
[“object”, true]
other

答案1

下面代码的输入结果是？

var val = "smtg";
console.log('Value is' + (val === 'smtg') ? 'Something' : 'Nothing')

Value is Nothing
NaN
Value is Something
other

答案4

下面代码的输出结果是什么？

var name = "World!";
(function() {if (typeof name === "undefined") {var name = "Jack";console.log("Goodbye " + name)} else {console.log("Hello "+ name);}
})();

Hello undefined
Hello World
Goodbye Jack
Hello Jack

答案3

var arr = []; typeof arr 的结果是？

function
array
undefined
object

答案4

以下代码执行后，console.log的输出是？

function Foo() {console.log(this.location);
}
Foo();

当前窗口的 Location 对象
null
undefined
TypeError

答案1

如何遍历下面的 my_data 对象？

var my_data = {a: "Apple",b: "Banana",c: "Mango"
}

foreach(my_data as key => value){}
for(var i=0;i<my_data.length;i++){}
for(var key in my_data){}
全都不是

答案3

如何判断一个JS对象是否是Array，arr为要判断的对象，其中最准确的方法是？

Object.prototype.toString.call(arr) === “[object Array]”
arr.toString === “[object Array]”
arr instanceof Array
typeof(arr)

答案1

下列代码 hasOwnProperty 的作用是？

var obj = {}
...
obj.hasOwnProperty(val)

判断 obj 对象是否具有 val 的值
判断 obj 的原型对象是否具有 val 的属性
判断 obj 的原型对象是否具有 val 的值
判断 obj 对象是否具有 val 属性

答案4

下列不属于 JS 内置对象的是？

RegExp
Date
Error
Window

答案4

JS中的数字在计算机内存存储为多少Byte？

16Byte
8Byte
2Byte
4Byte

答案2

以下代码的运行结果是什么？

for(var i = 0; i < 10; i++) {setTimeout(()=> {console.log(i)},1000)
}

10个10
0至9
10个9
无限循环

答案1

下拉菜单中，用户更改表单元素 Select 中的值时，就会调用（）事件：

onChange
onClick
onFocus
onMouseOver

答案1

语句 var arr = [a,b,c,d]; 执行后，数组中arr中每项都是一个整数，下面得到其中最大整数语句不正确的是？

Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])
Math.max.apply(Math, arr)
Math.max(arr)
Marh.max(arr[0], arr[1], arr[2], arr[3])

答案3

JS 实现继承的方式，不正确的是？

关联继承
原型链继承
构造函数继承
组合继承

答案1

以下代码执行后，输出结果是？

let x = 10;
let foo = () => {console.log(x);let x = 20;x++;
}
foo();

21
抛出 ReferenceError
10
20

答案2

关于 this 的工作原理，下面 4 种情况的描述错误的是？

在全局范围内， this指向全局对象（浏览器下指window）
对象函数调用时，this指向当前对象
使用new实例化对象时，this指向新创建的对象
全局函数调用时，this指向全局函数

答案4

以下JS操作数组的方法中不能添加元素的是？

pop
push
unshift
splice

答案1

关于JS，以下选项描述错误的是？

通过 hasOwnProperty 可判断一个对象以及其原型链上是否具有指定名称的属性
在原型上扩展的可枚举方法，会被for in循环出来
使用 object.defineProperty 可向对象添加或修改属性
原型链是JS实现继承的一种模型

答案1

JS数组的方法中，哪些不能改变数组自身？

concat
splice
sort
pop

答案1

下面有关 JS 中 call 和 apply 的描述错误的是？

apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性
两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是
call传入的则是直接的参数列表。call方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象

答案3

白屏时间 first paint 和可交互时间 dom ready的关系是？

先触发 dom ready，后触发 first paint
一起触发
没关系
先触发fisrt paint，后触发 dom ready

答案4

最后一句alert的输入结果是？

var msg = "hello";
for(var i = 0; i < 10; i++) {var msg = 'hello' + i * 2 + i;
}
alert(msg);

hello27
hello30
hello189
hello

答案3

要在10秒后调用checkState，下列哪个是正确的？

window.setTimeout(checkState(), 10)
window.setTimeout(checkState, 10)
window.setTimeout(checkState(), 10000)
window.setTimeout(checkState, 10000)

答案4

下列代码的执行结果是？

console.log(([]) ? true : false);
console.log(([] == false ? true : false));
console.log(({} == false)? true : false);

true true false
false true true
true false true
true true true

答案1

JavaScript（二）

JS 定义 var a = “40”; var b = 7; 则执行 a % b会得到：

“5”
5
undefined
null

答案5

下列关于闭包描述正确的是？

闭包不耗内存，可以随意使用
闭包内变量执行后会被清除
闭包不满足链式作用域结构
(function(){})()理论上是一个闭包

答案4

下面有关浏览器中使用JS跨域获取数据的描述，说法错误的是？

域名、端口相同，协议不同，属于相同的域
使用 window.name 来进行跨域
JS 可以使用JSONP进行跨域
通过修改 document.domain 来跨子域

答案1

下面运行结果正确的是？

var a = {}, b = Object.prototype;
console.log([a.prototype === b, Object.getPrototypeOf(a) === b]);

[false, false]
[false, true]
other
[true, true]

答案2

下面代码的运行结果是？

var a = /678/, b = /678/;
console.log(a == b, a === b);

false、false
true、false
true、true
other

答案1

匹配页面中输入的字符串，范围需要是[0.5, 500]，小数位后最多保留两位，以下正则表达式不能实现该需求的是？

下面有关值类型和引用类型描述不正确的是？

值类型变量的作用域主要实在栈上分配内存空间内，而引用类型变量作用域主要在分配的堆上。
值类型数据是在栈上分配内存空间，使用效率相对较高。而引用类型数据是分配在堆上，引用类型的变量通常包含一个指向实例的指针，变量通过指针来引用。
引用类型一般都具有继承性，但是值类型一般都是封装的，因此值类型不能作为其他类型的基类。
值类型的变量赋值只是进行数据复制，创建一个同值的新对象，而引用类型变量赋值，仅仅是把对象的引用的指针赋值给变量，使它们共用一个内存地址。

答案1

以下JS代码输入的结果是？

var a = "5" + 3;
var b = "5" - 3;
console.log(a, b);

4405
error
53, 2
都不对

答案3

DOM（文件对象模型）提供了树状结构的表示方法，以下描述正确的是？

不是所有的HTML elements 都是 element nodes
Document 不是一个 document node，是一种节点格式
在 HTML element 内的 text 内容也是 text node
所有 comments 都是 document node

答案3

DOM 事件流不包括哪个阶段？

事件捕获阶段
处于目标阶段
事件冒泡阶段
事件监控阶段

答案4

下列哪项不能提高dom元素操作效率？

使用DocumentFragment替代多次appendChild操作
插入大量DOM元素时，使用innerHTML替代逐个构建元素
处理列表子元素的点击事件时，使用事件代理
使用addEventListener替代onxxx(比如onclick)进行事件绑定

答案4

在下列代码中，当点击div时，控制台输出的内容是？

<div id="a"><div id="b"></div>
</div><script>document.getElementById("a").addEventListener("click", e => {console.log(1);})document.getElementById("b").addEventListener("click", e => {e.preventDefault();console.log(2);})
</script>

1
2, 1
1,2
2

答案2

下面关于DOM事件描述错误的是？

onchange() 元素在页面的位置发生改变时触发
onreset() 表单元素被重置，比如当用户按下表单重置按钮
onclick() 鼠标点击一个元素时触发
onload() 元素被载入（文档、框架或图像）

答案1

在原生JS中，获取一个DOM节点的父节点，下面哪个方法是正确的？

element.parentNode()
element.parent()
element.parentNode
element.parent

答案3

关于 BOM 描述正确的是？

开放了一些其他接口，如获取浏览器信息
支持对窗口的操作，比如新建窗口
提供输入和输出的功能，例如网络通信
全部正确

答案4

JS 定时器不包含哪个函数？

getInterval()
clearTimeout()
setInterval()
setTimeout()

答案1

下面的单次不属于 JS 关键字的是？

void
class
with
parent

答案4

给网页添加 JS 的方式有？

使用script标签，将JS代码写在script标签之间
添加外部JS文件
使用行内JS
使用@import引入JS文件

答案4

以下 JS 中数组数据类型的方法中，不会改变原始数据的方法是？

slice
splice
reverse
shift

答案1

下列关于 JS 节点操作的函数说明中，错误的是？

nerbourNode.nextSibling 获取已知节点的下一个节点
nerbourNode.previousSibling 获取已知节点的相邻的上一个节点
nerbourNode.siblings 可以获取元素的同胞节点
parentObj.children 只选择元素节点（但IE678 会包含注释节点）

答案3

JS 中，设置浏览器兼容 event 事件的代码为？

var ev = event ? event : window.event;
event = event || window.event;
var ev = ev || window.event;
var ev = event || window.event;

答案3

下列选项中，不属于 JS 弹框的是？

alert
openToast
prompt
confirm

答案2

在 JS 中，组织冒泡的方法正确的是？

window.event.cancelBubble = false;
event.stopPropagation;
window.event.cancelBubble;
event.stopPropagation();

答案4

下列属于 JS 对象的创建方式的是？

动态原型模式
寄生构造函数模式
稳妥构造函数模式
全部都是

答案4

以下属于 JS 继承方法的是？

原型式继承
寄生式继承
寄生组合式继承
全部都是

答案4

在 JS 中，对于浏览器对象的层次关系理解错误的是？

document对象包含location对象
document对象包含form对象
location对象包含history对象
window对象时所有页面内容的根对象

答案3

JS 中提供的循环类型是？

一种，for 循环
三种，for 循环，while 循环，do…while 循环
四种，for 循环，while 循环，do…while 循环以及 loop…until循环
两种，for 循环，while 循环

答案2

下面代码的输出结果是？

a = new Array(1, 2, 4, 6, 8);
sum = 0;
for (i = 1; i < a.length; i += 2)sum += a[i];
console.log(sum);

答案2

网络基本原理

关于HTTP和HTTPS的区别错误的是？

HTTP连接很简单，是无状态的
HTTP是直接与TCP进行数据传输
HTTPS协议不需要到CA申请证书或自制证书
HTTPS是具有安全性的ssl加密

答案3

HTTP2与HTTP1.x相比的新特性有哪些？

HTTP2支持多路复用
HTTP2使用的是新的二级制格式传输，HTTP1.x是文本（字符串）传输
HTTP2支持服务器推送
全部都是

答案4

TCP/IP 将通信的过程抽象为哪4层？

应用层、接收层、网络层、网络接口层
应用层、传输层、会话层、网络接口层
应用层、传输层、网络层、网路接口层
应用层、传输层、会话层、网络层

答案3

以下关于 HTTP 安全性不足的叙述正确的是？

通信就是明文
无法证明报文完整性
没有验证通信方身份
全部都是

答案4

HTTP中，POST与GET的区别不正确的是？

get是从向服务器传送数据，post是从服务器获取数据。
get请求通过URL传输数据，而post请求的数据通过请求体传输
get传送的数据量小，不能大于2kb（因为浏览器对URL的长度有限制），post传递的数据量较大，一般被默认为不受限制
get的数据在URL中，通过历史记录，缓存很容易查到数据信息，相对不安全

答案1

以下哪项是Web应用的主动攻击模式？

SQL注入攻击
XSS
CSRF
HTTP首部注入攻击

答案1

不属于 TCP 对应的应用层协议的是？

Telnet
DNS
POP3
HTTP

答案2

关于 A 类 IP 地址说法正确的是？

第一个字节范围 128~191
是基本类
以0开头
以110开头

答案3

关于 TCP 与 UDP 的区别正确的是？

TCP保证数据正确性，UDP可能丢包，TCP保证数据顺序，UDP不保证
基于连接与无连接
对系统资源的要求，TCP较多，UDP较少
全部都是

答案4

关于 TCP 的三次握手错误的是？

是为了防止失效的数据包传送到服务器端，发生错误
发送端接收到带有确认信息的数据包后，没有返回带有ACK标志的数据包，代表握手成功
发送端首先发送一个带有SYN标志的数据包给服务器，请求建立连接
服务端收到后，会返回一个带有SYN和ACK标志的数据包传达确认信息

答案2

HTTP 中的 4xx 状态码的类别是什么？

Redirection（重定向状态码）
Client Error（客户端错误状态码）
Informational（信息性状态码）
Server Error（服务端错误状态码）

答案2

关于 HTTP 报文错误的是？

请求（request）端的报文叫请求报文
响应（response）端的报文叫响应报文
用于HTTP协议交互的信息被称为HTTP报文
请求报文由5部分组成：HTTP协议版本、状态码、原因短语、可选的响应首部与内容

答案4

不属于HTTP协议三个特征的是？

加密性
管道化
持久连接
无状态

答案1

HTTP首部包含？

通用首部
响应首部
实体首部
全部都是

答案4

不属于缓存处理过程的是？

在缓存中搜索指定资源的副本，如果命中就执行第一步
在缓存中搜索指定资源的副本，如果命中就执行第二步
对资源副本进行新鲜度检测，如果不新鲜就执行第三步
与服务器进行再验证。验证通过就更新资源副本的新鲜度，再返回这个资源副本；不通过就从服务器返回资源，再将最新资源的副本放入缓存中。

答案1

计算机网络可以分为局域网、（）、广域网。

校园网
城域网
宽带网
教室网

答案2

在TCP协议中，用来表示“确认应答”的报文码位字段是：

答案2

指出下面的 IP 地址中，哪个是 C 类地址？

127.19.0.23
193.0.25.37
225.21.0.11
170.23.0.1

答案2

下面提供 FTP 服务的默认 TCP 端口号是？

答案21

在下列网间连接器中，（）在数据连接层实现网络互连。

网桥
中继器
路由器
网关

答案1

发送数据时，数据块从结点进入到传输媒体所需要的时间称为：

传播时延
发送时延
处理时延
往返时延

答案2

在发送 TCP 接收到确认 ACK 之前，由其设置的重传计时器到时，这时发送 TCP 会：

调整传送窗口尺寸
向另一个目标端口重传数据
放弃该连接
重传重要的数据段

答案4

TCP/IP 参考模型中的主机 - 网络层对应于 OSI 中的：

数据链路层
物理层与数据链路层
物理层
网络层

答案4

SMTP 是用于：

浏览器和Web服务器之间传送报文
网管代理向网管站发送报文
从邮件服务器向客户端发送报文
在邮件服务器之间传递报文

答案4

给定某 C 类网络，需要划分 20 个子网，请问子网掩码是多少？

255.255.255.224
255.255.255.248
255.255.255.240
255.255.255.192

答案2

回收 IEEE 802.5 令牌环的数据帧的站是？

校验出错误帧的站
发送站
接收站
管理站

答案2

在帧中继网络中，帧中继通过（）协议监控PVC的状态

LMI
BECN
DLCI
PECN

答案1

HTTP协议中使用GET方法时，参数是通过什么方式传递的？

请求的header中
URL参数
请求的body中
Get请求无法传参

答案2

关于HTTP的POST方法，下列描述错误的是？

通过访问在浏览器的网址栏中输入网址，能够发出POST请求
POST的请求参数放在Requset Body中
POST方法用于提交要处理的数据
POST方法在请求时会产生两个TCP数据包

答案1

下面关于DNS说法正确的是（）

DNS的作用是域名和IP地址的相互映射
DNS的协议端口是53
DNS协议大多数运行在 TCP 协议之上
DNS的默认缓存时间为1小时

答案2

本次分享的笔试题来自 Boss 直聘 App，同学们有兴趣的话，可以去App上刷下题。后期还会把Vue、React、小程序、逻辑思维和数学运算相关试题一并同步过来，尽情期待吧！