当前位置：首页 > 教学范文 > 试题试卷> Web前端开发笔试题

Web前端开发笔试题

时间：2024-01-15 08:12:40 试题试卷收藏本文下载本文

Web前端开发笔试题（精选9篇）由网友“XIE147”投稿提供，以下是小编为大家整理后的Web前端开发笔试题，欢迎阅读与收藏。

Web前端开发笔试题

篇1：Web前端开发笔试题

1、什么是web标准?

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

2、XHTML与HTML有什么区别?你觉得应该使用哪一个，并说出理由。

XHTML1.0和HTML4.01之间的主要差异是它遵守XML编码约定。

标签不能重叠,可以嵌套

标签与属性都要小写

标签都要有始有终,要么以

形式结束,要么以

形式结束

每个属性都要有属性值,并且属性值要在双引号中

别用name用id

3、请解释一下DOCTYPE的作用，有DOCTYPE和没有DOCTYPE有什么区别?

DOCTYPE声明是指HTML文档开头处的一行或两行代码，它描述使用哪个DTD。DTD(文档类型定义)是一组机器可读的规则，它们定义XML或HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。

DOCTYPE当前有两种风格，严格(strict)和过渡(transitional)。过渡的目的是帮助开发人员从老版本迁移到新版本，仍然允许使用已经废弃的元素。严格版本禁止使用废弃的元素，从而把内容和表现分隔开。

篇2：Web前端开发笔试题

1、严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式中，浏览器根据规范呈现页面;在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式，被称为DOCTYPE切换或DOCTYPE侦测。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS，如果选择了错误的DOCTYPE，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。因此一定要在每个页面上包含形式完整的DOCTYPE声明，并且在使用HTML时选择严格的DTD。

2、各种CSS样式的简写。如padding，border，font等。

篇3：Web前端开发笔试题

1、img的alt与title有何异同?strong与em的异同?

使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip)。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

em 是句意强调，加与不加会引起语义变化。strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。

2、清除浮动的方法，各有什么特点?

1)使用空标签

2)使用overflow属性

3)使用after伪对象

篇4：Web前端开发工程师笔试题

1. 在一个框架的属性面板中，不能设置下面哪一项。( C )

A.源文件 ; B.边框颜色 ;

C.边框宽度

D.滚动条

2. CSS样式表根据所在网页的位置，可分为?(B )

A.行内样式表、内嵌样式表、混合样式表

B.行内样式表、内嵌样式表、外部样式表

C.外部样式表、内嵌样式表、导入样式表

D.外部样式表、混合样式表、导入样式表

3.对于标签，其中*代表GET或( C )

A. SET

B. PUT

C. POST

D. INPUT

4. HTML代码

表示?(D )

A. 创建表格

B. 创建一个滚动菜单

C. 设置每个表单项的内容

D. 创建一个下拉菜单

5. 在表单中包含性别选项，且默认状态为“男”被选中，下列正确的是( A )

男

6. 在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线?(B )

A. A:link{TEXT-DECORATION: underline }

B. A:hover {TEXT-DECORATION: none}

C. A:active {TEXT-DECORATION: blink }

D. A:visited {TEXT-DECORATION: overline }

7. 下面代码片段，说法正确的是:(B )

.DIV1 { position:absolute;

line-height:22px;

height:58px;

background-color: #FF0000; }

A. Line-height:22px;修饰文本字体大小

B. position:absolute;表示绝对定位，被定位的元素位置固定

C. height:58px; 表示被修饰的元素距离别的元素的距离

D. background-color: #FF0000; 表示被修饰的元素的背景图像

8. 在Dreamweaver 中, 在设置各个框架属性时, 参数Scroll 是用来设置( B )属性的。

A. 是否进行颜色设置

B. 是否出现滚动条

C. 是否设置边框宽度

D. 是否使用默认边框宽度

9. 以下链接到电子邮件的正确格式是(B )

A. 邮箱

B. 邮箱

C. 邮箱

D. 邮箱

10. 若将Dreamweaver中2个横向相邻的单元格合并，则两单元格中文字会( A )

A.文字合并

B.左单元格文字丢失

C.右单元格文字丢失

D.系统出错

篇5：Web前端开发工程师笔试题

1. ID为left的DIV标签，用CSS设置DIV的左边为红色实线，下面设置正确的是 (C )

A.style=”border-top: #ff0000 1 solid;”

B.style=”border-left: 1, #ff0000 ,solid;”

C.style=”border-left: 1 #ff0000 solid;”

D.style=”border-right: 1, #ff0000, dashed;”

2. html语言中，设置表格边框宽度的标签是?(A )

3. 的意思是?(A )

A. 图像相对于周围的文本左对齐

B. 图像相对于周围的文本右对齐

C. 图像相对于周围的文本底部对齐

D. 图像相对于周围的文本顶部对齐

14. 一个有 3 个框架的 Web 页实际上有几个独立的HTML 文件?(C )

A. 2 B. 3

C. 4 D. 5

5. 下列标签可以不成对出现的是( B)

A.〈HTML〉〈/HTML〉

B.〈P〉〈/P〉

C.〈TITLE〉〈/TITLE〉

D.〈BODY〉〈/BODY〉

6. 下列那个不是CSS选择符(A )

A.p

B..td

C.#box

D.shop

7. 在CSS的三种选择符种，哪个优先级最高?( C )

A.标签选择符

B.类选择符号

C.ID选择符

8. 引入样式表的方式有几种?

引入样式表的方式有两种：方式一通过link引入，如

Type=“text/css” href=“css.css”>方法二通过import导入如import css.css

9. 关于Document对象，下列叙述正确的是(AC )

a)Document对象表示浏览器中显示的HTML文档

b)Document对象的常用属性bgcolor用来设置文档的背景图片

c)Document对象的常用方法getElementById用于访问唯一的一个元素

d)Document对象的常用方法getElementByNames

10. 在javascript 中，以下哪个变量名是非法的(B )

a)Name

b)9name

c)Name_a

d)Name9

篇6：Web前端开发工程师笔试题

1. Javascript可以在以下什么地方执行?(B )

a)服务器端的IE浏览器

b)客户端的IE浏览器

c)在服务器端的tomcat容器里

d)在客户端的tomcat容器里

2. 在javascript中，( B )变量在函数外声明，并可从脚本的任意位置访问

a)局部

b)全局

c)typeOf

d)New

3. 关于javascript说法正确的是(B )。

a)它是面向对象的

b)它是基于对象的

c)它是面向过程的

d)以上说法都不正确

4. 以下哪条语句会产生运行错误(A )

A、var obj =

B、var obj =

C、var obj =

D、var obj = //

5. 在javascript中，下拉列表框的(B )方法可从列表中删除一个元素

a)Add( )

b)Remove( )

c)Focus( )

d)blur

6. 请选择结果为真的表达式(C )

a)null instanceof Object

b)null === undefined

c)null == undefined

d)NaN == NaN

7. 在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本(AB )

8. 在javascript中，String 对象的方法不包括(D )。

a)charAt

b)substring

c)toUpperCase

d)Length

9. 下拉菜单中，用户更改表单元素Select中的值时，就会调用(A )事件处理程序。( )

a)onChange

b)onFocus

c)onMouseOver

d)onClick

10. ( C )事件处理程序可用于在用户单击按钮时执行函数

a)onSubmit

b)onChange

c)onClick

d)onBlur

篇7：Web前端开发笔试题Javascript篇

Web前端开发笔试题（Javascript篇）

判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test(“a1a__a1a__a1a__a1a__”);

截取字符串abcdefg的efg

var str = “abcdefg”;

if (/efg/.test(str)) {

var efg = str.substr(str.indexOf(“efg”), 3);

alert(efg);

}

判断一个字符串中出现次数最多的字符，统计这个次数

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数

var str = “abcdefgaddda”;

var obj = {};

for (var i = 0, l = str.length; i < l; i++) {

var key = str[i];

if (typeof obj[key] == 'undefined') {

obj[key] = 1;

} else {

obj[key]++;

}

/*遍历这个hash table，获取value最大的key和value*/

var max = -1;

var max_key = “”;

var key;

for (key in obj) {

if (max < obj[key]) {

max = obj[key];

max_key = key;

}

alert(“max:”+max+“ max_key:”+max_key);

IE与FF脚本兼容性问题

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1[“value”]

FF：可用div1.getAttribute(“value”)

(5) document.getElementByName和document.all[name]

IE;document.getElementByName()和document.all[name]均不能获取div元素

FF：可以

(6) input.type的属性

IE：input.type只读

FF：input.type可读写

(7) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

(8) 是否可用id代替HTML元素

IE：可以用id来代替HTML元素

FF：不可以

这里只列出了常见的，还有不少，就不一一列出了….

规避javascript多人开发函数重名问题

(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀

(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类名不重复就ok

javascript面向对象中继承实现

//javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

//(1)对象继承方法

Function Animal(name) {

This.nme = name;

}

Animal.prototype.getName = function() {alert(this.name)}

Var Dog = new Animal(“Buddy”);

//(1) 方法继承方法

function Animal(name) {

this.name = name;

}

Animal.prototype.getName = function() {alert(this.name)}

function Dog() {};

Dog.prototype = new Animal(“Buddy”);

Dog.prototype.constructor = Dog;

var dog = new Dog();

FF下面实现outerHTML

FF不支持outerHTML，要实现outerHTML还需要特殊处理

思路如下：

在页面中添加一个新的元素A，克隆一份需要获取outerHTML的元素，将这个元素append到新的A中，然后获取A的.innerHTML就可以了，

sdfshdfklsjdafklsajdf;lajk;dfjklsjdfk

编写一个方法求一个字符串的字节长度

/*假设：

一个英文字符占用一个字节

一个中文字符占用两个字节*/

(function getByte(str) {

var num = 0;

for (var i = 0, l = str.length; i < l; i++) {

if (str.charCodeAt(i) >255) {

num += 2;

} else {

num++;

}

alert(num);

})(“你好，John!”)

编写一个方法去掉一个数组的重复元素

Array.prototype.unique = function() {

var ret = [];

var o = {};

for(var i=0, len=this.length; i

if(!o[this[i]]){

ret.push(this[i]);

o[this[i]] = this[i];

}

return ret;

}

var arr = [1,2,3,1,1,3,3,4,5,6,5,5,5,5,7,8,9,10,9,9,9];

var unique = arr.unique();

console.log(unique); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

获取一个数组中的重复项

var arr = [1,2,3,1,1,3,3,4,5,6,5,5,5,5,7,8,9,10,9,9,9];

Array.prototype.delete = function() {

var arr = this;

var obj = {};

var delArr = [];

for (var i = 0, l=arr.length; i < l;)

{

var key = arr[i];

if (typeof obj[key] == 'undefined')

{

obj[key] = “1”;

i++;

continue;

}

delArr.push(arr.splice(i, 1)[0]);

var l = arr.length;

}

return delArr;

}

var delArr = arr.delete();//[1, 1, 3, 3, 5, 5, 5, 5, 9, 9, 9]

写出3个使用this的典型应用

//(1)在html元素事件属性中使用，如

//(2)构造函数

function Animal(name, color) {

This.name = name;

this.color = color;

}

//(3)

Var btn = document.getElementById(“text”);

Btn.onclick = function() {

Alert(this.value); //此处的this是按钮元素

}

//(4)CSS expression表达式中使用this关键字

div element

如何显示/隐藏一个DOM元素?

Ele.style.display =””;

Ele.style.display =”none”;

Ele是要操作的DOM元素

JavaScript中如何检测一个变量是一个String类型?请写出函数实现

/*Str有两种生成方式：

(1)Var str = “hello world”;

(2)Var str2 = new String(“hello world”);*/

function isString(str) {

if (typeof str == “string” || str.constructor == String) {

return true;

}

Return false;

}

网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”

补充代码，是鼠标单击后Button1到Button2的后面

function addAfterButton2(obj) {

var clone = obj.cloneNode(true);

var parent = obj.parentNode;

parent.appendChild(clone);

parent.removeChild(obj);

}

JavaScript有哪几种数据类型

简单：Number，Boolean，String，Null，Undefined

复合：Object，Array，Function

下面css标签在JavaScript中调用应如何拼写，border-left-color，-moz-viewport

borderLeftColor

mozViewport

JavaScript中如何对一个对象进行深度clone

深度clone

function Object.prototype.cloneAll(){

function clonePrototype() {

clonePrototype.prototype = this;

var obj = new clonePrototype();

for(var ele in obj) {

if(typeof(obj[ele]) == 'object') obj[ele] = obj[ele].cloneAll();

}

return obj;

}

浅度clone

var obj = new Object();

obj.name = “zjl”;

Object.prototype.getName = function() {alert(this.name);}

Object.prototype.cloneDeep = function() {

var clone = {};

for (var key in this) {

clone[key] = this[key];

}

return clone;

}

console.log(obj);

var clone = obj.cloneDeep()

console.log(clone);

如何控制alert中的换行

\n alert(“p\np”);

请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性)

篇8：Web前端开发工程师笔试题 CSS+Javascript

Web前端开发工程师笔试题 CSS+Javascript

1. 在一个框架的属性面板中，不能设置下面哪一项。（ C ）

A．源文件 ; B．边框颜色 ;

C．边框宽度

D．滚动条

2. CSS样式表根据所在网页的位置，可分为?(B )

A．行内样式表、内嵌样式表、混合样式表

B．行内样式表、内嵌样式表、外部样式表

C．外部样式表、内嵌样式表、导入样式表

D．外部样式表、混合样式表、导入样式表

3.对于

表示？(D )

A. 创建表格

B. 创建一个滚动菜单

C. 设置每个表单项的内容

D. 创建一个下拉菜单

5. 在表单中包含性别选项，且默认状态为“男”被选中，下列正确的是（ A ）

A．男

B．男

C．男

D．男

6. 在CSS中下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下划线？(B )

A. A:link{TEXT-DECORATION: underline }

B. A:hover {TEXT-DECORATION: none}

C. A:active {TEXT-DECORATION: blink }

D. A:visited {TEXT-DECORATION: overline }

7. 下面代码片段，说法正确的是:(B )

.DIV1 { position:absolute;

line-height:22px;

height:58px;

background-color: #FF0000; }

A. Line-height:22px;修饰文本字体大小

B. position:absolute;表示绝对定位，被定位的元素位置固定

C. height:58px; 表示被修饰的元素距离别的元素的距离

D. background-color: #FF0000; 表示被修饰的元素的背景图像

8. 在Dreamweaver 中, 在设置各个框架属性时, 参数Scroll 是用来设置（ B ）属性的。

A. 是否进行颜色设置

B. 是否出现滚动条

C. 是否设置边框宽度

D. 是否使用默认边框宽度

9. 以下链接到电子邮件的正确格式是(B )

A. 邮箱

B. 邮箱

C. 邮箱

D. 邮箱

10. 若将Dreamweaver中2个横向相邻的单元格合并，则两单元格中文字会（ A ）

A．文字合并

B．左单元格文字丢失

C．右单元格文字丢失

D．系统出错

11. ID为left的DIV标签，用CSS设置DIV的左边为红色实线，下面设置正确的是 (C )

A．style=”border-top: #ff0000 1 solid;”

B．style=”border-left: 1, #ff0000 ,solid;”

C．style=”border-left: 1 #ff0000 solid;”

D．style=”border-right: 1, #ff0000, dashed;”

12. html语言中，设置表格边框宽度的标签是？(A )

13. 的意思是？(A )

A. 图像相对于周围的文本左对齐

B. 图像相对于周围的文本右对齐

C. 图像相对于周围的文本底部对齐

D. 图像相对于周围的文本顶部对齐

14. 一个有 3 个框架的 Web 页实际上有几个独立的HTML 文件？（C ）

A. 2 B. 3

C. 4 D. 5

15. 下列标签可以不成对出现的是（ B）

A．〈HTML〉〈/HTML〉

B．〈P〉〈/P〉

C．〈TITLE〉〈/TITLE〉

D．〈BODY〉〈/BODY〉

16. 下列那个不是CSS选择符(A )

A．p

B．.td

C．#box

D．shop

17. 在CSS的三种选择符种，哪个优先级最高？( C )

A．标签选择符

B．类选择符号

C．ID选择符

18. 引入样式表的方式有几种？

引入样式表的方式有两种：方式一通过link引入，如 Type=“text/css” href=“css.css”>方法二通过import导入如import css.css

19. 关于Document对象，下列叙述正确的'是（AC ）<选择两项>

a) Document对象表示浏览器中显示的HTML文档

b) Document对象的常用属性bgcolor用来设置文档的背景图片

c) Document对象的常用方法getElementById用于访问唯一的一个元素

d) Document对象的常用方法getElementByNames（）

20. 在javascript 中，以下哪个变量名是非法的（B ）

a) Name

b) 9name

c) Name_a

d) Name9

21. Javascript可以在以下什么地方执行？(B )

a) 服务器端的IE浏览器

b) 客户端的IE浏览器

c) 在服务器端的tomcat容器里

d) 在客户端的tomcat容器里

22. 在javascript中，( B )变量在函数外声明，并可从脚本的任意位置访问

a) 局部

b) 全局

c) typeOf

d) New

23. 关于javascript说法正确的是（B ），

a) 它是面向对象的

b) 它是基于对象的

c) 它是面向过程的

d) 以上说法都不正确

24. 以下哪条语句会产生运行错误(A )

A、var obj = ()

B、var obj = []

C、var obj = {}

D、var obj = //

25. 在javascript中，下拉列表框的（B ）方法可从列表中删除一个元素

a) Add( )

b) Remove( )

c) Focus( )

d) blur（）

26. 请选择结果为真的表达式(C )

a) null instanceof Object

b) null === undefined

c) null == undefined

d) NaN == NaN

27. 在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本(AB )

28. 在javascript中，String 对象的方法不包括（D ）。

a) charAt()

b) substring()

c) toUpperCase()

d) Length

29. 下拉菜单中，用户更改表单元素Select中的值时，就会调用（A ）事件处理程序。( )

a) onChange

b) onFocus

c) onMouseOver

d) onClick

30. ( C )事件处理程序可用于在用户单击按钮时执行函数

a) onSubmit

b) onChange

c) onClick

d) onBlur

31. 下列选择中写法正确的有（ A）；

< javascript language=”javascript”>

< javascript SCRIPT =”javascript” >

篇9：阿里前端开发工程师笔试题

1、补充下面的函数，判断p为Array

function isArray(p){

return Object.prototype._____.apply(p)==='_____';

}

2、请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

3、实现一个程序，输入为一段英文文本，示例如下：

Alibaba Group Holding Limited is a Chinese e-commerce company that provides consumer-to-consumer, business-to-consumer and business-to-business sales services via web portals. It also provides electronic payment services, a shopping search engine and data-centric cloud computing services. The group began in 1999 when Jack Ma founded the website Alibaba.com, a business-to-business portal to connect Chinese manufacturers with overseas buyers. In 20xx, two of Alibaba’s portals handled 1.1 trillion yuan ($170 billion) in sales.

统计这段文本中单词的出现频率、分布区间，要求如下：

1. 仅统计英文单词，1999 $170 1.1 标点符号之类的不算做单词

2. 区间分 4个：少(出现1-5次)、中(出现6-10次)、高(出现 11-20)，极高(出现 >20 次) ，给出每个区间单词数目在总单词数中的百分比

3. 返回如下的 JSON 对象：

{

'occurrence': [/ 数据元素的第一个元素为单词，第二个位出现次数/

['alibaba', 10]

['consumer', 10]

['business', 8]

'distribution': {

'high': '30%',

'low': '20%',