前端面试题

时间 2019-11-25

标签端面试题繁體版

原文原文链接

HTML 部分php

1）DOCTYPE 是什么，有什么做用，为何要用 html5 标准的 DOCTYPE（初级）css

<!DOCTYPE> 声明位于文档的最前面（处于 <html> 标签以前）。告知浏览器以何种模式来渲染文档。html

<!DOCTYPE html>让浏览器以自身的最高模式来渲染，尽可能匹配 web 标准。html5

DOCTYPE 不存在或格式不正确会致使文档以混杂模式呈现。css3

2）请分别列举至少 3 个 html 中默认的块级元素和行内元素（初级）块级元素：div、table、ul、p、ol、form、h1~h六、dlweb

行内元素：span、a、em、strong、img、label 3）请列举出至少 3 个 html5 中新增的语义化标签（初级）ajax

main、nav、aside、article、header、footer、section 等数组

4）要实现一组单选框 radio，属性上须要知足什么条件（初级）浏览器

name 属性必须同样安全

5）从 SEO 角度，请给出至少 2 条 html 书写上的注意点（中级）

a 标签必定要写 title 属性

img 标签必定要写 alt、title 属性

选用语义化的 html 标签

6）请列举出至少 3 个 html5 中新增的表单控件（中级）

email、url、number、range、Date pickers、search、color、datalist

7）谈下对 html 语义化的理解（中级）

去掉或者丢失样式的时候可以让页面呈现出清晰的结构

有利于 SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；

方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，遵循 W3C 标准减小差别化。

CSS 部分

1）请列举出至少 5 个具备继承特性的 css 属性（初级）

font-size font-family color line-height text-align text-indent list-style 等，4 个便可

2）请阐述下 display:none 和 visibility:hidden 的区别（初级）

display:none 隐藏对应的元素，在文档布局中再也不给它分配空间 visibility:hidden 隐藏对应的元素，可是在文档布局中仍保留原来的空间。

3）请简述（或者图示）下 w3c 标准的盒模型（初级）

标准和模型包含：内容（content）、内边距（padding）、边框（border），外边距（margin）4）请列出 display 属性除了 none 之外的其余 3 个经常使用值，并分别说明每一个值的做用（初级）

display: inline|block|inline-block

inline 布局特色转为行内元素

block 布局特色转为块级元素

inline-block 布局上同时具备行内、块级元素的特征

5）在页面重构时，为何要先重置 css 样式，你本身是如何处理的？（初级）

6）请对下面的一段 css 属性定义的写法进行简化（初级） padding-left: 10px;

padding-right: 10px; padding-top: 4px; padding-bottom: 8px; padding: 4px 10px 8px

7）请列举出至少 4 个 css3 属性（初级）

border-raduis box-shadow text-shadow transform transition 等

8）请列举出至少 6 种 css 选择器（初级）

id 选择器（#id）

类选择器（.clazzname）

标签选择器（div、h一、p）

后代选择器（li a）

属性选择器（a[ref=”external”]）

孩子选择器（ul > li）

9）position 属性的 3 个值：relative、absolute、fixed 分别是相对什么进行定位（初级）relative：无 top、left 设置时，元素自身在文档流中的位置absolute：相对于上级元素中第一个 position 属性非 static 的元素

fixed：相对于浏览器视窗

10）css3 中哪一个属性能够对 DOM 元素的盒模型进行调整，该属性有哪些值，请分别阐述（或者图示）下不一样值对盒模型的影响（中级）

box-sizing: content-box|border-box

context-box 即 w3c 标准盒模型

border-box 使得 content 包含了 padding、border

11）请简述下 CSS sprites 的原理，代码层面涉及哪一个 css 属性（中级）

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中。这样能够减小不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是也有限

制，通常浏览器都是 6 个。再利用 CSS 的 background-image、background-repeat、background-position 的组合进行背景定位，background-position 能够用数字能精确的定位出背景图片的位置。

对于将来而言，http2 协议应用的话，就不须要这样作了。

12）css 中@import 指令的做用，它有何缺陷（中级）在 css 文件中引入外部的 css 代码块

缺陷：不利于多个 css 文件的并行下载，会形成阻塞，对页面渲染不利。

13）为何对元素使用了 float 浮动，必定要有清除浮动（中级）

浮动的框能够左右移动，直至它的外边缘遇到包含框或者另外一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动以后，不会影响到块级框的布局而只会影响内联框（一般是文本）的排列，文档中的普通流就会表现得和浮动框不存在同样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。

正是由于浮动的这种特性，致使本属于普通流中的元素浮动以后，包含框内部因为不存在其余普通流元素了，也就表现出高度为 0（高度塌陷）。在实际布局中，每每这并非咱们所但愿的，因此须要闭合浮动元素，使其包含框表现出正常的高度。

14）请列举 3 种经常使用的清除浮动的方式（中级）用空标签：经过一个内容为空的标签，并为其定义 CSS 代码：clear:both 来清除浮动

使用 overflow 属性：在须要清除浮动的元素中定义 CSS 属性：”overflow:hidden”，为了兼容 IE6 同时要加上”zoom:1″

使用 after 伪类清除浮动

15）请列举至少 2 个 IE7 中的常见 bug，以及解决方案（中级）

1，百分比布局时，IE7 的计算精度没有其余浏览器高，1 行 5 列，每列 width20%的浮动布局，在 IE7 会出现错位。

解决方案为，为 IE7 写 hack，*width:19.99% 2，IE7 不支持 opcity 属性。

解决办法：filter: alpha(opacity=60); opacity:0.6;

3，overflow:hidden 属性在 IE7 中不起做用，若是 overflow:hidden 父元素里面的子元素采用了绝对定位的方式布局，父元素上的 overflow: hidden 会失效。

解决方案：在 overflow:hidden 属性的元素上添加 position: relative; 4，IE7 浏览器对绝对定位的元素设置了很高的 z-index 确不能显示在上层。缘由是 IE7 中层级的比较先比较绝对定位元素的相对定位点元素的 z-index。因此，

解决方案：给相对定位点的元素设置较高的 z-index，若是祖先元素中有不少 position:relative 的元素，则比较的是第一个祖先元素 position：relative

的层级，给第一个祖先元素设定较高的层级便可。

16）页面重构过程当中，从 ps 中导出图片素材时，如何选取合适的导出格式（中级）当图片色彩丰富且无透明要求时，建议保存 JPG 格式而且选择合适的品质。

当图片色彩不太丰富(单一颜色的小图标)不管有没有透明度的要求，请保存为 png-8 格式当图片有半透明要求时，请保存为 png-24 格式

17）请简述下对渐进加强、优雅降级的理解（中级）

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

优雅降级是从复杂的现状开始，并试图减小用户体验的供给，而渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要。降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

18）什么是 BFC，请谈谈对此概念的理解（高级）

BFC，块级格式化上下文，一个建立了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。（W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其余元素的关系和相互做用。）

19）请简述下低版本 IE（6,7）中下特有的 hasLayout 属性（高级）

“Layout”是一个 Internet Explorer for Windows 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其余元素交互和创建联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性能够经过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具备”layout”。

IE6-7 使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责自己及其子元素的尺寸设置和定位。若是一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

JavaScript 部分

1）JavaScript 有哪几种数据类型（初级）

简单：Number，Boolean，String，Null，Undefined

复合：Object，Array，Function

2）请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：（初级）

var url = “枫芸志″;

function parseQueryString(url) { var params = {};

var arr = url.split("?"); if (arr.length <= 1){

return params;

}

arr = arr[1].split("&");

for (var i = 0, l = arr.length; i < l; i++) { var a = arr[i].split("=");

params[a[0]] = a[1];

}

return params;

}

3）js 中 split()和 join() 方法的区别（初级）

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

4）已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”。（初级） function combo(str) {

var arr = str.split('-');

for(var i = 0; i< arr.length; i++){

arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);

}

str = arr.join(''); return str;

}

5）请计算下面变量的值（初级）

var a= (Math.PI++);

var b = (Math.PI++);

alert(a);

alert(b);

答案: 3.141592653589793，3.141592653589793 6）请写出如下 js 表达式的值（初级）

4+"3"

3+"a"

var a="4"; a+3

3+null

3+true

3+“a”-3

undefined==null

1===true

答案："43"，"3a"，"43"，3，4，NaN，true，false

7）有以下 html，如何用 js 得到被选中的 option 的 text 描述（非 value）（初级）

</select>

答案：

var s = document.getElementById("select_id"), index = s.options.selectedIndex;

var text = s.options[index].text; alert(text);

8）js 怎样添加、移除、移动、复制、建立和查找节点（初级）

1）建立新节点

createDocumentFragment() //建立一个 DOM 片断

createElement() //建立一个具体的元素

createTextNode() //建立一个文本节点

2）添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3）查找

getElementsByTagName() //经过标签名称

getElementsByName() //经过元素的 Name 属性的值

getElementById() //经过元素 Id，惟一性

9）看下面代码，给出输出结果。（初级）

for(var i = 1; i < 3; i++){

setTimeout(function(){

console.log(i);

}, 10);

}

答案：3,3

10）按顺序写出 alert 弹出窗口的内容。（中级）

var name ="The Window";

var object = {

name : "My Object",

getNameFunc : function() {

alert('1.' + this.name);

return function() {

return this.name;

};

}

};

var func = object.getNameFunc();alert('2.' + func());

alert('3.' + func.call(object)); alert('4.' + func.apply(object));

答案: 1.My Object，2.The Window， 3.My Object， 4.My Object

11）简述建立 ajax 过程（中级）

1. 建立`XMLHttpRequest`对象,也就是建立一个异步调用对象.

2. 建立一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

3. 设置响应`HTTP`请求状态变化的函数.

4. 发送`HTTP`请求.

5. 获取异步调用返回的数据.

6. 使用 JavaScript 和 DOM 实现局部刷新. var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send() xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

}

12）说说你对做用域链的理解（中级）

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到 window 对象即被终止，做用域链向下访问变量是

不被容许的。

13）说说你对闭包的理解（中级）

使用闭包主要是为了设计私有的方法和变量。闭包的优势是能够避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易形成内存泄露。

闭包有三个特性：

1. 函数嵌套函数

2. 函数内部能够引用外部的参数和变量

3. 参数和变量不会被垃圾回收机制回收

14）null 和 undefined 的区别？（中级）

null 是一个表示"无"的对象，转为数值时为 0；undefined 是一个表示"无"的原始值，转为数值时为 NaN。

当声明的变量还未被初始化时，变量的默认值为 undefined。

null 用来表示还没有存在的对象，经常使用来表示函数企图返回一个不存在的对象。

undefined 表示"缺乏值"，就是此处应该有一个值，可是尚未定义