2014 百度前端一面

真的是很喜欢做前端哪！

这是第二次 也可能是最后一次和百度前端的缘分了

面试时间各个人不一样，有朋友说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结构：

<divid="wrap">
  <divid="sidebar"style="height:240px;">固定宽度区</div>
  <divid="content"style="height:340px;">自适应区</div>
</div>
<divid="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

代码中的#wrap的div，是用来包裹我们要定位的这两个区的；他后面还有个#footer，用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了，那证明我们的定位方法必须改进。

下面列举几个常见的方法：

1，固定宽度区浮动，自适应区不设宽度而设置 margin

我们拿右边定宽左边自适应来做示范,CSS代码如下：

#wrap {
    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结构改成我们想要的样子：

<divid="wrap">
  <divid="content"style="height:340px;">自适应区，在前面</div>
  <divid="sidebar"style="height:240px;">固定宽度区</div>
</div>

2，固定宽度区使用绝对定位，自适应区照例设置margin

我们把sidebar扔掉，只对content设置margin，那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说，我的宽度，与你无关。

content很容易就搞定了，此时来看看sidebar，他迫不得已抛弃了float。我们来看看sidebar的特点：在右边，宽度300，他的定位对content不影响——很明显，一个绝对主义分子诞生了。

于是我们的css如下：

#wrap {
    *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齐上阵

经过前面的教训，我们重新确立了这个自适应宽度布局必须要达成的条件：

1. sidebar宽度固定，content宽度自适应
2. content要在sidebar之前
3. 后面的元素要能正常定位，不能受影响

由于绝对定位会让其他元素无视他的存在，所以绝对定位的方式必须抛弃。

如果content和sidebar一样，都用float，那content的自适应宽度就没戏了;如果不给content加float，那sidebar又会跑到下一行去。

所以，最终我决定：float与margin都用。

我打算把content的宽度设为100%,然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。

但这么一来content里面的内容也会跟着左移310，导致被遮住了，所以我们要把他重新挤出来。为了好挤，我用了一个额外的div包裹住内容，所以html结构变成了这种样子：

<divid="wrap">
  <divid="content"style="height:140px;">
    <divid="contentb">
      content自适应区，在前面
    </div>
  </div>
  <divid="sidebar"style="height:240px;">sidebar固定宽度区</div>
</div>

css则变成这样：

#sidebar {
    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, 可能真的就再见了，我终归还是回归到后台开发的大军中去。