前端面试题目

Javascript部分

1、Javascript跨域jsonp 的原理是什么?

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。（动态创建一个script标签）

2、Xml 和json 的区别?

Xml 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。
XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

JSON(JavaScript Object Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式，同时也具备类似于C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)体系的行为。这些特性使JSON成为理想的数据交换语言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。

3 、作用域链的理解?

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

4、 创建ajax 的过程?

step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象； 
step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息； 
step3. 设置响应HTTP状态变化的函数； 
step4. 发送HTTP请求； 
step5. 获取异步调用返回的数据； 
step6. 使用javascript和DOM实现局部刷新；

5、Javascript 的垃圾回收方法?

1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

6、Javascript 的垃圾回收方法?

引用计数(reference counting)和标记清除（mark and sweep）

7、Javascript 继承的6 种方法?

1.原型链

基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

2.借用构造函数

基本思想：在子类型构造函数的内部调用超类构造函数，通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

3.组合继承

基本思想：将原型链和借用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式。

4.原型式继承

基本想法：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型。

5.寄生式继承

基本思想：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。

6.寄生组合式继承

基本思想：通过借用函数来继承属性，通过原型链的混成形式来继承方法

8、说说你对闭包的理解?

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
　　简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

9、Cookie 的弊端是什么?

优点：极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
    因为这些弊端（主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用），IE8以后，就出现一个web storage；它仅仅是为了本地缓存数据而存在；但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在。

10、htmI 和xhtmI 的区别?

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

11、一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么?

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

12、 Javascript 的同源策略?

JS只能与同一个域中的页面进行通讯.如:运行在 http://domain:port/app1/page.html;上的脚本不能和http://domain:port/app3/page.html;的浏览器窗口或iframe 进行交互.不能访问它的cookie,接收它的HTTP响应等(但它可以向任何其他源发送HTTP请求);AJAX 和 webservice 也受此策略管束.这种手段就叫同源策略;

两个脚本被认为是同源的条件是:

协议相同(比如都是http://)

端口相同(通常都是80)

域名相同

13、Webpack 的两大特色?

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

14、TCP 与UDP 的区别?

TCP与UDP基本区别
  1.基于连接与无连接
  2.TCP要求系统资源较多，UDP较少； 
  3.UDP程序结构较简单 
  4.流模式（TCP）与数据报模式(UDP); 
  5.TCP保证数据正确性，UDP可能丢包 
  6.TCP保证数据顺序，UDP不保证 　　
UDP应用场景：
   1.面向数据报方式
  2.网络数据大多为短消息 
  3.拥有大量Client
  4.对数据安全性无特殊要求
  5.网络负担非常重，但对响应速度要求高
具体编程时的区别
     1.socket()的参数不同 
2.UDP Server不需要调用listen和accept 
3.UDP收发数据用sendto/recvfrom函数 
4.TCP：地址信息在connect/accept时确定 
5.UDP：在sendto/recvfrom函数中每次均 需指定地址信息 
6.UDP：shutdown函数无效

15、XSS 的原理及防范?

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

XSS防范方法

1.代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。

2.避免直接在cookie 中泄露用户隐私，例如email、密码等等。

3.通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。

4.尽量采用POST 而非GET 提交表单

16、什么是Etag?

ETag 是 Entity Tag 的缩写，中文译过来就是实体标签的意思。在HTTP1.1协议中其实就是请求HEAD中的一个属性而已。常情况下，ETag更类似于资源指纹(fingerprints)，如果资源发生变化了就会生成一个新的指纹，这样可以快速的比较资源的变化。在服务器端实现中，很多情况下并不会用哈希来计算ETag，这会严重浪费服务器端资源，很多网站默认是禁用ETag的。有些情况下，可以把ETag退化，比如通过资源的版本或者修改时间来生成ETag。

17、栈和堆的区别?

栈(stack)会自动分配内存空间，会自动释放。堆(heap)动态分配的内存，大小不定也不会自动释放。

18、闭包的3 个特性?

作用域链，垃圾（内存）回收机制，函数嵌套

19、Call 和apply 的区别与作用?

它们各自的定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。

call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处：

都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处：

apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。

call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。

实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

20、Jquery对象和dom 对象是怎么转换的?

jQuery对象转成DOM对象：

（1）jQuery对象实际上是一个数据对象，可以通过[index]方法获得相应的DOM对象。

如：var $v=$("#v"); //得到jQuery对象

var v=$("v")[0];//转换成DOM对象

（2）jQuery本身可以通过.get(index)方法得到相应的DOM对象

如：var $v=$("#v"); //得到jQuery对象

var v=$v.get(0);

DOM对象转成jQuery对象：

对于已经是一个DOM对象，只需要用$()将DOM对象包装起来，就能获得jQuery对象了

如：var v=document.getElementById("v"); //得到DOM对象

var $v=$(v); //转成jQuery对象

转换后，就可以任意使用jQuery的方法了

21、$.get()提交和$.post()提交有区别吗?包裹节点的方法有什么好处?

GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。GET书签可收藏，POST为书签不可收藏。GET能被缓存，POST不能缓存 。GET编码类型application/x-www-form-url，POST编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。

22、包裹节点的方法？有什么好处？

（1）wrap()

将某个节点用其他标记包裹起来，在文档中插入额外的结构化标记，而且不会破坏原始文档的语义。

（2）wrapAll()

将所有匹配的元素用同一个元素包裹，不同于wrap()方法的是，wrapAll是对所有的元素一同包装，wrap是单独包装。

（3）wrapInner()

该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

23、Jquery 如何处理缓存?

（1）通过$.post()方法来获取数据，那么默认就是禁用缓存的。

（2）通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+new Date)来增加上时间戳参数

（3）通过$.ajax方法来获取数据，只要设置参数cache:false即可。

24、当CDN 上的jquery 文件不可用的时候怎么办?

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本

25、Jquery 链式调用的最大优点是什么?

1：编程性强2：可读性强3：代码简洁

26、Jquery 如何替换节点?

如果要替换某个节点，jQuery提供了相应的方法，即replaceWith{)和replaceAll()。

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。

也可以使用jQuery中另一个方法replaceAll()来实现，该方法与replaceWith{)方法的作用相同，

只是颠倒了replaceWith{)操作。

Html、css部分

1.浏览器针对HTML文档起到了什么作用？

浏览器用于查看HTML文档

2.在html页面制作了一个图像,想要在鼠标指向这个图像时浮出一条提示信息,应该使用那个使用的参考数据

可以使用图片自带title属性，设置提示信息！

优点：简单，快捷。

缺点：提示信息样式单一，而且不明显。

利用鼠标事件onmouseover，利用js，控制鼠标移入时候，上方会出现自己用CSS样式写出的想要表达的提示信息。

优点：提示信息样式可以自己定义，个性化。

缺点：比较复杂，需要web前端开发人员来做。没有html,css,js基础的人，不容易实现。

3.哪一个标记用于使用html 文档中的表格里的单元格在同行进行合并

Colspan

4.页面导入样式时，使用link和@import 有什么区别?

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；

@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

5.Html5 有哪些新特性，移除了哪些元素? 如何处理htm!5 新标签的浏览器来容问题?

HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素，article、footer、header、nav、section。

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

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

6.如何区分html 和html5?

HTML5和HTML的区别：

1、在文档类型声明上

HTML声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

HTML5声明：<!doctype html>

 

　　上面的两种声明,HTML5声明简洁方便人们的记忆，HTML声明太长了并且很难记住这段代码。

 

2、在结构语义上

HTML:没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。

HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如: article、footer、header、nav、section，这些通俗易懂。

7.Html5 的离线存储怎么使用，工作原理是什么?

原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

方法：

1.在index.html里加上<html manifest="test.manifest">

 

2.manifest清单格式如下：

CACHE MANIFEST

#上面一句必须

#v1.0.0

#需要缓存的文件

CACHE:

a.js

b.css

#不需要缓存的文件

NETWORK:

*

#无法访问页面

FALLBACK:

404.html

 

3. manifest文件的mime-type必须是 text/cache-manifest类型。

 

8.常见的兼容性问题?

方法/步骤：

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里    *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:100%

解决方案：CSS里    *{margin:0;padding:0;}

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到几率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

碰到几率：20%

解决方案：使用float属性为img布局

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容

碰到几率：5%

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

比如这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

9.WebSocket 如何兼容低版本的浏览器?

页面代码比较简单，用法和正常的WebSocket基本一样，只是引用了WebSocket.js这个文件来兼容低版本浏览器。当然还有个WebSocket.swf需要放在与页面相同的目录下。

10.可继承的样式有哪些?

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

11.优先级的就近原则是什么?

1、优先级最高的是内部选择器，写在标签内部，例如<div style="color:red"></div>，这里的color=red是写在标签内部的，所以优先级最高

2、其次是id选择器

例如<div id="d1"></div> <style> #d1{ color:red }</style>，这里面#d1就是id选择器，用#表示, 标签里面是id属性 样式是#开始

3、类选择器

例如<div  class="c1"></div> <style> .c1{ color:red }</style>，这里面.c1就是类选择器，用.表示，标签里面是class属性，样式是 . 开始

4、标签选择器

以标签名字作为选择器，这种不常使用

例如：<div><div> <p><p>

样式对应：div{ font-size:14px } p{font-size:20px}

由标签选择器，类选择器，id选择器，还可以延伸出很多选择器，详细的可查询w3c哟

12.Html5中的datalist 是么?

<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。

<input type="text"list="valList" />

    <datalist id="valList">

       <optionvalue="javascript">javascript</option>

       <optionvalue="html">html</option>

      <option value="css">css</option>

    </datalist>

13.Canvas 和SVG 图形之可的区别是什么?

区别一：

svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；

区别二：

svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿。

14.Doctpe 的作用? 标准模式与兼容模式各有什么区别?

　　区别：严格模式是浏览器根据规范去显示页面；

　　混杂模式是以一种向后兼容的方式去显示意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。

15.如何把htmils 看成一个开放平台，它的构建模块有哪些?

Initializr

Initializr 是一个可以创建 HTML5 模板的网站，可以创建样板 HTML5 模板，响应式的 HTML5 模板或 Twitter Bootstrap HTML5 模板。

HTML5 Demos

这里集合了一些基于 HTML5 的优秀的实验演示，最初只有5个演示，后来逐渐扩充。

HTML5 Test

想知道桌面或移动 Web 浏览器符合最新的 HTML5 标准吗?这个网站可以帮助测试出分数和评级。

HTML5 Canvas Cheat Sheet

如果不能记住所有 Canvas 的命令和选项，那么这个小抄是绝对适合。可作为一个图形或 PDF 免费下载。

Lime JS

LimeJS 是一个 HTML5 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。

HTML5 Reset

HTML5 Reset 是一组文件，包括 HTML、CSS 等，用于在开始新项目的时候帮助节省时间，提供 HTML5 的空白WordPress模板。

SpriteBox

Spritebox 是一个所见即所得的工具，帮助 Web 设计者迅速而轻松地从一张精灵图片(CSS Sprit Image)创建CSS类和ID选择符样式。

LimeWeave

LimeWeave是一个 HTML5 编辑器，它可以告诉是什么的 HTML5，CSS 和 JavaScript 特效的样子。

99 Lime

如果想节省时间，使用 HTML5，CSS 和 jQuery 创建一些新的元素，布局和代码，那么99 Lime 真的可以帮助。

On/Off FlipSwitch

如果曾经想创建一个漂亮的on/off开关，那么这个网站可以。可以自定义图形开关，不同的着色，大小和风格。

CanvasLoader Creator

这个免费的在线工具可以帮助设计师和程序员为他们的 HTML5 项目生成基于 Canvas 的 Loading 效果

Create – Make Anything Editable

Create 是一款可以在 CMS 中使用的编辑器。借助 HTML5 特性，可以把页面上的内容变成可编辑区域。

Online 3D Sketch Toy

这个绘图工具对于孩子而很好玩，而不只是给网站设计师用!还可以把小创作分享到 Facebook 上。

16.Quirks 模式是什么? 它和Standards 模式有什么区别

Opera 浏览器 (Opera 7+) 支持与 Internet Explorer 相同的两种呈现模式：Quirks 和 StandardsInternet Explorer 6+ 支持两种呈现模式，分别叫做 Quirks 模式和 Standards 模式。当 Internet Explorer 呈现包含有效 XHTML（或 HTML 4.0）DOCTYPE 的页时，它会以 Standards 模式呈现该页；否则，它会以 Quirks模式呈现该页（有关详细信息，请参阅 CSS Enhancements in Internet Explorer 6）Mozilla Firefox 1+ 支持三种呈现模式：Quirks 模式、Almost Standards 模式和 Standards 模式。当页包含有效的 XHTML 1.0 Transitional DOCTYPE（并且该页被分配为 text/html MIME 类型）时，Firefox 会以 Almost Standards 模式呈现该页。

17.Img的alt与ttle有什么不一样? b和strong和em有什么不同?

alt 用于图片没显示时在图片显示区域显示一个说明文字。

title 表示鼠标在图片上停留时，显示一个悬浮框，其中显示的文字。

应该说，在默认的 HTML 样式表定义中，b 和 strong 的样式一样，为 { font-weight: bolder }；而 em 的默认样式为 { font-style: italic }，与 i 相同。

　　在 HTML 4 中，em 表示 emphasized text，strong 表示 strong emphasized text，故 strong 的强度要更强。而在 HTML 5 中，strong 的定义改成了 important text。当然 emphasized 和 strong emphasized 乃至 important 之间怎么界定很模糊，关键是在自己编写 HTML 代码的时候保持使用上一致。

b 表示这里应该用粗体显示

18.渐进增强和优雅降级之间的不同点是什么?

广义来说，其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级。这个基准线对于我，是允许使用javascript、cookie和css的IE8浏览器。

不过狭义而言，渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

渐进增强的例子：

transition属性，用于在某个数值属性突然改变的时候，在一定时间段里面输出中间的值，类似于jQuery.animate实现的动态效果。

19.什么是微格式?

是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。而不是像Flickr、Amazon、Google等提供特定的面向技术人员的API（一般基于XML-PRC、REST，相对复杂）。RSS具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL等），不能更好地描述语义，不太容易与已存在的工具结合等。用微格式可以来聚合外部Blog，Flickr，YouTube，MapQuest，甚至MySpace里的内容。

20.前端如何做好SEO 优化?

关键词位置、密度、处理

URL中出现关键词（英文）

　　网页标题中出现关键词（1-3个）

　　关键词标签中出现关键词（1-3个）

　　描述标签中出现关键词（主关键词重复2次）

　　内容中自然出现关键词

　　内容第一段和最后一段出现关键词

H1，H2标签中出现关键词

　　导出链接锚文本中包含关键词

　　图片的文件名包含关键词

ALT属性中出现关键词

网站内链，网站外链优化，外链的多样化，网站技术交互，冷杉网站建设提供

21. Rgba()和opacity的透明效果有什么不同?

   opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性

22.Sass 和less的区别?

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；

Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；

Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；

Scss具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；

Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；

使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。