第1页 / 共20页
第2页 / 共20页
第3页 / 共20页
第4页 / 共20页
第5页 / 共20页
第6页 / 共20页
第7页 / 共20页
第8页 / 共20页
百度web前端笔试面试题目.doc
随着各大互联网公司设立了 Web 前端开发工程师、设计工程师等职位，web 前端
越来越得到互联网企业的认可。而且其重视程度与地位也随着浏览器 端的富客户端
的体现而日益提高。 眼前对 HTML5 的未来和走向，业内的预测是会和 Flash、
Silverlight 等相结合，从而取代传统的客户端应用程序。而实现这个目标的客户端核
心工作是有 Web 前端工程师来完成的。 从另一个角度，对于 web 产品来说，交互
和用户体验是产品的第一价值，这部分价值的体现就是在 web 前端。可以说 web
前端是一个 web 产品的长相和谈 吐、行为。
下面就简单的说明一下 web 前端的组成部分。
1. UI 设计部分
这是 web 产品化的第一步。这个部分通常在稍大型的公司里，被单独设立为一个
部门或者一些人来工作。主要是要掌握 Photo, AI,可以很快的将创意转化为平面设
计图，并制作 PNG 等小图片。 同时，UI 设计还要预包含用户交互设计的元素，如
何和用户交互的基本原型等。
2. HTML/CSS,页面静态化
这是 web 产品化的 2 步，就是将 UI 设计师的设计图切成静态页面。这里的“切”不是
单纯的切，而是使用 css 里面背景色和边框样式等方式对设计原稿 进行解读，并形
成符合 web 标准的 html 代码。这里 web 前端还需要将图片、html 页面以及 css 样
式进行合理的文件分布安排等
3.Javascript, AS 客户端动态化
这是 web 产品化的 3 步，工程师使用 DOM 操作、AJAX，实现数据和服务端的通
信以及本地样式的切换。同时，由于 Javascript、 AS 是一门动态语言，所以这部
分的编码要求 web 前端工程师有较好的编码习惯，能写高效率的 OOP 代码，并对
代码进行压缩上线以降低带宽消耗等。
4.Flash、Silverlight、Video 多媒体化
这部分针对不同 web 产品有不同的要求，通常要求是可以使用 Flash 和 web、Server
进行交互，并对 Flash 进行设计与开发。
5.PHP、Java 等 CGI, 服务端通信基本知识和编码
这部分主要是更好的使用 Ajax 等技术，了解服务端的工作方式将更有利于 web 前
端工程师工作的开展。通常优秀的 web 前端工程师都是对服务端的一 种开发语言
很了解。
6．web 开发脚本开发环境用什么、调试用什么
试过 aptana，现在就用 editplus
调试肯定用 firebug，ie 下看页面 DOM 用 IEInspector
web 前端产品的开发流程
答:首先根据产品的定位、用户群，确定配色，然后纸上设计整体布局，然后 png 或
者 psd 出效果图，切出需要的小图片，然后手写代码 div+css 构造出 页面，然后根
据功能写脚本参考 126 邮箱首页，将所有小图片放到一个图片中，通过 css 的
background-position 实现页面，还是为了优化，减少 http 连接数
规避 javascript 多人开发函数重名问题
答:首先是通过命名规范，比如根据不同的开发人员实现的功能，在函数名加前缀，
虽然函数名看起来复杂，发布的时候还是可以替换，从而优化。
还有一种办法是，每个开发人员都把自己的函数封装到类中，然后调用的时候即使
函数名相同，但是因为是要类.函数名来调用，所以也减少了重复的可能性。
IE、FF 下面 CSS 的解释区别
答： 1.png 透明背景，FF 下面没有问题，IE 需要用滤镜通道
2.z-index 在 IE、FF 下面的解释问题，
IE 会认为第一个 z-index=0
3.长字符串，word-wrap:break-all 可以解决 IE，但是 FF 需要 overflow:hidden 才行
冯舒娅补充：
1、有些标签在 ff 中不能用，比如 button
2、滤镜
3、鼠标 cursor:hand cursor:pointer
4、div 的高度自适应
5、对 box 模型解析不一样
6、ul、ol 的 padding 和 margin
IE 都能识别*，标准浏览器（如 FF）不能识别*；
IE6 能识别*，但不能识别 !important；
IE7 能识别*，也能识别 !important；
FF 不能识别*，但能识别 !important；
例如 style=”*width:10px;!important width:20px;”
这样在 IE6 下宽度为 10px,在 IE7 下宽度时 20px
web 前端技术的展望
答：javascript ajax；flash AS；Flex；Silverlight
4 用脚本写去除字符串的前后空格
String.prototype.trim = function(mode)
{//前后去空格
if (mode==’left’) {
return ((this.charAt(0) == ” “ && this.length > 0) ? this.slice(1).trim(’left’) : this);
} else
if (mode == ’right’) {
return ((this.charAt(this.length - 1) == ” “ && this.length > 0) ? this.slice(0,
this.length - 1).trim(’right’) : this);
} else {
return this.trim(’left’).trim(’right’);
}
};
附上 javascript 正则表达式的基本知识：
g: 全局匹配
i: 忽略大小写
^ 匹配一个输入或一行的开头，/^a/匹配”an A”，而不匹配”An a”
$ 匹配一个输入或一行的结尾，/a$/匹配”An a”，而不匹配”an A”
* 匹配前面元字符 0 次或多次，/ba*/将匹配 b,ba,baa,baaa
+ 匹配前面元字符 1 次或多次，/ba*/将匹配 ba,baa,baaa
? 匹配前面元字符 0 次或 1 次，/ba*/将匹配 b,ba
(x) 匹配 x 保存 x 在名为$1…$9 的变量中
x|y 匹配 x 或 y
{n} 精确匹配 n 次
{n,} 匹配 n 次以上
{n,m} 匹配 n-m 次
[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[b] 匹配一个退格符
b 匹配一个单词的边界
B 匹配一个单词的非边界
cX 这儿，X 是一个控制符，/cM/匹配 Ctrl-M
d 匹配一个字数字符，/d/ = /[0-9]/
D 匹配一个非字数字符，/D/ = /[^0-9]/
n 匹配一个换行符
r 匹配一个回车符
s 匹配一个空白字符，包括 n,r,f,t,v 等
S 匹配一个非空白字符，等于/[^nfrtv]/
t 匹配一个制表符
v 匹配一个重直制表符
w 匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下
划线，如[w]匹配”$5.98″中的 5，等于[a-zA- Z0-9]
W 匹配一个不可以组成单词的字符，如[W]匹配”$5.98″中的$，等于[^a-zA-Z0-9
举例：验证 email
var myReg = /^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
如何显示/隐藏一个 DOM 元素？
1.
更改元素的 css style，设为 display: none。此外还可以将 visibility 设为 hidden，透明度设
为 0，或长、宽设为 0。. `7 m: r9 n$ u7 k& ]
2.
主要的 HTML 标签及 CSS。
一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局，请写出
1. - u( r, J$ B'
L. k9 R2 w8 I9 M2 ]
2.
3.
4. & O1
f# u& J. g/ L
5. 居中
6. & @$ y* b0 H- D9 j8 p+ Q: X
11.
12.
13.
var parent = this.parentNode; parent.removeChild(this); parent.appendChild(this);$ Q2 _5
[ x4 g8 k, e" r2 b
8.
不知道＝。＝; l n3 u3 p4 _6 `
9.
Flash 的缺点是需要客户端安装 Flash 插件，比较大，且更改了默认的 HTML 页面行为；但
可以方便地实现很多特效及动画，且具有较高权限。
Ajax 的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是 DOM API 提供的，
权限很低，较难跨域；但可以显著加快页面的载入速度和用户体验。
此外，二者都不能被搜索引擎索引（Google 已支持 Flash 文本的索引），不利于 SEO。
我的建议是重要和关键部分直接用 HTML，交互部分可以使用 Ajax，复杂的动画可采用
补充代码，是鼠标单击后 Button1 到 Button2 的后面, c5 [0 }) }# p( @- ~
Linux 中，将 a、b 打包为 back.tar，命令是（ ）
Flash、Ajax 各自的优缺点，在使用中如何取舍？# h1 L% |/ p8 W
居中
5 Y! l6 S3 E/ O; N2 d' X
14.
15.
CSS 中 margin 和 padding 的区别$ Q& n1 o \) P0 |' ]
网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示
如何控制网页在网络传输过程中的数据量; G- i- a q) \3 t# j$ _1 R
JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现 3 ^5 H3 { |2
复制代码
3.
margin 是外边距，属于元素之外，相邻元素的 margin 可以融合。4 W5 _+ M1 V J) I. e3 E2
V, P
padding 是内边距，在元素之内，相邻元素的 padding 不可融合。) @2 V9 W1 X7 {7 Y
4.
v7 E5 F5 x
function(obj) {; Z% ]6 f0 J: x5 W t5 x
return typeof(obj) == ”string”;$ B8 P9 B' c' ?: A
}
5.
“××年还剩××天××时××分××秒”
这个看我论坛右上角的就知道了…0 O0 f& I) |+ t, P
6.
题目貌似有问题，应该是减少数据量吧。; B9 l/ h6 u5 X) x l
最显著的方法是启用 GZIP 压缩。此外保持好的编码习惯，避免重复和 css、JavaScript 代
码，多余的 HTML 标签和属性。0 J" h/ T! y6 X v1 W/ x6 D
7.
Flash。
1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，
总长度为 5-20
var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
2，截取字符串 abcdefg 的 efg
var str = "abcdefg";
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf("efg"), 3);
alert(efg);
}
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 用 e[“srcElement”] 获取事件源，而 FF 用 e[“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.getElementsByName()和 document.all[name]
IE；document.getElementsByName()和 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 在 IE 浏览器和 Firefox
浏览器中的差异总结
5，规避 javascript 多人开发函数重名问题
(1) 可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中，调用的时候就调用类的函数，即使函数重名只要类
名不重复就 ok
6，javascript 面向对象中继承实现
javascript 面向对象中的继承实现一般都使用到了构造函数和 Prototype 原型链，简单的代
码如下：
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();
7，FF 下面实现 outerHTML
FF 不支持 outerHTML，要实现 outerHTML 还需要特殊处理
思路如下：
在页面中添加一个新的元素 A，克隆一份需要获取 outerHTML 的元素，将这个元素 append
到新的 A 中，然后获取 A 的 innerHTML 就可以了。
SPANDIV
SPAN
P
8，编写一个方法 求一个字符串的字节长度 假设： 一个英文字符占用一个字节，一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; ifor (var i=0; i
（2）构造函数
function Animal(name, color) {
this.name = name;
this.color = color;
}
（3）
（4）CSS expression 表达式中使用 this 关键字
12，如何显示/隐藏一个 DOM 元素？
el.style.display = "";//显示 el.style.visibility= "visible ";
el.style.display = "none";//隐藏 el.style.visibility= "hidden ";
el 是要操作的 DOM 元素
区别：visibility 设置为 hidden 时，元素依然占有原来的位置
13，JavaScript 中如何检测一个变量是一个 String 类型？请写出函数实现
String 类型有两种生成方式：
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello world”);
function IsString(str){
|
div element
|
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
