前端问题汇总

HTML和CSS问题

1,每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)

2,为什么利用多个域名来存储网站资源会更有效?

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数,优化页面响应速度
防止不必要的安全问题

3,简述一下src与href的区别。

src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;
href是Hypertext Reference的缩写,指向网络资源所在位置

4,超链接访问过后hover样式就不出现的问题是什么?如何解决?

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

5,css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向:line-height
水平方向:letter-spacing
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:可以用于消除inline-block元素间的换行符空格间隙问题。

6,Sass、LESS是什么?大家为什么要使用他们?

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。

7,为什么要初始化样式?

由于浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,若不初始化会造成不同浏览器之间的显示差异
但是初始化CSS会对搜索引擎优化造成小影响

8,BFC是什么?

BFC(块级格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用

9,html语义化是什么?

当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别)
便于项目的开发及维护,使html代码更具有可读性,便于其他设备解析。

10,Doctype的作用?严格模式与混杂模式的区别?

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容

11,html常见兼容性问题?

1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline-3px
3.超链接hover 点击后失效 使用正确的书写顺序 link
visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
9.IE5-8不支持opacity,解决办法:
.opacity {
opacity: 0.4
filter:
alpha(opacity=60); /* for IE5-7 /
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /
for IE 8*/
}
10 . IE6不支持PNG透明背景,解决办法: IE6下使用gif图片

12,对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维
护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

javascript基础

1,JSON数据格式转换

对象转化成字符串 Stringify(), 字符串转化成json对象 JSON.parse();

2,闭包是什么?

闭包就是在一个函数中,调用另一个函数,里面的函数就形成了闭包,闭包限定了一定的作用域,保证里面的变量不会被释放出来。
缺点:滥用闭包会造成内存泄漏,因此包裹函数内部的变量就永远不会被释放出来,所以我们需要在必要的时候,及时释放这个闭包函数。

3,如何阻止事件冒泡和默认事件

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9之前
阻止默认事件:
为了不让a点击之后跳转,我们就要给他的点击事件进行阻止
return false ;
e.preventDefault();

4,怎样添加、移除、移动、复制、创建和查找节点(原生JS,实在基础,没细写每一步)

1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

5,document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
window.onload:不仅仅要在结构和样式加载完,还要执行完所有的样式、图片这些资源文件,全部加载完才会触发window.onload事件
Document.ready原生种没有这个方法,jquery中有 $().ready(function),文档加载完成后就执行ready事件

6,把两个数组合并,并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

reverse(); 颠倒数组顺序

7,documen.write和innerHTML 的区别?

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

8,split() join() 的区别

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

9,数组方法pop() ,push() , unshift() ,shift()各表示什么意思?

答:Push()尾部添加、pop()尾部删除、Unshift()头部添加、shift()头部删除

10,HTTP协议中,GET和POST有什么区别?分别适用什么场景?

get传送的数据长度有限制,post没有
get通过url传递,在浏览器地址栏可见,post是在报文中传递
适用场景:
post一般用于表单提交
get一般用于简单的数据查询,严格要求不是那么高的场景

11,HTTP状态消息200302 304 403 404 500分别表示什么

200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
302:请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的
304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。
403:服务器已经理解请求,但是拒绝执行它。
404:请求失败,请求所希望得到的资源未被在服务器上发现。
500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。

12,请列举js数组类型中的常用方法 方法描述

concat(),连接两个或更多的数组,并返回结果。
join(),把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop(),删除并返回数组的最后一个元素
push(),向数组的末尾添加一个或更多元素,并返回新的长度。
reverse(),颠倒数组中元素的顺序。
shift(),删除并返回数组的第一个元素
slice(),从某个已有的数组返回选定的元素
sort(),对数组的元素进行排序
splice(),删除元素,并向数组添加新元素。
toSource(),返回该对象的源代码。
toString(),把数组转换为字符串,并返回结果。
toLocaleString(),把数组转换为本地数组,并返回结果。
unshift(),向数组的开头添加一个或更多元素,并返回新的长度。
valueOf(),返回数组对象的原始值

13,主流浏览器内核

IE trident 火狐gecko 谷歌苹果webkit Opera:Presto

14,程序中捕获异常的方法?

window.error
try{}catch(){}finally{}

15,CSS3有哪些新特性?
  1. CSS3实现圆角(border-radius),阴影(box-shadow),
  2. 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
    3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
  3. 增加了更多的CSS选择器 多背景 rgba
  4. 在CSS3中唯一引入的伪元素是::selection.
  5. 媒体查询,多栏布局
  6. border-image
16,H5新特性:
  1. 拖拽释放(Drag and drop) API
  2. 语义化更好的内容标签(header,nav,footer,aside,article,section)
  3. 音频、视频API(audio,video)
  4. 画布(Canvas) API
  5. 地理(Geolocation) API
  6. 本地离线存储localStorage 长期存储数据,浏览器关闭后数据不丢失;
  7. sessionStorage 的数据在浏览器关闭后自动删除
  8. 表单控件,calendar、date、time、email、url、search
  9. 新的技术webworker, websocket, Geolocation
17,简述ajax 的过程。
  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新
18,解释jsonp的原理,以及为什么不是真正的ajax

Jsonp并不是一种数据格式,而json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,具体是通过动态创建script标签,然后通过标签的src属性获取js文件中的js脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上使用的并不是ajax技术

19,ajax请求时,如何解释json数据

使用eval() 或者JSON.parse() 鉴于安全性考虑,推荐使用JSON.parse()更靠谱,对数据的安全性更好。

20,js延迟加载的方式有哪些?

方案一:<script>标签的async="async"属性(详细参见:script标签的async属性)
方案二:<script>标签的defer="defer"属性
方案三:动态创建<script>标签
方案四:AJAX eval(使用AJAX得到脚本内容,然后通过eval_r(xmlhttp.responseText)来运行脚本)
方案五:iframe方式

21,JS 怎么实现一个类。怎么实例化这个类

严格来讲js中并没有类的概念,不过js中的函数可以作为构造函数来使用,通过new来实例化,其实函数本身也是一个对象。

22,javascript继承的 6 种方法?
  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承(原型+借用构造)
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,978评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,954评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,623评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,324评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,390评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,741评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,892评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,655评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,104评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,254评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,834评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2 348

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,460评论 1 19
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,307评论 24 450
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,114评论 2 19
  • 很多时候,开始怀疑是不是孕期抑郁症了,莫名其妙的心里烦躁不安和焦虑,甚至有种对方如何做都是不对的感觉…… 慢慢的可...
    lucy陈1021阅读 126评论 0 0
  • 两个月前上以前那个已经快两年不用的微博时,看到我亲爱的表妹在百词斩背GRE单词的记录。以前也下过百词斩,但是每次都...
    OScarsab阅读 510评论 0 1