web前端开发有笔试吗 web前端笔试题(HTML/CSS篇)

web前端开发有笔试吗 web前端笔试题(HTML/CSS篇)很多朋友对这方面很关心，我爱编程网整理了相关文章，供大家参考，一起来看一下吧！

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 前端或者 JavaScript 面试笔试题有哪些？

一、不定项选择题 （每题3分，共30分）
1. 声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:”zhangsan”,show:”alert(this.name)”};
C. var obj = {name:”zhangsan”,show:function(){alert(name);}};
D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};
2. 以下关于Array数组对象的说法不正确的是（ CD ）
A. 对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数
B. reverse用于对数组数据的倒序排列
C. 向数组的最后位置加一个新元素，可以用pop方法
D. unshift方法用于向数组删除第一个元素
3. 要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ）
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
4. 点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（ AD ）
A. <input type=”button” value=”new”
onclick=”open(‘new.html’, ‘_blank’)”/>
B. <input type=”button” value=”new”
onclick=”window.location=’new.html’;”/>
C. <input type=”button” value=”new”
onclick=”location.assign(‘new.html’);”/>
D. <form target=”_blank”action=”new.html”>
<inputtype=”submit” value=”new”/>
</form>
5. 使用JavaScript向网页中输出<h1>hello</h1>，以下代码中可行的是（ BD ）
A. <scripttype=”text/javascript”>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=”text/javascript”>
document.write(“<h1>hello</h1>”);
</script>
C. <scripttype=”text/javascript”>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=”text/javascript”>
document.write(“hello”);
</script>
</h1>
6. 分析下面的代码：
<html>
<head>
<script type=”text/javascript”>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”myfm”>
<input type=”text” name=”first_text”>
<input type=”text” name=”second_text”>
</form>
</body>
</html>
以下说法中正确的是（ CD ）
A. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变
7. 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：010-82668155，要求前3位是010，紧接一个“-”，后面是8位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中，（ A ）能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码！”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
9. 关于正则表达式声明6位数字的邮编，以下代码正确的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理，以下说明正确的是（ BCD ）
A. Xml是种可扩展标记语言，格式更规范，是作为未来html的替代
B. Xml一般用于传输和存储数据，是对html的补充，两者的目的不同
C. 在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同
D. 在IE浏览器里处理xml，首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 （10分）
对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 （10分）
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； （10分）
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）
var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>
3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<script type=”text/javascript” >
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name=”form1″ >
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>
</body>
</html>
4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 （15分）
<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>

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

、定项选择题 （每题3共30）
1. 声明象给加name属性show显示其name值代码确（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:zhangsan,show:alert(this.name)};
C. var obj = {name:zhangsan,show:function(){alert(name);}};
D. var obj = {name:zhangsan,show:function(){alert(this.name);}};
2. 关于Array数组象说确（ CD ）
A. 数组数据排序用sort函数排序效非预期给sort函数加排序函数参数
B. reverse用于数组数据倒序排列
C. 向数组位置加新元素用pop
D. unshift用于向数组删除第元素
3. 要页面状态栏显示已经选该文本框列JavaScript语句确（ A ）
A. window.status=已经选该文本框
B. document.status=已经选该文本框
C. window.screen=已经选该文本框
D. document.screen=已经选该文本框
4. 点击页面按钮使打新窗口加载网页JavaScript代码行（ AD ）
A. button value=new
onclick=open(‘new.html’, ‘_blank’)/>
B. button value=new
onclick=window.location=’new.html’;/>
C. button value=new
onclick=location.assign(‘new.html’);/>
D. _blankaction=new.html>
submit value=new/>

5. 使用JavaScript向网页输
hello
代码行（ BD ）
A. text/javascript>
document.write(
hello
);

B. text/javascript>
document.write(
hello
);

C. text/javascript>

hello

D.

text/javascript>
document.write(hello);

6. 析面代码：

text/javascript>
function writeIt (value) { document.myfm.first_text.value=value;}

#ffffff>
myfm>
text name=first_text>
text name=second_text>

说确（ CD ）
A. 页面第二文本框输入内容鼠标离第二文本框第文本框内容变
B. 页面第文本框输入内容鼠标离第文本框第二文本框复制第文本框内容
C. 页面第二文本框输入内容鼠标离第二文本框第文本框复制第二文本框内容
D. 页面第文本框输入内容鼠标离第文本框第二文本框内容变
7. 面JavaScript语句（ D ）实现检索前页面表单元素所文本框并全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==text)
form1.elements.value=";}
B. for(vari=0;i
if(forms[0].elements.type==text)
forms[0].elements.value=";
}
C. if(document.form.elements.type==text)
form.elements.value=";
D. for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==text)
document.forms.elements[j].value=";
}
}
8. 表单(form1)文本框元素(fname)用于输入电号码格式：010-82668155要求前3位010紧接-面8位数字要求提交表单根据述条件验证该文本框输入内容效性列语句（ A ）能确实现功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=010-|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(效电号码);
B. var str= form1.fname.value;
if(str.substr(0,4)!=010- && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(效电号码);
C. var str= form1.fname.value;
if(str.substr(0,3)!=010-|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(效电号码);
D. var str= form1.fname.value;
if(str.substr(0,4)!=010-&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(效电号码);
9. 关于则表达式声明6位数字邮编代码确（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(\d{6});
10. 关于JavaScriptxml处理说明确（ BCD ）
A. Xml种扩展标记语言格式更规范作未html替代
B. Xml般用于传输存储数据html补充两者目同
C. JavaScript解析处理xml数据浏览器同其做同
D. IE浏览器处理xml首先需要创建ActiveXObject象
二、问答题
1. 列举浏览器象模型BOM用至少4象并列举window象用至少5 （10）
象：Window document location screen history navigator
：Alert() confirm() prompt() open() close()
2. 简述列举文档象模型DOMdocument用查找访问节点并做简单说明 （10）
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定元素名查找元素
三、程序题
1、补充按钮事件函数确认用户否退前页面确认关闭窗口； （10）

text/javascript >
function closeWin(){
//处添加代码
if(confirm(确定要退)){
window.close();
}
}

buttonvalue=关闭窗口onclick=closeWin()/>

2、写简单描述html标签（带属性始标签结束标签）则表达式并字符串html标签除掉（15）
var str = div

面段落

;
//
text/javascript>
varreg = /<\/?\w+\/?>/gi;
varstr = div

面段落

;
alert(str.replace(reg,"));

3、完foo()函数内容要求能够弹框提示前选第几单选框（10）

Content-Type content=text/html;charset=utf-8″ />

text/javascript >
function foo() {
//处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i
if(rdo.checked){
alert(您选择第+(i+1)+单选框);
}
}
}

form1″ >
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
submit/>

4、完函数showImg()要求能够态根据拉列表选项变化更新图片显示 （15）

text/javascript >
function showImg (oSel) {
//处添加代码
var str = oSel.value;
document.getElementById(pic).src= str+.jpg;
}

picsrc=img1.jpgwidth=200″ height=200″ />

sel>
img1>城市
img2>都市早报
img3>青山绿水

以上就是我爱编程网为大家带来的web前端开发有笔试吗 web前端笔试题(HTML/CSS篇)，希望能帮助到大家！