以下是小编收集整理的web前端笔试题(HTML/CSS篇)，本文共6篇，希望对大家有所帮助。
篇1：web前端笔试题(HTML/CSS篇)
web前端笔试题集锦(HTML/CSS篇)
一、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
篇2：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该标签的名称.(注意兼容性)
篇3：前端开发工程师笔试题篇
1、下面哪个不属于W3C标准盒模型?
a.内容
b.边框
c.内边距
d.轮廓
2、下列事件哪个不属于鼠标触发的事件?
a.click
b.contextmenu
c.mouseout
d.keydown
3、一个实现搜索结果的页面，如果你想实现高亮搜索关键词，应该使用下面哪个tag?
a.
b.
c.
d.
4、浏览器在一次HTTP请求中，需要传输一个4097字节的文本数据至服务器，可以采用哪些方式?
a.存入indexdDB
b.存入COOKIE
c.放在URL参数
d.写入Session
e.使用post
f.放在Local Storage
篇4：前端开发工程师笔试题篇
1、下面哪个不是CSS中表示尺寸的单位?
a.px、%
b.em、rem
c.mm、ck
d.pt、pc
2、请在____处填写答案，从而达到题目的要求
var arr = [1, 2, 3, 4, 5];
var result = arr.sort(_______________________________).join(“+”);
console.log(result);
3、把一个字面量对象，变成某个类的实例
function Type
var a = ;
______________
// a instanceof Type === true
篇5：前端开发工程师笔试题篇
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 when Jack Ma founded the website Alibaba.com, a business-to-business portal to connect Chinese manufacturers with overseas buyers. In 20__ 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%',
'medium': '40%',
'veryHeigh': '10%',
}
金山软件笔试题目篇
1、写出你玩过的游戏及其运营商
(1)单机版
(2)游戏机版
(3)网络版
2、对以上列出的游戏进行评价，你也可以对其他了解的游戏进行评价
3、写出一款MMORPG游戏中需要完成某个任务或者过某一关，评述其优点和缺点。例如《魔兽世界》《剑侠》等等。(这一题大概的意思，具体怎么说得我记不清了)
4、50字以内写出你应聘该岗位的竞争优势。
金山软件笔试题目篇
1、下面的表格中，有些空格中有东西，有些没有东西，行和列的数字分别表示该行或该列有东西的空格的个数，小写数字表示连续，大写数字表示不连续。
请填出表中哪些空格有东西，在里面填写“有”
并写出推理过程：
2、有一起谋杀案，发生在一个家庭中，父亲、母亲、儿子、女儿四个成员中，有凶手、目击者、同谋和被害者。已知条件如下：
(1)最年轻者和被害者性别不同
(2)年龄最大的和目击者性别不同
(3)目击者和同谋性别不同
(4)凶手不是最年轻的
(5)父亲是年龄最长者
(6)被害者比同谋年轻
请问四个成员分别对应的身份?
金山软件笔试题目篇
1、有一张表，里面列出了很多种情况，A-H，因为每个题目太长记不清全部内容了，大致的说法如下：
A论坛里有很多玩家说你设计的某个游戏里面哪个门派不够强，其中一个门派还集体说要提升其门派的实力，否则就集体退出游戏。
B你的朋友告诉你游戏还是不要改，不然改了之后骂声更多。
C 客服人员反映说一个VIP玩家建议说有个门派的实力太弱了，要提升一下。
D 一个资深的游戏设计人员告诉你说某个门派的实力太弱，需要加强，但是论坛里该门派并没有类似的反应。
E 公司总裁也是你的游戏玩家，他玩过之后说有个门派实力太弱，该提升。
F 很多玩家反映有一个门派的实力过强，而你恰恰是这个门派的长老，玩过很多时间，进行了一些改进，但是你自己却发觉甚至比以前打敌人更加吃力了。
G 数据显示一个门派的玩家流失率很大，但是却没有相关评价说该门派的实力太弱。
要求对这些重视程度进行排序，然后在每一项后面写出排在该位置的理由，最后再写出你对待每一项的解决办法。
2、涂鸦：在下面画出你想画的任何涂鸦。
篇6：百度校园招聘web前端广州站笔试题
，
5. 不知道你们有没有留意，经常会用到那个清楚浏览器缓存的操作，这里说道的缓存是指代哪些数据，且描述这写数据的名字及其常用的作用?
6. 手机浏览器输入：“www.baidu.com”时候会出现一段空白时间，俗称“白屏”，请写处至少五种解决这个问题的解决方案。
7. 我们在进行组建开发的时候，精彩会需要用到大量颜色。有两种方法。方法1：预先定义好大量的颜色;方法2：自定义函数，采用随机生成颜色的方式。请采用方法2实现随机颜色汲取。
附加题：描述你认为影象最深刻的项目，从一下几个方面来描述：
1. 用到了什么新技术?
2. 遇到了什么挑战?
3. 最大的收获是什么?
文档为doc格式
