真的是很喜欢做前端哪！
这是第二次 也可能是最后一次和百度前端的缘分了
面试时间各个人不一样，有朋友说20分钟就结束了，我9点50左右开始，面到快12点；
面试的哥哥很好，我喜欢。但是在旁边看着，多少有些紧张，以至于忘了打开我做的网站给他看，忘了演示完整的一遍自己做的HTM5 APP 出来后想到就后悔死了
能想起来的部分题目如下：
(1) dt 和 dl 的区别:（平时用的少，没答上来）
很多人容易忽略 dl dt dd的用法: dl 内容块dt 内容块的标题 dd 内容
可以这么写： <dl>
<dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
dt 和dd中可以再加入 ol ul li和p,理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。
(2) ul ol 区别：（这个知道）
ol 有序列表: <ol>
<li>……</li> <li>……</li> <li>……</li> </ol> 表现为： 1…… 2…… 3……
ul 无序列表，表现为li前面是大圆点而不是123: <ul>
<li>……</li> <li>……</li> </ul>
(3) 语义化web标签有哪些(听到语义化就蒙了，哥哥提示后，我就稀里糊涂说了几个标签，完全沉浸在语义化这几个字中不能自拔..)
转自(http://www.duidea.com/2012/0521/1277.html):做了这么久前端，可惜连语义化都没有搞清楚，该打。
其实HTML中的标签都有他自身的含义，只是常常被忽视——就像表格一直充当着网页布局的角色。还好随着CSS的重现江湖，表格也终于回到他的本质工作——列表数据。它会告诉我们说：“这行是一个标题；这几行组成了一个段落；这些文字是项目列表……”在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。
写语义化的HTML结构其实很简单，首先掌握HTML中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。
P
段落标记，知道了 p 作为段落，你就不会再使用<br />来换行了，而且不需要<br /> 来区分段落与段落。p中的文字会自动换行，而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。
<ul>、<ol>、<li>
<ul>无序列表，这个被大家广泛的使用，<ol>有序列表也挺常用。在web标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，只是美观方面差了一点而已。
<dl>、<dt>、<dd>
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
<em>、< strong >
<em> 是用作强调的，strong是用作重点强调的。
<table>、<td>、<th>、< caption >、 summary
XHTML中的表格不再是用来布局。如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性summar为摘要（要想提高搜索的排名这个绝对不应该少），<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
<ins>, <del>
知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。
<abbr>、<acronym>
<abbr>标签是表示web页面上的简称，<acronym>标签为取首字母缩写。
alt属性和title属性
title属性用来为元素提供额外说明信息，但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
让你语义化HTML结构的无数条理由：
1.去掉或样式丢失的时候能让页面呈现清晰的结构：
HTML本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的， 不要误会这是HTML的表现，这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。
如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（因为这些设备对CSS的支持较弱）。
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。
5.便于团队开发和维护
在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
(4) Jquery 实现鼠标滑过图片，显示文字，平时常常写的阿，到考场就不行了么：
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
$('p').click(function(){
alert('click function is running !');
});
(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
$('p').dbclick(function(){
alert('dbclick function is running !');
});
(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
$('p').mousedown(function(){
alert('mousedown function is running !');
});
(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。
$('p').mouseup(function(){
alert('mouseup function is running !');
}).click(function(){
alert('click function is running too !');
});
(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
(5)和(6)这两个事件一般不常用，很难实现与用户的交互，也就是说不易捕获用户事件。
(7):mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
(8):mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
(7)和(8)这两个事件一般连起来使用，在jQuery中可以使用hover这个函数来代替这两个函数。
$('p').hover(function(){
alert('mouseenter function is running !');
},function(){
alert('mouseleaver function is running !');
});
<!--我现在也不知到错在哪儿了。。>
(5)web 缓存优化 缓存技术? (我答了些前端优化的方法和web缓存的一些处理 expires cache-control 等等 GZIP我都没说 )
总之表达不利索 弱爆了
http://www.cnblogs.com/sunli/archive/2009/11/24/1609444.html
前端优化见我上一篇博客
(6)JS 的排序算法（手写：）
我只写了选择排序 冒泡排序 和一个去重以及求最值的函数。 本来感觉都应该会，都怪私底下没有手写过
// ---------- 一些排序算法
var Sort = {}
Sort.prototype = {
// 利用sort进行排序
systemSort:function(array){
return array.sort(function(a, b){
return a - b;
});
},
// 冒泡排序
bubbleSort:function(array){
var i = 0, len = array.length,
j, d;
for(; i<len; i++){
for(j=0; j<len; j++){
if(array[i] < array[j]){
d = array[j];
array[j] = array[i];
array[i] = d;
}
}
}
return array;
},
// 快速排序
quickSort:function(array){
//var array = [8,4,6,2,7,9,3,5,74,5];
//var array =[0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
var i = 0;
var j = array.length - 1;
var Sort = function(i, j){
// 结束条件
if(i == j ){ return };
var key = array[i];
var tempi = i; // 记录开始位置
var tempj = j; // 记录结束位置
while(j > i){
// j <<-------------- 向前查找
if(array[j] >= key){
j--;
}else{
array[i] = array[j]
//i++ ------------>>向后查找
while(j > ++i){
if(array[i] > key){
array[j] = array[i];
break;
}
}
}
}
// 如果第一个取出的 key 是最小的数
if(tempi == i){
Sort(++i, tempj);
return ;
}
// 最后一个空位留给 key
array[i] = key;
// 递归
Sort(tempi, i);
Sort(j, tempj);
}
Sort(i, j);
return array;
},
// 插入排序
insertSort:function(array){
// http://baike.baidu.com/image/d57e99942da24e5dd21b7080
// http://baike.baidu.com/view/396887.htm
// var array = [0,1,2,44,4,324,5,65,6,6,34,4,5,6,2,43,5,6,62,43,5,1,4,51,56,76,7,7,2,1,45,4,6,7];
var i = 1, j, temp, key, len = array.length;
for(; i < len; i++){
temp = j = i;
key = array[j];
while(--j > -1){
if(array[j] > key){
array[j+1] = array[j];
}else{
break;
}
}
array[j+1] = key;
}
return array;
},
// 希尔排序
//Jun.array.shellSort(Jun.array.df(10000));
shellSort:function(array){
// http://zh.wikipedia.org/zh/%E5%B8%8C%E5%B0%94%E6%8E%92%E5%BA%8F
// var array = [13,14,94,33,82,25,59,94,65,23,45,27,73,25,39,10];
// var tempArr = [1750, 701, 301, 132, 57, 23, 10, 4, 1];
// reverse() 在维基上看到这个最优的步长 较小数组
var tempArr = [1031612713, 217378076, 45806244, 9651787, 2034035, 428481, 90358, 19001, 4025, 836, 182, 34, 9, 1]
//针对大数组的步长选择
var i = 0;
var tempArrtempArrLength = tempArr.length;
var len = array.length;
var len2 = parseInt(len/2);
for(;i < tempArrLength; i++){
if(tempArr[i] > len2){
continue;
}
tempSort(tempArr[i]);
}
// 排序一个步长
function tempSort(temp){
//console.log(temp) 使用的步长统计
var i = 0, j = 0, f, tem, key;
var tempLen = len%temp > 0 ? parseInt(len/temp) + 1 : len/temp;
for(;i < temp; i++){// 依次循环列
for(j=1;/*j < tempLen && */temp * j + i < len; j++){
//依次循环每列的每行
tem = f = temp * j + i;
key = array[f];
while((tem-=temp) >= 0){
// 依次向上查找
if(array[tem] > key){
array[tem+temp] = array[tem];
}else{
break;
}
}
array[tem + temp ] = key;
}
}
}
return array;
}
}
http://blog.csdn.net/chenke__hxx/article/details/12500813
（7）把笔试题目中页面那道题在哥哥的电脑上面展示出来（笔试下来的时候就想了想 还理解了别人的思路以及代码 但没动手做 这次也没有完全实现 花的时间还长）
<平时写这些东西，都是网上copy类似的格式，然后改改就行了，真要一点一点写出来，确实考验功力，明显我功力欠火候>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html body p{
margin: 0;
padding: 0;
}
.main{
position: relative;
width: 200px;
height: 270px;
margin: 0 auto;
overflow: hidden;
}
.one{
position: absolute;
top: 0;
left: 0;
z-index: 100;
height: 200px;
width: 200px;
}
.two{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
background: #ccc;
}
img{
width: 200px;
height: 200px;
}
.one img:hover{
opacity: 0;
}
div p{
position: absolute;
top:50%;
width: 100%;
text-align: center;
}
.two img{
opacity: 0.5;
}
.foot{
padding: 10px;
width: 100%;
height: 50px;
display: table-cell;
vertical-align: middle;
position: absolute;
bottom: 0;
}
.foot img{
width: 50px;
height: 50px;
}
.foot p{
position: absolute;
top: 0;
margin-left: 50px;
height: 70px;
line-height: 70px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="main">
<div class="one">
<img src="***" alt="">
</div>
<div class="two" id="two">
<img src="***" alt="">
<p>***</p>
</div>
<div class="foot">
<img src="***" alt="">
<p>***</p>
</div>
</div>
</body>
</html>//hove用Jquery 实现 就是前面鼠标滑过那道题目
(8) 实现左侧浮动，右侧固定
要实现这种布局，也算比较简单
这儿总结的比较好：http://jo2.org/css-auto-adapt-width/
我们先给出html结构：
代码中的#wrap的div，是用来包裹我们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了，那证明我们的定位方法必须改进。
下面列举几个常见的方法：
1，固定宽度区浮动，自适应区不设宽度而设置 margin
我们拿右边定宽左边自适应来做示范,CSS代码如下：
overflow : hidden ; *zoom : 1 ;
}
#content , #sidebar {
background-color : #eee ;
}
#sidebar {
float : right ; width : 300px ;
}
#content {
margin-right : 310px ;
}
#footer { background-color : #f00 ; color : #fff ; margin-top : 1em }
其中，sidebar让他浮动，并设置了一个宽度；而content没有设置宽度。
大家要注意html中必须使用div标签，不要妄图使用什么p标签来达到目的。因为div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了，填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边，所以我们设置content的margin-right值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.
假设content的默认宽度是100%，那么他设置了margin后，他的宽度就变成了100%-310，此时content发现自己的宽度可以与sidebar挤在同一行了，于是他就上来了。
而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-310始终是不会变的。
这个方法看起来很完美，只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响.
但实际上这个方法有个很老火的限制——html中sidebar必须在content之前！
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后，那上面的一切都会化为泡影。
可能有的人不理解，说你干嘛非要sidebar在后面呢？这个问题说来话长，反正问题就是——content必须在sidebar之前，但content宽度要自适应，怎么办？
下面有两个办法，不过我们先把html结构改成我们想要的样子：
2，固定宽度区使用绝对定位，自适应区照例设置margin
我们把sidebar扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。
content很容易就搞定了，此时来看看sidebar，他迫不得已抛弃了float。我们来看看sidebar的特点：在右边，宽度300，他的定位对content不影响——很明显，一个绝对主义分子诞生了。
于是我们的css如下：
*zoom : 1 ; position : relative ;
}
#sidebar {
width : 300px ; position : absolute ; right : 0 ; top : 0 ;
}
#content {
margin-right : 310px ;
}
这段css中要注意给wrap加上了相对定位，以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。
好像完成了？在没有看footer的表现时，我很欣慰。我们来把sidebar加长——增长100px！不要一年，只要一条内裤！哦，，，只要一句代码。
但是，footer怎么还是在那儿呢？怎么没有自动往下走呢？footer说——我不给绝对主义者让位！
其实这与footer无关，而是因为wrap对sidebar的无视造成的——你再长，我还是没感觉。
看来这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处。
3，float与margin齐上阵
经过前面的教训，我们重新确立了这个自适应宽度布局必须要达成的条件：
- sidebar宽度固定，content宽度自适应
- content要在sidebar之前
- 后面的元素要能正常定位，不能受影响
由于绝对定位会让其他元素无视他的存在，所以绝对定位的方式必须抛弃。
如果content和sidebar一样，都用float，那content的自适应宽度就没戏了;如果不给content加float，那sidebar又会跑到下一行去。
所以，最终我决定：float与margin都用。
我打算把content的宽度设为100%,然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310，导致被遮住了，所以我们要把他重新挤出来。为了好挤，我用了一个额外的div包裹住内容，所以html结构变成了这种样子：
css则变成这样：
width : 300px ; float : right ;
}
#content {
margin-left : -310px ; float : left ; width : 100% ;
}
#contentb {
margin-left : 310px ;
}
这样一改，真正的“content”就变成了contentb，他的宽度跟以前的content一样，是100%-310.
大家可能注意到了代码中的两个margin-left，一个-310px一个310px，最后结合起来相当于什么都没干，着实蛋疼。但他确实解决了content与sidebar的顺序问题。
这个方法的缺点就是：太怪异，以及额外多了一层div。
（9） email 标签是什么？
html5
<input type="email" name="user_email"/><a href="mail to: xxx@yyy">
(10) 网页中嵌入代码的标签
<code>?
(11) css Reset（这个我就正常的写了，但性能不好，回来查了下）
通过css的background-position实现页面，还是为了优化，减少http连接数。
1 * {
2 padding: 0;
3 margin: 0;
4 border: 0;
5 }
YUI的css Rest 性能貌似不错（转自：http://www.nowamagic.net/librarys/veda/detail/732）
CSS Reset 即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器中表现一致。
通过css的background-position实现页面，还是为了优化，减少http连接数。
1 * {
2 padding: 0;
3 margin: 0;
4 border: 0;
5 }
这也是一种CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img
{
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var
{
font-weight: normal;
font-style: normal;
}
ol,ul
{
list-style: none;
}
caption,th
{
text-align: left;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
font-size: 100%;
}
q:before,q:after
{
content:'';
}
abbr,acronym
{
border: 0;
}
其他的记不太清了，总之感觉发挥的不好，有紧张或不习惯的原因，也有实力还不够的原因，我深爱的前端阿，我的Jquery 我的kendo, 可能真的就再见了，我终归还是回归到后台开发的大军中去。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
