⑴ web前端笔试题(HTML/CSS篇)

web前端笔试题集锦(HTML/CSS篇)

导读：网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目，欢迎参考阅读。

一、HTML/CSS

1，让一个input的背景颜色变成红色

2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域

思路：

(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;

(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条

(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条

(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px

这样题目基本就完成了，不过浏览器的兼容性还不是很好。

3，IE、FF下面CSS的解释区别

(1) 让页面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的设置+text-align:center

(2) ff：不支持滤镜

ie：支持滤镜

(3) ff：支持!important

ie支持*，ie6支持_

(4) min-width,min-height

FF支持，IE不支持，IE可以用css expression来替代

(5) Css Expression

FF不支持，IE支持

(6) cursor：hand

IE下可以显示手指状，FF下不行

(7) UL的默认padding和margin

IE下ul默认有margin，FF下ul默认有padding

(8) FORM的默认margin

IE下FORM有默认margin，FF下margin默认为0

4，一个定宽元素在浏览器(IE6，IE7，Firefox)中横向居中对齐的布局，请写出主要的.HTML标签及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)

5，CSS中margin和padding的区别

margin是元素的外边框，是元素边框和相邻元素的距离

Padding是元素的内边框，是元素边框和子元素的距离

6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。

思路：

(1)布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择

(2)编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指

7，

中alt和tittle的区别

alt：图片显示不出来了就提示alt

title：鼠标划过图片显示的提示

8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。

在这里我使用了两种方式：

(1)使用position

HTML:

left

right

(2) 使用float

HTML:

固定宽度

自适应

二者的CSS公用，如下：

html,body{width:100%;height:100%;margin:0px;padding:0px;}

.container {width:100%;height:400px;position:relative;}

.fl1 {float:left;}

.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

.clear {clear:both;overflow:hidden;height:0px;}

.container2 {width:100%;height:400px;margin-top:100px;}

.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

.right2 {height:400px;background:#f9afff;}

9，解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被指定，则相对于浏览器的默认字体尺寸。

该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍

10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?

DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来

DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。

严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模式都支持，但是IE5只支持混杂模式。

可那个过DOCTYPE声明来判断哪种模式被触发

(1) 没有DOCTYPE声明的网页采用混杂模式解析

(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析

(3) 对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析

(4) 在ie6下，如果在DOCTYPE声明之前有一个xml声明比如

，采用混杂模式解析，在IE7，IE8中这条规则不生效。

(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：

区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。

常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的是边框，包围边框的是外边距。内边距，外边距，边框默认为0。

11，CSS引入的方式有哪些? link和@import的区别?

引入css的方式有下面四种

(1) 使用style属性

(2) 使用style标签

(3) 使用link标签

(4) 使用@import引入

Link和@import区别：

(1) link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS外，还可以做很多事情，如定义RSS，rel连接属性等;@import只能加载CSS

(2)加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引用的CSS会等到页面完全下载完之后才会加载

(3)兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列的浏览器IE5以上才能识别，而link没有这个问题

使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，@import不可以被DOM操作。

12，如何居中一个浮动元素?

一个浮动元素里面包含的元素可以水平居中，原理如下：

让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中

垂直居中类似，不过操作的不是left而是top

13，HTML5和CSS3的了解情况

有所了解

HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也开发出了不少基于他们的应用。

HTML5相对于原来的HTML规范有一些变化：

(1)DOCTYPE更简洁

(2)新增了一些语义化标签，如article,header,footer,dialog等

(3)新增了一些高级标签，如,,

CSS3相对于CSS2也新增了不少功能

(1) 选择器更加丰富

(2) 支持为元素设置阴影

(3) 无需图片能提供圆角

14，你怎么来实现下面这个设计图

(1) 切图

(2) 布局，采用两栏布局，分别左浮动

(3) 编写css代码

15，css 中id和class如何定义,哪个定义的优先级别高?

id：#***，***为HTML中定义的id属性

class:.***，***为HTML中定义的class属性

id比class的优先级高

16，用html实现如下表格(不如嵌套实用表格)

三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)

运行结果如下：

17，web标准网站有那些优点

(1) Web标准网站结构和布局分离，使网站的访问和维护更加容易

(2) Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好

(3) Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。

;

⑵ 谁能给我出一两道 web前端笔试题 上机题啥的，呵呵，比较常考的

[面试题] 某企业前端开发面试题

【HTML & CSS】

1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？

3. CSS引入的方式有哪些? link和@import的区别是?

4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

5. 前端页面有哪三层构成，分别是什么？作用是什么？

6. css的基本语句构成是？

7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

8. 如何居中一个浮动元素?

9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

10. 你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）

11. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

12. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

【Javascript】

1. js是什么，js和html 的开发如何结合？

2. 怎样添加、移除、移动、复制、创建和查找节点

3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

4. 面向对象编程:b怎么继承a

5. 看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );

6. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0

7. ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

8. 什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>

9. 最近看的一篇Javascript的文章是？

10. 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

11.说说YSlow(可以详细一点)

答案在参考资料里面可以找到，答案在参考资料里面可以找到，答案在参考资料里面可以找到

⑶ 腾讯WEB前端笔试题和面试题答案

腾讯WEB前端笔试题和面试题答案

能进入腾讯工作是多少人的梦想，下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”，供大家参考借鉴，希望可以帮助到有需要的朋友!

一、 耐心填一填!(每空4分，共24分)

1. 为span设置类a与b,应编写HTML代码_________。

2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。

3. ____li________标签必须直接嵌套于ul、ol中。

4. CSS属性_____margin_______可为元素设置外补丁。

5. 设置CSS属性float的值为___none_________时可取消元素的浮动。

6. 文字居中的CSS代码是____text-align:center________。

二、 精心选一选!(每题4分，共16分)

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 选出你认为最合理的定义标题的方法( C )

A. 文章标题

B.

文章标题

C.

文章标题

D. 文章标题

3. br标签在XHTML中语义为( A )

A.换行 B.强调 C.段落 D.标题

4. 不换行必须设置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表现数据时，有时候表现出来的'会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判断对或错!(每题4分，共24分)

1. CSS属性font-style 用于设置字体的粗细。 ( × )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )

5. display:inline兼容所有的浏览器。 ( √ )

6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )

;

⑷ 经典的 Web 前端或者 JavaScript 面试笔试题有哪些

一、不定项选择题（每题3分，共30分）x0dx0a1.声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（D）x0dx0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];x0dx0aB.varobj={name:”zhangsan”,show:”alert(this.name)”};x0dx0aC.varobj={name:”zhangsan”,show:function(){alert(name);}};x0dx0aD.varobj={name:”zhangsan”,show:function(){alert(this.name);}};x0dx0a2.以下关于Array数组对象的说法不正确的是（CD）x0dx0aA.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数x0dx0aB.reverse用于对数组数据的倒序排列x0dx0aC.向数组的最后位置加一个新元素，可以用pop方法x0dx0aD.unshift方法用于向数组删除第一个元素x0dx0a3.要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（A）x0dx0aA.window.status=”已经选中该文本框”x0dx0aB.document.status=”已经选中该文本框”x0dx0aC.window.screen=”已经选中该文本框”x0dx0aD.document.screen=”已经选中该文本框”x0dx0a4.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（AD）x0dx0aA.x0dx0aB.x0dx0aC.x0dx0aD.x0dx0ax0dx0ax0dx0a5.使用JavaScript向网页中输出

hello

，以下代码中可行的是（BD）x0dx0aA.x0dx0adocument.write(

hello

);x0dx0ax0dx0aB.x0dx0adocument.write(“

hello

”);x0dx0ax0dx0aC.x0dx0a

hello

x0dx0ax0dx0aD.

x0dx0ax0dx0adocument.write(“hello”);x0dx0ax0dx0a

x0dx0a6.分析下面的代码：x0dx0ax0dx0ax0dx0ax0dx0afunctionwriteIt(value){document.myfm.first_text.value=value;}x0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0a以下说法中正确的是（CD）x0dx0aA.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变x0dx0aB.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容x0dx0aC.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容x0dx0aD.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变x0dx0a7.下面的JavaScript语句中，（D）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空x0dx0aA.for(vari=0;i存储数据，是对html的补充，两者的目的不同x0dx0aC.在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同x0dx0aD.在IE浏览器里处理xml，首先需要创建ActiveXObject对象x0dx0a二、问答题x0dx0a1.列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个（10分）x0dx0a对象：x0dx0a方法：Alert()confirm()prompt()open()close()x0dx0a2.简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明（10分）x0dx0aDocument.getElementById根据元素id查找元素x0dx0aDocument.getElementByName根据元素name查找元素x0dx0aDocument.getElementTagName根据指定的元素名查找元素x0dx0a三、程序题x0dx0a1、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口；（10分）x0dx0ax0dx0ax0dx0ax0dx0afunctioncloseWin(){x0dx0a//在此处添加代码x0dx0aif(confirm(“确定要退出吗？”)){x0dx0awindow.close();x0dx0a}x0dx0a}x0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0a2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）x0dx0avarstr=“

这里是div

里面的段落

⑸ 前端远程笔试可以看吗

不可以的。
远程做笔试题,难度不大,笔试通过后,会有技术面试,面试主要围绕笔试的完成情况,以及简历中的项目经验来问,总体来说难度不大。
对于企业来说,面试是最能够考察一个应聘者能力的方式,它和笔试不同,所有问题设置和问法都具有较强的随机性,通过突然地发问,也可以考察应聘者。

⑹ 前端开发试校招笔试和社招笔试有什么区别

1、招聘对象不同。校招招的是应届生，最主要关注的是学生的综合素质和培养潜力（对于硕博要求会更高一些）；社招主要招的是往届的有工作经验的人群，比较关注的是应聘者所具备的专业技能，与所需求职位的匹配度。
2、招聘方式不同。校招采取的是前往各院校现场招聘的形式，对企业进行全面宣传，并即时面试发放offer，效率相对较高；社招主要通过各大招聘网站或人才市场以及猎头公司进行招聘，周期较长，效率相对较低。

⑺ Web前端开发笔试题

Web前端开发笔试题集锦

Web前端开发笔试题集锦：

1，截取字符串abcdefg的efg

var str = "abcdefg";

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

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

alert(efg);

}

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

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

reg.test("a1a__a1a__a1a__a1a__");

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

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

var str = "abcdefgaddda";

var obj = {};

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

var key = str[i];

if (!obj[key]) {

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);

4，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) 是否可用id代替HTML元素

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

FF：不可以

(8) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

;

⑻ web前端笔试题

1. 设置元素浮动后，该元素的 display 值是多少( A )

    A.block B. 不变 C. inline D. inline-block

2. 以下不是 canvas 的⽅方法是( D )

    A.getContext() B. fill() C. stroke() D.controller

3. 不是 input 在 html5 新的类型的是( B )

    A.datetime B. file C. color D. range

4. 对权重排序正确的是( C )

a)  .list .box p

b)  #list .box div span

c)  .list span

d)  #list #box

e)  p:last-child

f)  style

A.f>d>b>a>c>e

C. f>d>b>a>c=e

B. f>d>b>a>e>c

D. f>b>d>a>c=e

5.对 document load 和 document ready 描述正确的是( B )

    A.$(document).ready()是当页⾯所有资源全部加载完成后，执

    ⾏⼀个函数

    B.如果图⽚资源较多加载时间较长，onload 后等待执⾏的函数

    需要等待较长时间，所以⼀些效果可能受到影响

    C.onload 是当 DOM ⽂档树加载完成后执⾏⼀个函数

    D.⼀般来说 load 会比$(document).ready()较快执⾏

6.["1", "2", "3"].map(parseInt) 答案是多少( A )

    A.[1, NaN, NaN]            B. [1, 2, NaN]

    C.[NaN, NaN, NaN]      D. [1, NaN]

7.以下对 Ajax 描述不正确的是( A )

    A.readyState 属性请求的状态，当值为 3 时是正在加载

    B.使用 XML 和 XSLT 进⾏行数据交换及相关操作

    C.总共有 8 种 callback

    D.abort()⽅法，停⽌当前请求

8.var temp=null，alert(typeof temp)弹出的结果是( B )

    A.Null     B. Object     C. Undefined     D. String

1. 对XMLHttpRequest对象的open⽅方法描述错误的是(BCD)

    A.在 IE 上使⽤的是 XMLHttpRequest 对象是 ActiveXObject

    B.在 Firefox 上使用的是 XMLHttpRequest 对象是ActiveXObject

    C.XMLHttpRequest 对象只能发送 get 请求

    D.XMLHttpRequest 对象只能发送 post 请求

2. 以下哪些是 javascript 的全局函数(ABC)

    A.parseFloat     B. eval     C. setTimeout     D. alert

3. 对 http 相关内容描述正确的是(BCD)

    A.301 状态码是临时重定向

    B.get ⽅方式只能⽀支持 ASCII 字符

    C.get 在从服务器上获取资源，post 重点在向服务器发送数据

    D.HTTPS 就是 HTTP 加上加密处理理

4. 以下结果正确的是(CD)

    A.typeof undefined= undefined 和 typeof null=null

    B.typeof “hello”==string typeof 0==Boolean

    C.typeof [1,2,3]=object typeof NaN=undefined

    D.typeof {name:“李华”，age:“23”}=object

5. 以下结果正确的是(AB)

    A.zepto.js 适合移动端的开发，jQuery 适合 PC 端的开发

    B.zepto.js 不支持 ie 浏览器器

    C.vue 属于 mvc 框架

    D.v-bind 实现双向绑定

6. 对 sass 描述错误的是(BD)

    A.sass 和 scss 其实是同⼀一种东⻄，都称之为 Sass

    B.sass 可以声明变量符号为&

    C.sass 最终都将转换成 css ⽂件才被引⽤

    D. sass 不可以扩展和继承

1. ⽗级⾼宽固定，子级⽔平垂直居中怎么实现(请用 2 种 flex ⽅

法实现)?

2. 写出⼀个简单的$.ajax()的请求方式?

3. 假如移动端设备的尺寸是320px要实现每1rem=16px怎么实

现?

4.使用 Javascript 打印出 1-10000 之间的所有对称数(例如 121

1331 等)

5. angular 框架之间的通信⽅式是什么，⾄少列出三种?

6. vue 的⽣命周期有⼏个阶段，简单说说它们的作用?

阅读全文