(转)WEB前端开发工程师面试题大全（一）
依照我个人答案与网上相关答案进行编写
作者：刘建
毕业院校：家里蹲大学低能班
联系邮箱：243376129@qq.com
如果有错误，欢迎发邮件，本人尽量修正。
一个前端技术工程师必须掌握的知识，写得很详细了，相信看完会对大家有所帮助。
——————————————————————————————————————————————————————————————————————
当然，高手就不用看这些面试题了。
见过某个高手，有自己的个人网站，然后把工作经历（他的工作单位基本都是著名网站，比如网易）、网站作品、掌握知识的熟练程度和掌握时间做成了一个页面。
人家网上应聘直接发个网页地址就够了。
当然这样的高手很少，这些题是为了大部分人出的，检测知识面。
开始进入正题：
——————————————————————————————————————————————————————————————————————
HTML与XHTML有什么区别？
①XHTML 元素必须被正确地嵌套。
错误：<p><span>this is example.</p></span>
正确：<p><span>this is example.</span></p>
HTML下<table width=100>，可以不写引号""，
而XHTML必须正确的写成：<table width="100">
②XHTML元素必须被关闭。
错误：<p>this is example.
正确：<p>this is example.</p>
HTML下可以写：<br>，而XHTML有严格限制，每个标签都得关闭，要写成：<br />
③标签名必须用小写字母。
错误：<P>this is example.<P>
正确：<p>this is example.</p>
④XHTML 文档必须拥有根元素。所有的 XHTML 元素必须被嵌套于 <html> 根元素中。
HTML根元素：在HTML文档中，元素<html>代表了文档的根，其他所有的元素都是在该元素的基础上进行延伸或拓展的。
该元素也是HTML文档的最外层元素，因此也称为根元素。
⑤XHTML废除了一些html里面的标签，原因是制定这个规范的w3c的人觉得有些旧东西该淘汰或不科学。
在XHTML和HTML下，同样的CSS样式表解析出来会有很多细节上的小差异。
——————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
网站重构的测试（来自腾讯的前端工程师面试题）
HTML文档流必须从Main开始然后才是两侧
原题解答看着让人有些没说到关键点，我进行下补充。
布局基本框架
上面只是一个简化图，实际比这个复杂不少：Left与Right是固定宽度，中间Main要求自适应。
——————
文档流：文档流是文档中可显示对象在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的挨次排放元素。
网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。
当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position来控制。
有三种状况将使得元素离开文档流而存在，分别是浮动、绝对定位、固定定位。然则在IE中浮动元素也存在于文档流中。
浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，然后从文档流中抽出并且能够尽量远的挪动至左侧或者右侧。
文字内容会环绕在浮动元素四周。当一个元素从正常文档流中抽出后，依然在文档流中的其他元素将疏忽该元素并填补他原先的空间。
——————
核心问题是Html文档流必须从Main开始然后才是两侧，下面就是这个要求的Html结构
1 <div id=”main”> 2 </div> 3 <div id=”left”> 4 </div> 5 <div id=”right”> 6 </div>
常规做法把两侧放在主要内容的前面进行左右浮动，然后中间使用边距，这样有个缺点就是网速慢的时候主要内容却在最后显示。
按照上面的Html布局，如果按常规把left和right各自左右浮动，中间main使用边距的话就会出现下面这种情况：
一、使用绝对定位。
不占用文档流的先读
绝对定位需要设置左右边距（实际应用中往往需要在外面套一个相对定位的盒子）。整个Demo如下（通过Firefox与IE5.5——8测试）：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>三栏布局</title>
6 <style type="text/css">
7 * { margin:0; padding:0; }
8 #main { position:absolute; left:200px; right:200px }/*绝对定位，使content不占据html文档流空间，让后面的left,right浮上去*/
9 #left, #right { width:200px; }
10 #left { float:left; }
11 #right { float:right; }
12 </style>
13 </head>
14 <body>
15 <div id="main">
16 <p style="height:999px; background:#fffaba; ">content</p>
17 </div>
18 <div id="left">
19 <p style="height:999px; background:#8fc41f;">left</p>
20 </div><div id="right">
21 <p style="height:999px; background:#00b7ef;">right</p>
22 </div>
23 </body>
24 </html>
CSS2引入了一种新的简单选择器：通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：
* {color:red;}
二、Main左浮动。
如果Main浮动的话首先要解决宽度自适应的问题，设置宽度100%显示，然后就得把Left拉到Main左侧，这里巧妙使用两种偏移方法。
先定义为浮动的先读。
IE6会有兼容问题，需要Hack一下。
Hack解释：一般基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。
这里的Hack就是修改的意思。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏布局-浮动方法</title>
<style type="text/css">
* { margin:0; padding:0; }
#wrap { padding:0 300px 0 200px; *overflow:hidden; }
#main { float:left; width:100%; }
#left, #right { position:relative; _display:inline; }
#left { width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; }
#right { width:300px; float:right; margin-right:-300px; }
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<p style="height:999px; background:#fffaba; ">content</p>
</div>
<div id="left">
<p style="height:999px; background:#8fc41f;">left</p>
</div>
<div id="right">
<p style="height:999px; background:#00b7ef;">right2</p>
</div>
</div>
</body>
</html>
后记：关于侧栏宽度固定，主要部分宽度自适应的布局是再普通不过了，而大部分人的做法就是把侧栏放在自适应盒子前面，
然后进行浮动解决，从来没有想过使用最优化的html文档流完成这个布局。第一种方法由于用了绝对定位，适合在特殊应用中使用，
常规布局推荐使用第二种解决。
此题原文转自：http://www.planeart.cn/?p=446
在原文基础上进行修改。
——————————————————————————————————————————————————————————————————————
Doctype？严格模式与混杂模式，如何触发这两种模式，区分它们有何意义？
Doctype（document type 文档类型）
可声明三种DTD（document type definition 文档类型固定）类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
HTML Strict DTD（HTML严格模式）
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD（过度版本）
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
进一步讲解
严格模式：必须按照声明的标准执行，规定元素的位置后，这个元素就必须在这个位置不能乱动。
好处：层次分明，便于阅读。
混杂模式：标准比较宽松，主要为了兼容，模拟老式浏览器去看老网站。了解一下就行。
关于触发
严格模式：都会有一个DTD，比如上面的DTD HTML 4.01
混杂模式：①声明一个混杂模式的DTD
②如果严格模式找不到他要执行的标准，就会变成混杂模式
区分它们的意义：
严格模式：有些老的浏览器不支持新技术设计网页的标准，所以用新技术设计的网页无法显示
混杂模式：为了让使用老浏览器的用户看到你网页的内容。
举个例子
标准模式：就如一个标准美女，样子好看，不过做饭，干家务等基本不会。
混杂模式：不是美女，有可能很普通、有可能很难看，不过能干家务。
你娶媳妇的时候觉得这两个有区别没？
——————————————————————————————————————————————————————————————————————
行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素：
就是内联元素（inline element）一般都是基于语义级（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素。
其实就是元素与元素之间不换行
a：锚点
img：图片
abbr：缩写
acronym：首字
input：输入框
span：常用内联容器，定义文本内区块
select：项目选择
var：定义变量
label：表格标签
code：计算机代码（在引用源码的时候需要）
big：大字体
b：粗体（不推荐
br：换行
cite：引用
dfn：定义字段
em：强调
i：斜体
kbd：定义键盘文本
q：短引用
s：中划线（不推荐）
samp：定义范例计算机代码
small：小字体文本
strike：中划线
strong：粗体强调
sub：下标
sup：上标
textarea：多行文本输入框
u：下划线
块级元素：
块元素一般都从新行开始，它可以容纳内联元素和其他块元素，常见块元素是段落标签P。form这个块元素比较特殊，它只能用来容纳其他块元素。
块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。
而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。
块元素（block element）
address：地址
blockquote：块引用
center：举中对齐块
dir：目录列表
div：常用块级容易，也是css layout的主要标签
dl：定义列表
fieldset-form：控制组
form：交互表单
h1：大标题
h2：副标题
h3：3级标题
h4：4级标题
h5：5级标题
h6：6级标题
hr：水平分隔线
menu：菜单列表
noframes：frames可选内容（对于不支持frame的浏览器显示此区块内容）
noscript：可选脚本内容（对于不支持script的浏览器显示此内容）
ol：排序表单
p：段落
pre：格式化文本
table：表格
ul：非排序列表
CSS的盒子模型
顾名思义，就是用把某些内容用一个盒子包装起来，需要给这个盒子设定一些属性，才能让这个盒子看起来是个盒子
属性名：
内容：content 要放一只大闸蟹
填充：padding 需要冷藏，就用冰块，这个属性就是冰块填了多厚
边框：border 盒子纸质的厚度，用什么颜色的纸
边界：margin 别的盒子离这个盒子的距离
把上面这几个属性属性说明一下，那主考官就知道了，除非他不了解CSS
——————————————————————————————————————————————————————————————————————
如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片
在原答案基础上，加上我个人建站的心得。
回答：涉及到人手、分工、同步；
前期团队必须确定好网站全局样式（globe.css），编码模式（utf-8）等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
继承式写法举例
function test(a,b)
{}
var date1 =new date;
date1.test(a,b);
var date1 =new date;
date1.test(a,b);
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
易于纠正错误，查清责任。
页面进行标注（例如 页面 模块 开始和结束）；
CSS跟HTML分文件夹并行存放，命名都得统一（例如style.css）
JS 分文件夹存放 命名以该JS功能为准英文翻译；
图片采用png8（256色PNG类型图片格式的别名）其他别的图片文件格式也行，保证格式基本一致，不要这几张用JPG，那几张用GIF
格式相同的整合在一起，使用方便，便于将来的管理
——————————————————————————————————————————————————————————————————————
用JS实现随机选取10到100之间的10个数字，存入到数组，并排序。
在网上看到一道题，算是有一定难度，然后那题给出的答案无论是语法还是算法，错得一塌糊涂。
以下给我自己写的答案
<script>
var array=[];
function getRandom(start,end)
{
var choice=end-start;
var a1=[];
for(var i=0;i<91;i++)
{
a1[i]=i+10
}
var a2=[];
for(var i=0;i<10;i++)
{
a2.push(a1.splice(Math.floor(Math.random()*a1.length) , 1));
a2.sort();
}
return a2;
}
array.push(getRandom(10,100));
alert(array);
</script>
测试通过，有更好答案的朋友麻烦告诉我这低能儿一声，感激不尽。
——————————————————————————————————————————————————————————————————————
双击表格每一列头进行该列整行排序，再双击倒序。（腾讯2012前端开发笔试题）
涉及到很多知识点，建议认真看看。不愧为腾讯，这题实在不容易。
1 以下的代码直接存为sortTable.js，在页面中包含:
2 <script type="text/javascript" src="sortTable.js"></script>
3
4 function ieOrFireFox(ob)
5 {
6 if (ob.textContent != null)
7 return ob.textContent;
8 var s = ob.innerText;
9 return s.substring(0, s.length);
10 }
11
12 //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
13 function sortAble(tableId, iCol, dataType)
14 {
15 var table = document.getElementById(tableId);
16 var tbody = table.tBodies[0];
17 var colRows = tbody.rows;
18 var aTrs = new Array;
19 //将将得到的列放入数组，备用
20 for (var i=0; i < colRows.length-1; i++)
21 {
22 aTrs[i] = colRows[i+1];
23 }
24
25 //判断上一次排列的列和现在需要排列的是否同一个。
26 if (table.sortCol == iCol)
27 {
28 aTrs.reverse();
29 }
30 else
31 {
32 //如果不是同一列，使用数组的sort方法，传进排序函数
33 aTrs.sort(compareEle(iCol, dataType));
34 }
35 oFragment = document.createDocumentFragment();
36
37 for (var i=0; i < aTrs.length; i++)
38 {
39 oFragment.appendChild(aTrs[i]);
40 }
41 tbody.appendChild(oFragment);
42 //记录最后一次排序的列索引
43 table.sortCol = iCol;
44 }
45 //将列的类型转化成相应的可以排列的数据类型
46 function convert(sValue, dataType)
47 {
48 switch(dataType)
49 {
50 case "int":
51 return parseInt(sValue);
52 case "float":
53 return parseFloat(sValue);
54 case "date":
55 return new Date(Date.parse(sValue));
56 default:
57 return sValue.toString();
58 }
59 }
60
61 //排序函数，iCol表示列索引，dataType表示该列的数据类型
62 function compareEle(iCol, dataType)
63 {
64 return function (oTR1, oTR2)
65 {
66 var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);
67 var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);
68 if (vValue1 < vValue2)
69 {
70 return -1;
71 }
72 else if (vValue1 > vValue2)
73 {
74 return 1;
75 }
76 else
77 {
78 return 0;
79 }
80 };
81 }
82
83
84
85
86 然后直接在页面中就可以使用排序方法了：
87
88 表格写法：
89 <table width="96%" height="" border="0" id="tableId">
90 <tr>
91 <th >日期</th>
92 <th onclick="sortAble('tableId', 1)" style="cursor:pointer">某列</th>
93 <th onclick="sortAble('tableId', 2)" style="cursor:pointer">某列</th>
94 <th onclick="sortAble('tableId', 3)" style="cursor:pointer">某列</th>
95 <th >某列</th>
96 <th >某列</th>
97 <th onclick="sortAble('tableId', 6, 'int')" style="cursor:pointer">某整数列</th>
98 </tr>
99 <tr>
100 jsp循环生成列表数据
101 </tr>
102 </table>
XML DOM textContent 属性
定义和用法
textContent 属性返回或设置选定元素的文本。
如果返回文本，则该属性返回元素节点内所有文本节点的值。
如果设置文本，则该属性删除所有子节点，并用单个文本节点来替换它们。
语法：
返回文本：
elementNode.textContent
设置文本：
elementNode.textContent=string
JavaScript sort() 方法
定义和用法
sort() 方法用于对数组的元素进行排序。
语法
arrayObject.sort(sortby)
| 参数 | 描述 |
| sortby | 可选。规定排序顺序。必须是函数。 |
返回值
对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
说明
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。
在本例中，我们将创建一个数组，并按字母顺序进行排序：
<script type="text/javascript"> var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort()) </script>
输出：
10,5,40,25,1000,1 1,10,1000,25,40,5
请注意，上面的代码没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数：
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
输出：
10,5,40,25,1000,1 1,5,10,25,40,1000
实例
1 <html>
2 <body>
3
4 <script type="text/javascript">
5
6 function sortNumber(a, b)
7 {
8 return a - b
9 }
10
11 var arr = new Array(6)
12 arr[0] = "10"
13 arr[1] = "5"
14 arr[2] = "40"
15 arr[3] = "25"
16 arr[4] = "1000"
17 arr[5] = "1"
18
19 document.write(arr + "<br />")
20 document.write(arr.sort(sortNumber))
21
22 </script>
23
24 </body>
25 </html>
输出：
10,5,40,25,1000,1 1,5,10,25,40,1000
HTML <th> 标签
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
实例
普通的 HTML 表格，包含两行两列：
<table border="1">
<tr>
<th>Company</th>
<th>Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
</table>
HTML <col> 标签
<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。
实例
col 元素为表格中的三个列规定了不同的对齐方式：
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
HTML DOM rows 集合
定义和用法
rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。
该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
语法
tableObject.rows[]
实例
下面的例子使用了 rows 集合来显示第一行中的内容：
1 <html>
2 <head>
3 <script type="text/javascript">
4 function showRow()
5 {
6 alert(document.getElementById('myTable').rows[0].innerHTML)
7 }
8 </script>
9 </head>
10 <body>
11
12 <table id="myTable" border="1">
13 <tr>
14 <td>Row1 cell1</td>
15 <td>Row1 cell2</td>
16 </tr>
17 <tr>
18 <td>Row2 cell1</td>
19 <td>Row2 cell2</td>
20 </tr>
21 </table>
22 <br />
23 <input type="button" onclick="showRow()" value="Show innerHTML">
24
25 </body>
26 </html>
CSS cursor 属性
定义和用法
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
| 值 | 描述 |
|---|---|
| url |
需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
——————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————
HTML DOM 对象
HTML DOM hash 属性
1 <html>
2 <head>
3 <script type="text/javascript">
4 function changeLink()
5 {
6 document.getElementById('venus').hash="bottom"
7 }
8 </script>
9 </head>
10 <body>
11
12 <img src="/i/eg_planets.jpg"
13 usemap="#planetmap" />
14
15 <map name="planetmap">
16 <area
17 id="venus"
18 shape="circle"
19 coords="180,139,14"
20 href ="/example/hdom/venus2.html#top"
21 alt="Venus" />
22 </map>
23
24 <input type="button" onclick="changeLink()" value="改变链接" />
25
26 </body>
27 </html>
浙公网安备 33010602011771号