html+js面试题。

一、html基础
1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

2.1、请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

2.2、Doctype的作用？严格模式与混杂模式的区别？
用于告知浏览器该以何种模式来渲染文档
严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

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

3、div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

4、 img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

5、为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

6、cookie、sessionstorage和localstorage
cookie较小，不能超过4k，localStorage,sessctionStorage可储存容量较大，有5M
cookie有时效性，localStorage在客户端长期保护数据，sesstionStorage保存会话数据，关闭标签页或浏览器数据消失
cookie可以跟后端交互，cookie数据始终在同源的http请求中携带；这两个只能存储在浏览器

7、简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

8、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

9、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

10、谈谈以前端角度出发做好SEO需要考虑什么？
了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
主要的互联网目录
Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
合理的标签使用

11、CSS都有哪些选择器？
派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如div .a{ }）
群组选择器（利用逗号间隔，比如p,div,#a{ }）
那么问题来了，CSS选择器的优先级是怎么样定义的？
基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1

xxx li 优先级 100 +1

12、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、 、 、。

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

14、CSS中link和@import的区别是：
Link属于html标签，而@import是CSS中提供的
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

15、IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。解决：加入_display：inline
16、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图片

17、CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 padding;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

18、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1. block 象块类型元素一样显示。
   none 缺省值。向行内元素类型一样显示。
   inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
   list-item 象块类型元素一样显示，并添加样式列表标记。
2. position的值
   *absolute
   生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
   *fixed （老IE不支持）
   生成绝对定位的元素，相对于浏览器窗口进行定位。

• relative
  生成相对定位的元素，相对于其正常位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中
  *（忽略 top, bottom, left, right z-index 声明）。
• inherit 规定从父元素继承 position 属性的值。
  19、哪些css属性可以继承？
  可继承： font-size font-family color, ul li dl dd dt;
  不可继承 ：border padding margin width height ;

二、JS基础

1、javascript的typeof返回哪些数据类型
object number function boolean underfind string

2、例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,Number()）
隐式（==）
1==”1”//true
null==undefined//true

3、split() join() 的区别
前者是切割成数组的形式，
后者是将数组转换成字符串

4、数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

5、IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

6、IE和标准下有哪些兼容性的写法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

7、call和apply的区别
call和apply相同点：
都是为了用一个本不属于一个对象的方法，让这个对象去执行
toString.call([],1,2,3)
toString.apply([],[1,2,3])

8、闭包
当一个函数返回它内部定义的一个函数时，就产生了一个闭包
闭包的作用
1、让变量长期驻扎在内存不被释放，因为内部函数依赖外部变量，所以垃圾回收机制不会回收外部变量。当希望变量不会被重置的时候就可以用到，比如循环中直接找到对应元素的索引
2、可以通过回调函数获取异步的数据
3、把函数内部的数据变成外部可以调用
4、避免全局变量的污染

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

10、添加 删除 替换 插入到某个接点的方法
obj.appendChild()
obj.insertBefore() //原生的js中不提供insertAfter();
obj.replaceChild()//替换
obj.removeChild()//删除

11、javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
http,ftp:协议
主机名；localhost
端口名：80:http协议的默认端口
https:默认端口是8083
同源策略带来的麻烦：ajax在不同域名下的请求无法实现，
如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

11、数组去重
function arr(arr){
var result = [];
for(var i = 0;i if(result.indexOf(arr[i])==-1){
result.push(arr[i])
}
}
console.log(result);
}
冒泡排序
var arr = [1,22,2,2,4,5,5];
for(var i = 0;i < arr.length - 1 ; i++){
for( var j = 0 ; j < arr.length -1 - i ; j++){
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr)

12、怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

13、Javascript创建对象的几种方式？
工厂方式，构造函数方式，原型模式，混合构造函数原型模式，动态原型方式

14、jQuery和Zepto的区别？各自的使用场景？
jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端
jquer mobile相对于zepto功能强大，但是体积也很庞大，zepto非常的轻量

15、针对 jQuery 的优化方法？
a、优先使用ID选择器
b、jquery获取到的DOM元素如果需要多次使用，建议使用一个变量将其保存起来，因为操作DOM的过程是非常耗费性能的
c、在class前使用tag(标签名)
d、给选择器一个上下文
e、慎用 .live()方法（应该说尽量不要使用）
f、使用data()方法存储临时变量

16、对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术。

17、请用正则表达式写一个简单的邮箱验证。
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;

18、你用过require.js吗？它有什么特性？
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

19、分别阐述split(),slice(),splice(),join()？
join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于Array
split()即把字符串分离开，以数组方式存储。归属于Stringstring
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组。

20、javascript继承的 6 种方法？

1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

21、如何编写高性能的Javascript？
使用 DocumentFragment 优化多次 append
通过模板元素 clone ，替代 createElement
使用一次 innerHTML 赋值代替构建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
使用 Array 做为 StringBuffer ，代替字符串拼接的操作
将循环控制量保存到局部变量
顺序无关的遍历时，用 while 替代 for
将条件分支，按可能性顺序从高到低排列
在同一条件子的多（ >2 ）条件分支时，使用 switch 优于 if
使用三目运算符替代条件分支
需要不断执行的时候，优先考虑使用 setInterval

22、数组和对象有哪些原生方法，列举一下？
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
Object对象的常用方法
Object.hasOwnProperty( ) 检查属性是否被继承
Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性
Object.toLocaleString( ) 返回对象的本地字符串表示
Object.toString( ) 定义一个对象的字符串表示
Object.valueOf( ) 指定对象的原始值

23、模块化开发怎么做？
理解模块化开发模式：浏览器端requirejs，seajs；服务器端nodejs；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用