持续更新的前端面试题-----

1，web标准和w3c标准是什么？

　　标签闭合，标签小写，不乱嵌套，使用外链css、js，结构行为表现的分离。

2，HTML没有单位的属性有哪些？

　　font-weight:100;  z-index:999;  zoom:1;

3,form中的readonly，disabled有什么区别？

　　readonly:只读，不可以修改。

　　disabled:禁用，文本框显示灰色。

　　另：methods:是表单提交的方式。action:是表单数据提交给后台数据库的入口。

4,行内/块级元素有哪些？

　　行内：a,b, br, span,  select ,strong, input，img

　　块级：div,p ,h1-h6, form,ul,dl,ol,table

5,盒模型

　　content、border、 padding、 margin 

5.1，盒模型有哪两种模式？

　　标准模式：box-sizing: content-box　　//宽高不包括内边距和边框

　　怪异模式：box-sizing: border-box

6,display 有什么属性？有什么作用？

　　display:block;　　//行内元素转为块级元素

　　display:inline;　　//块---行内

　　display:inline-block;　　//转为内联元素

　　display:box;　　//css3新增的弹性布局

6.1,延申：display: none 或者 visibility: hidden，v-if 或者 v-show。

　　总结： display: none属性 和 v-if事件 都是不占位置的了。

 　　　　　visibility: hidden和v-show，还占有位置，只是隐藏了。

7，css有哪些选择器？9种选择器：

　　id：#, 类：.，标签：a，属性：a[ rel = external ]，后代：li a，

　　子选择器，ul<<li伪类，a:hover通配符，*相邻 :h1+p

　　优先级：!import > 行内 > id > 类 > 标签 

10,前端由哪几层组成？作用是什么

　　三层：结构html：页面的骨架 , 样式css：渲染页面, 行为js：数据交互，实现动画效果.

11，alt和title的区别

　　alt:图片属性，当图片显示不了的时候显示的。

　　title:是网站标题

12，什么是语义化的HTML?

　　标签的语义化，标签的合理使用，对于搜索引擎的抓取有好处，所以不要一直使用div，有nav,footer,header, section等等可用于布局。

　　作用：方便搜索引擎高效处理信息。有利于SEO，有助于爬虫抓取更多的有效信息。

13，五大浏览器内核

　　谷歌和苹果：-webkit-   IE:-ms-   火狐：-moz-    欧朋：-o-

14,link和@import的区别

　　1，加载：先加载link，再加载@import。而且link除了能加载css外，还可以RSS事务，而@import只能加载CSS

　　2, 兼容：link是标签，无兼容问题。

15，label的作用和用法

　　点击这个标签的时候，所绑定的元素将获取焦点，用for属性去实现：

　　<label for="name">名字</label><input type="text" id="name">

16，HTML与XHTML有什么区别？

　　。所有标签必须有一个结束的标签

　　。标签的属性和元素必须小写，并且属性用引号括起来。

　　。所有的XML必须合理嵌套。

17，cookie和session的区别？

　　cookie: 数据保存在浏览器上，不安全，数据保存大小有限制，一个不能超过4K。很多浏览器只能保存20个cookie.

　　session: 数据保存在内存，安全，但是会占用服务器性能。

18,优化前端的方法

　　1）css放顶部，JS放底部

　　2）使用console.time打印耗时

　　3）异步路由

　　4）减少无意意义的标签嵌套

　　5）使用雪碧图

　　6）AJAX

　　7）缓存

　　8）合并HTTP请求

　　9）压缩资源

　　10）优化代码，减少不必要的循环等

19，HTTP有几种请求方式？

　　get:  发送一个请求来取得服务器上的某一资源

　　post:  向URL指定的资源提交数据

20，Doctype的作用？还有严格模式和混杂模式的区别是啥？

　　<!DOCTYPE>位于文档的前面，主要是用来告诉浏览器解析器要以哪种文档类型、规范来解析这个文档。

　　严格模式：以浏览器支持的最高标准运行。

　　混杂模式：会以宽松向后兼容的方式显示。

21，css中，inlineinline-blocklock，有什么区别？

　　inline: 在一行显示，不能设置宽高。

　　inline-block: 在一行显示，以块级的形式存在，可以设置宽高。（ie6 不支持）

　　block: 不在一行显示，可以设置宽高。

22，常见的兼容性问题？

　　1，各个浏览器默认的paddimg    margin不同。解决：样式开头加*{padding: 0; margin: 0;}

JS方面

1，js的数据类型有啥

　　七大数据类型：3个基本：string, number,  boolean, 2个复杂object, function ,2个不含任何值的null, undefined .

　　三个对象类型：object , date , array .

1-1: 数据类型转换：

　　1) 使用 typeof 操作符来查看 JavaScript 变量的数据类型

　　console.log(typeof "123")

　　2)将数字转换为字符串：x.toString() 或则： String(x)

2,document.write和innerHTML的区别？

　　document.write：

　　innerHTML：

3，已知ID的input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

　　document.getElementById('id').value;

4，==和===的区别

      ==：是两个值相等但是两个值的类型不同。

　　（1）两个值相等的情况：一个值是null，一个值是undefind，那么相等。

　　（2）一个是字符串，一个是数值。要把字符串转为数值再比较两个是否相等。

     ===：两个值的数值和类型都相等。

     "123"="123",true=true, false=false, null=null, undefind=undefind...

5,null和 undefind的区别

　　null: null类型，代表一个空值，代表一个空对象的指针，可以清空一个对象，可以认为它是一个特殊的对象值。

　　undefind: 是声明了一个变量却没有赋值，输出的就是undefind.

6，get和post的区别

　　(1)URL:  get，url参数可见。post, url参数不可见。

　　(2)传输数据的大小：get,  数据大小不超过2k-4k。post,  可以无限大。也可以根据配置文件设定

　　(3)后退页面的反应：get,  请求页面后退时，不产生影响。post,  会重新提交请求。

　　(4)缓存：get, 可以缓存。post, 不可以缓存。

　　(5)参数：get, 参数会被完整保留在浏览器记录里面。post, 参数不会被保留

7，从输入网址到页面呈现发生了什么？

　　 分为两部分

　　（1）网络通讯：地址解析---解析出的域名进行 DNS 解析---通过ip寻址和arp找到服务器---服务器和浏览器进行tcp三次握手，建立链接---浏览器发送数据等待服务器响应---

　　　　服务器处理数据做出响应---浏览器收到请求得到HTML代码。---

　　（2）页面渲染：解析HTML文件，创建DOM树。---解析CSS，形成CSS对象模型。---将HTML和CSS合并创建渲染树。---布局和绘制。

8，new一个实例对象会发生什么？

　　创建一个新对象---将构造函数的作用域赋给新对象（this）---执行构造函数中的代码---返回该函数。

9，箭头函数与普通函数的区别

　　箭头函数的this   永远指向其上下文的this.

　　普通函数的this   则指向调用它的对象

10,下面函数会输出什么？

　　var a=10;

　　function foo(){

　　console.log(a);

　　var a =20;

　　console.log(this.a);

　　}

　　foo()；

　　答案：undefind.   10

　　解析：1)变量提升，因为首先会执行函数内部的代码，而var  a 会提升，变成：

　　function foo(){

　　var a 

　　console.log(a);

　　a =20;

　　}

　　所以。。。。

　　2)this相当于windows，所以是10

11，JS中怎样检测一个变量是string类型？请写出函数实现

　　var a="123"

　　console.log(typeof(a))

12,用正则表达式除去字符串空格

　　var a=" 23 23 ";

　　var b=a.replace(/s*/g,"");

　　console.log(b);

13,如何获得浏览器URL查询字符串中的参数？

14，JS怎么添加、删除、查询？

　　1）创建新节点：

　　createDocumentFragment()　　//创建一个DOM片段

　　createElement() 　　//创建一个具体的元素//在指定节点前插入新节点

　　createTextNode　　 //创建一个文本节点

　　2）添加，删除，替换，插入

　　appendChild() 　　//添加元素  将创建的节点添加到Id为d的div里

　　removeChild()　　//删除

　　replaceChild()　　//替换

  d.insertBefore(p,a);//参数1：要添加的元素 参数2：要放到哪个节点的前面

　　3)查找

　　getElementById()//根据ID

　　getElementByName()//根据属性

　　　getElementByTagName()//根据标签名称

15，说明下面代码结果，并且说明理由。

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

　　setTimeout(function(){

　　console.log(i);

　　},1000)}

　　答案：输出9次10，因为setTimeout是异步操作，。。

16，返回值，下面的结果是什么

　　function test(){

　　console.log(123);

　　return

　　}

　　var a=test();

　　console.log(a);

　　答案：undefind.没有返回值。

　　如果

　　function test(){

　　console.log(123);

　　return

　　}

　　var a=test();

　　console.log(a);

　　则返回1.

17，徒手撸一个现在时间：

　　var date =new Date();

　　var year = date.getFullYear();

　　var month = date.getMonth()+1;

　　var day = date.getDate();

　　var hours = date.getHours();

　　var minute = date.getMinutes();

　　var second = date.getSeconds();　

　　console.log("现在时间是："+year+"-"+month+"-"+day+"-"+hours+"-"+minute+"-"+second)

18,闭包是什么？有什么作用

　　1）不会垃圾回收

　　2）内部声明的函数可以被外部访问

　　function f1(){

　　var a =1;

　　function f2(){

　　console.log(a)

　　return f2

　　}

　　var result=f1();

　　result()

19，js的new操作符做了哪些事情？

　　new操作符新建了一个空对象，这个对象原型指向构造函数的prototype, 执行构造函数后返回这个对象。