前端面试小结

Veröffentlicht am

初级前端面试题

一、考察 HTML 知识

1. HTML 和 XHTML 的区别是什么？ 请用代码举例分析。

最主要的不同：
  • XHTML 元素必须要被正确的嵌套
  • XHTML 元素必须要被关闭
  • 标签名必须使用小写字母
  • XHTML 文档必须拥有根目录
XHTML 元素必须要被正确的嵌套

在 HTML 中，某些元素可以像这样彼此不正确的嵌套：
<b><i>This is good world</b></i>
在 XHTML 中，所有的元素必须要正确的进行嵌套：
<b><i>This is good world</i></b>

XHTML 元素必须要被闭合

在 HTML 中我们通常可以使用不闭合的标签，也可使这个标签正常使用，例如input标签，img标签，在使用 XHTML 后这样的写法就会产生错误，在使用input标签后，我们也要进行闭合:

1
2
<input type='text' />
<img href='xx.jpg' />

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须要被嵌套于 <html> 根元素中。 其余所有的元素均可有子元素，子元素必须是成对的且呗嵌套在其父元素之中

1
2
3
4
<html>
<head>content</head>
<body>content</body>
</html>

2. form 标签的 action 和 method 属性分别是用来做什么的？

下面是一段form的代码：

1
2
3
4
5
<form action='form_action.asp' method='get'>
 <p>First:<input type="text" name="Fname" /></p>
 <p>Last:<input type="text" name="Lname" /></p>
 <input type="submit" value='login'>
</form>
1. 其中 action 的值必须要使用 URL ，是在于规定当提交表单时向何处发送表单数据

URL可能会出现的值：

  • 绝对 URL －指向其他站点的值（比如 src=’www.baidu.com/example.htm’）
  • 相对 URL －指向站点内的文件（比如 src=’example.htm’）
2.其中 method 的值分为两个 get/post ，规定了发送form-data 的 HTTP 方法。
POST 还是 GET ？

  • 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。

  • 如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择GET方法。如果采用POST方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。

  • 如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。

  • 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用GET方法，因为该方法允许把表单这样的参数包括进来作为URL的一部分。而另一方面，使用POST样式的应用程序却希望在URL后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。

    • 引自：W3C school

    CSS 知识考察

    1.CSS 中的 position 属性有哪几个常见取值（出了 inherit 和 initial），每个取值分别是什么意思？

    position的常见值：
    • position ＝ absolute
    • position ＝ relative
    • position ＝ fixed
    position = absolute

    生成绝对定位元素，相对于 static 定位以外的第一个父元素进行定位。
    元素的位置通过left，top，right以及bottom属性进行规定

    position = relative

    生成相对定位元素，相对于元素本身的位置进行定位

    position ＝ fixed

    生成绝对定位元素，相对于浏览器窗口进行定位，一般我们浏览网页的时候，页面右下角弹出的广告一般使用的就是fixed定位

    2.两个 inline-block 元素之间的空隙是什么？如何去除？你的去除方案有什么缺点？

    产生 inline-block 间距的原因是因为在两个标签之间，由于代码换行的原因，使得两个标签之间有一个空白的内容区域，这个空白的内容区域造成了inline-block的间距。

    如何去除元素间隙

    － 考虑到因为换行的原因，才产生的元素之间的间隙，所以我们可以将代码写在一行中，可是，连成一行会使得代码的可读性变差，所以我们可以使用下面的方式

    1
    2
    3
    4
    <li>nihao<
    /li><li>hello<
    /li><li>world<
    /li>

    但是这样做的缺点是影响了代码的美观，使得代码比较混乱

    －使用负 margin，margin负值的大小与上下问的字体大小相关，所以在采用负margin的时候，如果标签中文字的大小不同，就会使用多个负margin，使得代码的工作量变大

    －只闭合一个标签，在相同的元素中，我们只在最后一个标签上使用闭合，其他的均不闭合：

    1
    2
    3
    <li>nihao
    <li>hello
    <li>world</li>

    这样做的缺点是，在使用XTHML中，这样会显示错误

    － 使用font-size:0,在CSS中，将设置为inline-block 的元素的字体设为0；这个方式基本可以解决大部分浏览器下inline-block元素之间的间距问题，不过在Chrome其默认字体有最小字体保护，所以考虑到兼容性还要添加-webkit-text-size-adjust:none;
    不过这样做也有缺点，就是如果这个标签是子元素，就要在其中添加一个子元素，用来保护自己的字体大小不会发生改变。

    JS 知识考察

    1.JS 中如何将一个数组中重复的元素去除（去重）？具体来说，就是请你写一个函数 unique，这个函数接受一个数组 A，返回另一个数组 B，B 就是 A 去重后的数组。并说出你的方案的缺点。

    使用indexOf()判断法

    1
    2
    3
    4
    5
    6
    7
    8
    function unique(array){
     var narray = []
     for(let i=0; i < array.length; i++){
      if(n.indexOf(array[i]) == -1)
      n.push(array[i])
     }
     return n
    }

    缺点：由于indexOf()是ES5的方法，IE8一下不兼容，所以他的兼容性比较差

    2.JS 中如何浅拷贝一个数组？具体来说，就是请你写一个函数 copy，这个函数结构一个数组 A，返回另一个数组 B，B 就是 A 的一份复制。并说出你的方案的缺点。

    1
    2
    3
    4
    function Copy(array){
      narray = array.slice(0)
      return narray
    }

    这个方案，只是复刻了一个数组A，但是没有复制数组A中的方法，比如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var array = [1,2,3,4,'hello','First'],
     array.hello = function(){
      alert('hello')
     }
     function Copy(array){
       narray = array.slice(0)
       return narray
     }
    console.log(narray == array)//falses
    narray.hello()//narray.hello is not a function