关闭

前端问题整理

68人阅读 评论(0) 收藏 举报
作者:前端大牛带你飞
链接: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 表示"缺少值",就是此处应该有一个值,但是还没有定义

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:835次
    • 积分:38
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档