面試題庫2

面试题库2（@花夏 liubiao@itoxs.com）

##HTML
1、请描述下块级元素和内联元素的差别

块元素(block element)：

块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素是p和div.

内联元素(inline element),也叫行内元素

内联元素在一个文本行内生成元素框，而不会打断这行文本。内联元素最好的例子就是XHTML中的a元素。strong和em也属于内联元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。

尽管“块”和“内联”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自内联元素（即不能嵌套在行内元素中）。但是CSS中，对于显示角色如何嵌套不存在任何限制。

另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。也可以把块元素div加上display:inline，让他显示为内联元素。

可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

2、列举几个常用的h5 新增的标签和它们的作用

1.header + footer 头部+尾部

• 2.nav 导航栏

• 3.hgrounp 标题组

• 4.article + section 文章+区段或者小说+章节

• 5.details + summary 下拉列表实现

  <details>
      <summary>黄浦江大桥</summary>
      <ul>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
          <li>松浦大桥</li>
      </ul>
  </details>

  6.optgroup option分组

  <select>
      <optgroup label="java" disabled>
          <option value="">java1</option>
          <option value="">java2</option>
      </optgroup>
      <optgroup label="web">
          <option value="">web1</option>
          <option value="">web2</option>
      </optgroup>
  </select>

  7.figure + figcaption 媒体元素(有图片有文字的)分段 + 分段标题

• 8.progress 进度条

• 9.embed 进入插件元素 如flash

• 10.colgroup 给table设置列分组 设置样式(其中第一个col 中2表示前两列。第二个col中1表示第三列，依次向后排)

  <table>
  <colgroup>
      <col span="2" style="background-color:pink"></col>
      <col span="1" style="background-color:#666"></col>
  </colgroup>
  <caption>练习使用colgroup</caption>
      <thead>
          <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>备注</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>ding</td>
              <td>20</td>
              <td>note1</td>
          </tr>
          <tr>
              <td>ze</td>
              <td>22</td>
              <td>note2</td>
          </tr>
          <tr>
              <td>sen</td>
              <td>25</td>
              <td>note3</td>
          </tr>
      </tbody>
  </table>

  11.datalist (input + list 搭配使用) 可以查找和输入的下拉列表

  <input list="datalist1">
  <datalist id="datalist1">
      <option value="web">web</option>
      <option value="ios">ios</option>
      <option value="java">java</option>
      <option value="sql">sql</option>
      <option value=".net">.net</option>
      <option value="andrior">andrior</option>
  </datalist>

  12.output + onforminput form + oninput 输入框元素可以直接用id来获取 IE不支持output
  output 两个属性for form 一个是绑定要运算的框 一个是绑定的form表单

  <form oninput="sum()">
      <input id="input1" /> +
      <input id="input2"> =
      <output id="output1" onforminput="sum()"></output>
  </form>
  
  <form oninput="output2.value=Number(input3.value)+Number(input4.value)">0
      <input type="range" value="50" id="input3">50 +
      <input type="Number" id="input4" value="50"> =
      <output id="output2" name="output2" for="input3 input4"></output>
  </form>
  <script type="text/javascript">
      function sum() {
          var num1=input1.value;
          var num2=input2.value;
          document.getElementById('output1').value = Number(num1) + Number(num2);
      }
  </script>

  13.form新增输入框类型：email url color date datetime datetime-local month time week number range search telepone

• 14.右键菜单设置 oncontextmenu(点击鼠标右键设置事件) contextmenu + menu +menuitem + label

  <div class="box" contextmenu="myMenu">
      <p>点击鼠标右键会出现上下文</p>
      <menu type="context" id="myMenu">
      <menuitem label="refresh" onclick="window.location.reload()"></menuitem>
      <menu type="context" label="超级链接">
      <menuitem label="百度" onclick="window.location.href='www.baidu.com'"></menuitem>
      </menu>
      </menu>
  </div>
  // (右键文字后发现会多出来一个refresh和超级链接)

  15.audio 音频

  <audio controls="controls">
      <source src="song.ogg" type="audio/ogg">
      <source src="song.mp3" type="audio/mpeg">
  </audio>

  16.video 视频

  <video width="320" height="240" controls="controls">
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.mp4" type="video/mp4">
  </video>

  17.Drag Drop拖放 三个方法(拖动过程，开始拖动，开始安放)

  <script type="text/javascript">
      function allowDrop(ev) {
          ev.preventDefault();
      }
      function drag(ev) {
          ev.dataTransfer.setData('Text', ev.target.id);
      }
      function drop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData('Text');
          ev.target.appendChild(document.getElementById(data));
      }
  </script>

  <div ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="" draggable="true" ondragstart="drag(event)">
  </div>
  //实现的是将图片拖到div中

  18.画布 canvas

• 19.本地存储 localStorage

  if(window.localStorage){
      localStorage.setItem('userID', 123);
  }
  var userID=localStorage.getItem('userID');

  20.离线存储 sessionStorage

  if(window.sessionStorage){
      sessionStorage.setItem('userID', 123);
  }
  var userID=sessionStorage.getItem('userID');

  21.图片预览

  <div></div>
  <input type="file"/>
  <script type="text/javascript">
      // 调用change事件
      $("input").change(function() {
          // 得到文件
          var file = this.files[0];
          if (window.FileReader) {
          // 定义读取文件
              var fr = new FileReader();
              // 得到dataURL
              fr.readAsDataURL(file);
              // 文件加载
              fr.onloadend = function(e) {
                  var result = e.target.result;
                  if (result === null) {
                      alert('加载失败');
                  } else {
                      var $img = $('<img>');
                      $img.css('width', '200px');
                      $img.attr('src', result);
                      $('div').append($img);
                  }
              }
          } else {
              alert('加载失败');
          }
      });
  </script>

  readAsDataURL 将文件读取为DataURL
  readAsBinaryString 将文件读取为二进制码
  readAsText 将文件读取为文本

处理事件：
onabort 中断时触发
onerror 出错时触发
onload 文件都区成功时触发
onloadend 读取完成时触发，无论成功或者失败
onloadstart 读取开始时触发
onprogress 读取中

3、input标签有哪些常用的类型，分别说明下使用场景

1:type=text

输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。
参数name：同样是表示的该文本输入框名称。
参数size：输入框的长度大小。
参数maxlength：输入框中允许输入字符的最大数。
参数value：输入框中的默认值
特殊参数readonly：表示该框中只能显示，不能添加修改。

2:type=password

不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。
参数和”type=text”相类似。

3:type=file

当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）
提供了一个文件目录输入的平台，参数有name，size。

4:type=hidden

非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。
一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。

5:type=button

标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码

6:type=checkbox

多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）
其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）

7:type=radio

即单选框，出现在多选一的页面设定中。参数同样有name,value及特别参数checked.
不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。

8:type=image

比较另类的一个，自己看看效果吧，可以作为提交式图片

<form name="form1" action="xxx.php">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif">
</form>

9:type=submit and type=reset

分别是“提交”和“重置”两按钮
submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。

4、是否使用或听说过前端模板框架，如Smarty，尝试说明下它的作用

##CSS
1、关于页面定位中的相对定位和绝对定位有什么区别？关于绝对定位的使用，有什么需要注意的地方么？

1.绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的（如果父元素没有定位属性，则看它的爷爷符不符合条件）一个具有定位属性（relative/absolute/fixed）的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素。
将元素从文档流中拖出来：元素完全脱离其原来的文档流，元素以前的位置可以被占用。

注意事項：

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

2.相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。

3.固定定位

元素被设置position：fixed后，与绝对定位一样，该元素完全脱离文档流，然后设置left，right，top，bottom的值来确定元素的位置，与绝对定位不同的是，fixed相对的移动坐标是body，不管它的父亲、爷爷或者其他祖先有无定位属性。也就是说，拖动浏览器滚动条，其在视图中的位置不变。

2、对于伪元素，能否举出一个使用场景，实际开发中是否用到？

伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。

伪元素以::开头。

在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。
IE8不支持::。因此如果要兼容IE8，只能用:

常见的伪元素

::before
// 在当前元素的内容的前面插入一个子元素。插入的元素为内联元素。
// 需要注意的是，使用::before时， 必须使用content来指定子元素的内容。
::after
// 在当前元素的内容的后面插入一个子元素。
// 其他和 ::before类似。
::first-line
// 选择当前元素的第一行。
// 需要注意的是，其只作用于块级元素
::first-letter
// 选择第一个字母。
::selection
// 选中当前元素中，选中的文字。
// 对::selection的只能使用 color, background-color和text-shadow这几个属性。

什么时候用伪元素

HTML 标签的目的，就是为了展示内容信息。非内容信息要使用伪元素。

具体的使用场景是图标和清除浮动。

所谓的非内容信息，指的是一些对内容进行修饰的信息。

3、听说过清除浮动么，能否简单说明下使用场景

1.使用空标签清除浮动

在所有浮动标签后面添加一个空标签 定义css clear:both.

弊端就是增加了无意义标签。

2.使用overflow

包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。

只适用于非IE浏览器。

使用中需注意以下几点:

一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

4、浮动外部元素，float-in-float

这种方法很简单，就是把”#outer”元素也进行浮动（向左或者向右）。

但是这种方法带来的别外一个问题就是和”#outer”相邻的下一个元素会受到”#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

4、css样式可以以哪些方式引用，优先级是怎样的

embedding（嵌入式）、linking（外部引用式）和inline（内联式，也称行内样式）。

1.嵌入式：用户可在HTML文档头部定义多个style元素，实现多个样式表。

2.外部引用式

①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。

②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。

③可以根据介质有选择的加载样式表。

3.内联式
使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。

优先级：
内联式>内嵌式>外部引用式

5、是否听说过less或者sass语法？具体可否写下语法，如混合

1.less混合

.a, #b {
    color: red;
}
.mixin-class {
    .a();
}
.mixin-id {
    #b();
}

編譯后：

.a, #b {
    color: red;
}
.mixin-class {
    color: red;
}
.mixin-id {
    color: red;
}

2.sass混合：
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

編譯后：

.demo{
    margin-left:auto;
    margin-right:auto;
}

6、伪类与伪元素有什么差别？
https://segmentfault.com/a/1190000000484493

##JS
1、JS有哪些基本类型，说说undefined和null有什么差异么
2、能否用自己的理解说明下闭包的概念和使用场景
3、var a = NaN; var b = NaN；a === b?;
4、听说过可变类型和不可变类型么？JS中的字符串属于哪种？当一个字符串被重新赋值时，实际发生了什么？
5、对象在函数调用传递的过程中是以什么形式传递的？
6、说明下 “ = = “ 和 “ = = = “ 的差别，0 == ‘ ‘ 的结果是？
7、函数声明和函数表达式的差别是什么？以下代码运行结果是什么？

alert(sum(10, 20));
function sum(a, b) {
    return a + b;
}
alert(sum(10, 20));
var sum = function (a, b){
    return a + b;
}

8、关于js的事件机制，能否简单说明下你的理解，比如关于捕获和冒泡的差别。
9、请用自己的理解说明下get和post的差异和分别的使用场景
10、是否听说过ajax，你对同步异步的理解是什么？
11、听说过正则表达式么，可否写一个验证邮箱/手机号的正则表达式
12、如果要给多个方法/函数设置默认值（空函数），你会怎么做？听过jquery中的noop函数么，作用是什么？
13、讲讲你对原型继承的理解，以构造函数A继承构造函数B为例
14、说下下面函数的打印结果

var o = {
    a: function (){
        console.log(this);
    }
};
o.a(); // 输出什么
var a = o.a;
a(); // 输出什么

为什么不一样？如何让a一直打印o？
听过bind吗？如何自己实现一个bind？

15、说说JavaScript有哪几种数据类型，如何判断一个变量为数组类型？

##JQuery
1、你通常使用的绑定事件方式是哪种，可否说明下？如果有些元素可能在页面载入完之后动态生成，你是如何绑定其事件的

##http
1、听过restful架构吗？讲讲什么是restfull风格的接口，http://xxx.com/getuserinfo?userid=111这个是吗
​ uri唯一标识一个资源，通过get、post、put等method进行不同操作
2、解决过跨域问题吗？怎么样就算是跨域访问？说一下你知道的跨域解决方案
​ jsonp、服务端中转等，简述jsonp的原理

##开发框架
1、是否使用过前端开发框架，能否大概介绍下

##移动开发
1、有否移动端开发经验？

##【综合功能】
1、【轮播】如何实现一个幻灯片轮播效果
2、【吸顶/底】如何实现吸顶和吸底效果
3、【下拉框】如果原生的下拉框无法满足效果，自己实现下拉框的大致思路是什么
4、【兼容性】如何应对浏览器兼容性问题，是否有处理过类似的问题，可否举几个例子说明下？
5、【频繁点击】如果某个页面的一个按钮是提交表单的，有否避免用户无意中频繁点击导致重复提交的方法？
6、【菜单栏】需要开发一个水平的菜单栏，有哪些实现方式
7、【浮层】如果让你做一个浮层，比如购物车的选择优惠浮层，可否说下大致的思路
8、【截断】单行及多行截断的实现方式
9、【调试】说下你所知道的调试技巧，比如你拿到同事写的代码，如何快速定位到问题所在的代码块？如何快速查找一个元素上绑定的事件？