前端问题整理

转载 2016年08月31日 11:00:18
作者:前端大牛带你飞
链接:https://zhuanlan.zhihu.com/p/22201821
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

HTML 部分

1)DOCTYPE 是什么,有什么作用,为什么要用 html5 标准的 DOCTYPE(初级)

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

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

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

2)请分别列举至少 3 个 html 中默认的块级元素和行内元素(初级)块级元素:div、table、ul、p、ol、form、h1~h6、dl

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

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、h1、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 id="select_id">

<option vlue="1">text1</option> <option vlue="2">text2</option> <option vlue="3">text3</option> <option vlue="4">text4</option>

</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 表示"缺少值",就是此处应该有一个值,但是还没有定义

Web 前端工程师课程 第2周 (new)

Web 前端工程师课程 第2周 (new)
  • 2017年11月06日 20:02

前端问题

1.常见布局  div ul li           div dl dt  ,表格布局的问题主要是因为表格要全部加载完了才能展现...
  • tannongchun
  • tannongchun
  • 2014-12-08 12:22:45
  • 271

前端开发反思总结

今天有幸看到Scott老师分享的视频, 基于我现在开发的前端项目, 感触还是很深的,在这里记录下自己的感受, 以备以后过来看看 以前的前端就如下面这张图这样, 需要前端把界面设计好交付给后端, 然...
  • SharkXGbaby
  • SharkXGbaby
  • 2017-11-12 09:57:43
  • 599

微信小程序 前端源码逻辑和工作流详解

看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简。 废话不多说,直接分析前端代码。个人观点,难免有疏漏,仅供参考。 文件基本结构: ...
  • zhanglir333
  • zhanglir333
  • 2018-01-13 18:18:01
  • 85

App测试流程

转自:http://www.cnblogs.com/crdym/p/5281809.html 1. UI 测试 app主要核ui与实际设计的效果图是否一致;交互方面的问题建议,...
  • shyu1989
  • shyu1989
  • 2016-08-08 12:05:12
  • 236

移动端---前端在安卓与ios上遇到的坑

最近一直在写移动端项目,遇到不少适配安卓与ios及其他的问题,现在进行一个回顾 先是要如何判断安卓与ios var u = navigator.userAgent; var is...
  • beautifultian
  • beautifultian
  • 2017-11-01 14:55:49
  • 1847

前端问题积累

这两天一直在该前端的一些bug,修改的过程中也逐渐清楚了一些以前模糊的知识,这里记录一下。 一、javaScript的onchange和onblur事件 //第一种写法 //第二种写法 ...
  • u013034640
  • u013034640
  • 2017-02-08 23:53:36
  • 358

前端问题(1)

What does a doctype do?
  • echody
  • echody
  • 2016-12-22 14:32:23
  • 241

前端问题(11)

Why is it generally a good idea to position CSS < link>s between < head> and JS < script>s just befo...
  • echody
  • echody
  • 2017-02-11 20:42:20
  • 105

前端问题解析

1.JS中DOM节点操作,添加,删除,插入,查询,创建,复制节点 //1.创建节点 document.createElement();//创建一个新元素 document.cre...
  • Elroy_html5
  • Elroy_html5
  • 2017-05-08 14:48:38
  • 65
收藏助手
不良信息举报
您举报文章:前端问题整理
举报原因:
原因补充:

(最多只允许输入30个字)