Web前端主要是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发,1、html结构；2、CSS样式：盒子模型，float，定位;3、javascript里的 常用代码，运算符；表达式 ；语句 ；函数 ；对象 ；事件；变量；4、dom,bom模型，要理解“树根，枝，叶”的概念；5、flash的基本用法；Web前端工程师比网页设计师知道更多，主要制作出有用户体验的网站。这之上只是知识点，能考的很多，

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

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，解释("ElementID").""

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

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

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是提出的，所以老的浏览器不支持，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不仅对用户友好，对搜索引擎也友好。

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

5. 使用JavaScript向网页中输出

hello

，以下代码中可行的是（ BD ）A. (

hello

);B. (“

hello

”);C.

hello

D.

(“hello”);

6. 分析下面的代码：

以下说法中正确的是（ CD ）A. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变B. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容C. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容D. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变7. 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空A. for(vari=0;i< ;i++) {if(”text”)”";}B. for(vari=0;i<;i++) {if(forms[0].”text”)forms[0].”";}C. if(”text”)”";D. for(vari=0;i<; i++){for(var j=0;j<; j++){if([j].type==”text”)[j].value=”";}}8. 在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：，要求前3位是010，紧接一个“-”，后面是8位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中，（ A ）能正确实现以上功能A. var str= ;if((0,4)!=”010-”|| (4).length!=8 ||isNaN(parseFloat((4))))alert(“无效的电话号码！”);B. var str= ;if((0,4)!=”010-” && (4).length!=8 &&isNaN(parseFloat((4))))alert(“无效的电话号码！”);C. var str= ;if((0,3)!=”010-”|| (3).length!=8 ||isNaN(parseFloat((3))))alert(“无效的电话号码！”);D. var str= ;if((0,4)!=”010-”&& (4).length!=8 &&!isNaN(parseFloat((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分） 根据元素id查找元素 根据元素name查找元素 根据指定的元素名查找元素三、程序题1、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； （10分）2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）var str = “

这里是div

里面的段落

”;//varreg = /<\/?\w+\/?>/gi;varstr = “

这里是div

里面的段落

”;alert((reg,”"));3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）

4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 （15分）
城市生活都市早报青山绿水