Web前端面试题目汇总

二、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

五、什么是CSS Hack?

通常来讲是针对不一样的浏览器写不一样的CSS,就是 CSS Hack。
IE浏览器Hack通常又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：

// 一、条件Hack<!--[if IE]><style>
            .test{color:red;}
      </style><![endif]-->// 二、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */
    }
   // 三、选择符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

九、浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

怎样添加、移除、移动、复制、建立和查找节点？

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

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

3）查找
getElementsByTagName() //经过标签名称
getElementsByName() //经过元素的Name属性的值
getElementById() //经过元素Id，惟一性

如何消除一个数组里面重复的元素？

// 方法一：var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];for(var i =0,len =arr1.length; i< len; i++){if(arr2.indexOf(arr1[i]) <0){arr2.push(arr1[i]);}}document.write(arr2);// 1,2,3,4,5,6

请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 创建TCP链接后发起http请求

d. 服务器端响应http请求，浏览器获得html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

写一个function，清除字符串先后的空格。（兼容全部浏览器）

functiontrim(str) {if (str &&typeof str ==="string") {returnstr.replace(/(^\s*)|(\s*)$/g,"");//去除先后空白符}}

 

使用正则表达式验证邮箱格式

var reg =/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;var email ="example@qq.com";console.log(reg.test(email));// true  

对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 作好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

如何解决跨域问题

JSONP：

原理是：动态插入script标签，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。

因为同源策略的限制，XmlHttpRequest只容许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优势是兼容性好，简单易用，支持浏览器与服务器双向通讯。缺点是只支持GET请求。

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里

 

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script>     function createJs(sUrl){           var oScript = document.createElement('script');         oScript.type = 'text/javascript';         oScript.src = sUrl;         document.getElementsByTagName('head')[0].appendChild(oScript);     }       createJs('jsonp.js');       box({        'name': 'test'     });       function box(json){         alert(json.name);     } </script>