三像素问题html,前端问题汇总

HTML和CSS问题

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

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 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的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档

严格模式下：页面排版及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有哪些新特性？

CSS3实现圆角(border-radius)，阴影(box-shadow)，

对文字加特效(text-shadow、)，线性渐变(gradient)，旋转(transform)

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询，多栏布局

border-image

16，H5新特性：

拖拽释放(Drag and drop) API

语义化更好的内容标签(header,nav,footer,aside,article,section)

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

17，简述ajax 的过程。

创建XMLHttpRequest对象,也就是创建一个异步调用对象

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

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

发送HTTP请求

获取异步调用返回的数据

使用JavaScript和DOM实现局部刷新

18，解释jsonp的原理，以及为什么不是真正的ajax

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

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

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

20，js延迟加载的方式有哪些？

方案一：

方案二：

方案三：动态创建

方案四：AJAX eval(使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本)

方案五：iframe方式

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

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

22，javascript继承的 6 种方法？

原型链继承

借用构造函数继承

组合继承(原型+借用构造)

原型式继承

寄生式继承

寄生组合式继承