今天小编在这给大家整理了前端开发面试笔试题，本文共10篇，我们一起来看看吧！
篇1：前端面试笔试题
前端面试笔试题
1.XHTML和HTML有什么区别
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
2.前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js;
3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
4.什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
5.HTML5 为什么只需要写 !DOCTYPE HTML？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
6.Doctype作用？标准模式与兼容模式各有什么区别?
!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
7.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和
HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
移除的.元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
8.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
9.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
篇2：前端面试笔试题
1、什么是H5?
H5=HTML5，指的是HTML超文本标记语言(HTML)的第五次重大修改，HTML的第五代。 HTML5具有的特点：
(1)、语义化的标签：好处是网站加载更快;该标签举例：header、nav、article等。
(2)、增加了音频、视频标签：好处是取代falsh;该标签举例：audio、video。
(3)、canvas标签：好处在浏览器上绘制图形或动画，取代flash。
(4)、支持手机和平板的响应式布局。
HTML5的缺点：低版本浏览器支持性不好，比如IE9以下的浏览器不支持HTML5。
2、H5为什么这么火?H5是哪一年产生的?H5会火多久?
(1)、因为H5的后台很硬，是谷歌(google)和苹果(Apple)两大巨头公司，谷歌和苹果大力倡导H5的发展，也是H5的忠实的支持者和实践者(IOS+Android系统占据手机市场92.36%)，H5的产生主要目的也是干掉flash，因为flash是adobe公司的，adobe不是W3C组织的成员之一，苹果和谷歌等万维网联盟也不希望在自己的产品中使用加载量过大的flash。
(2)、H5是9月份W3C(万维网联盟，主要有苹果和谷歌公司)组织发布的。
(3)、刷脸时代(这里专指网站用户体验更加美观的时代)+移动端时代(手机+平板)，会促使H5会在未来的有更加美好的发展前景，只要有网站，H5就会很火，UI也就很火，H5的发展会让UI更加提高用户的满意度，H5的火爆时代，会促进UI更好发展。
(4)、微信的发展，O2O的促使H5更火。
在这里不得不谈微信，如果没有微信，或许今天我们不会这样来讨论H5，微信无意中养成了用户扫码的习惯，并通过公众号的内容生.产及分发，以及微信本身已有的庞大的用户群体及社交属性，使基于网页的内容可以快速传播，真正带来了APP即浏览器的时代，取消了输入内容网址的麻烦。以微信为代表的超级社交APP，解决了网页内容浏览及分发的通路。 H5或许会没落，但会迎来H6、H7，只会变得越来越好，所以没必要担心H5会不会死，当下重在实践与积累，至少现在，Html5的影响力，会超出你我的想象，也就意味着H5的好闺蜜UI会一直火下去。
3、什么叫做响应式?
针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站。
4、针对不同屏幕的响应式，UI设计师该做几套设计图?
只做一套，大多UI设计师会使用iPhone5的尺寸来做一套(640X1136)。那么这种可以适配响应式的各种屏幕的吗?这种在HTML5中通过代码中的媒体查询来实现。媒体查询怎么写?媒体查询的具体写法如下：
@media screen and (max-width:640px) { //最大宽度是640px的屏幕宽度
nav li { //nav标签下的li标签设置样式
display: inline; //转化为行元素
}
}
1、div是什么?在div出现之前做网站用什么布局?
div是网站布局的盒子标签，div出现是table布局，因为table布局嵌套很多，网站加载慢，布局层级不清晰。
2、html是什么?css是什么?js是什么?
(1)、html是超文本标记语言，他是做网站时候用的一些文本标记标签，比如div、span等。
(2)、css是层叠样式表，是做网站的时候给标签来美化网站的样式，比如说background(背景)、color(字体颜色)、height(高度)、width(宽度)等。
(3)、js=javascript是网站中写前后台交互效果、网页动画效果的一种开发语言，比如鼠标点击事件(click)、前后台数据请求(ajax)等。
3、什么是前端工程师?什么是后端工程师?
前端工程师就是指的做静态网页的工程师：
(1)、广义的前端分为三种：安卓工程师、ios工程师、web前端工程师。
(2)、狭义的前端指的是web前端工程师，web前端工程师指的是做静态的PC端和手机端静态网页的工程师。
4、什么是静态网页?什么叫做动态网页?
(1)、静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。
(2)、动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面(后台语言是java)、asp页面(后台语言是asp.net)。
5、前端语言有哪些?后端语言有哪些?
(1)、前端语言：HTML、css、javascript。
(2)、后端语言(服务器端语言)：php、java、asp.net。最近新出的node.js
6、做一个网站的团队都需要哪些人?
(1)、产品经理：设计这个产品，通常就是了解用户的网站需求，画原型图。
(2)、项目经理：通常是对整个产品有一个整理管理和负责，通常是会代码技术的人来构建整个网站的代码框架，以后网站实现的全面管理。
(3)、UI设计师，通过原型图画psd设计图的。
(4)、前端工程师，根据设计图来做静态网页，可能是原生app的IOS和安卓工程师，或者web端的web前端工程师。
(5)、后端工程师，通常就是做java、asp.net、php的工程师来写后端逻辑的工程师。
篇3：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)。过渡的目的是帮助开发人员从老版本迁移到新版本，仍然允许使用已经废弃的元素。严格版本禁止使用废弃的元素，从而把内容和表现分隔开。
篇4：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等。
篇5：Web前端开发笔试题
1、img的alt与title有何异同?strong与em的异同?
使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息(tool tip)。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
em 是句意强调，加与不加会引起语义变化。strong 是重要性强调，和局部还是全局无关，局部强调用strong也可以，strong强调的是重要性，不会改变句意。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。
2、清除浮动的方法，各有什么特点?
1)使用空标签
2)使用overflow属性
3)使用after伪对象
篇6：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 )
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.系统出错
篇7：阿里前端开发工程师笔试题
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 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%',
'medium': '40%',
'veryHeigh': '10%',
}
篇8：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 )
A.
B.
C.
D.
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
篇9：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 )
a)
b)
c)
d)
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
篇10：前端开发工程师笔试题篇
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
文档为doc格式
