当你准备去面试时，你不妨看一些面试的题目（推荐掘金）来提醒自己究竟掌握得怎么样，比如

笔者最近一边写项目，一边整理前端面试题，打算完成项目就差不多去实习了…
没有特别宏大的目标，打算安安分分找一份工作，在实习中保持认真学习的态度就好了。

以下题目大多数是HTML/CSS,较少涉及框架方面的知识。但是我还是建议你在空闲时间多浏览，尽量熟记

1、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些？块级元素有哪些？

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

5、HTML5 有哪些新特性？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

6、对语义化如何理解？

用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

7、HTML5 的离线储存有几种方式？

localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

10、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

1. 相邻选择器（h1 + p）
2. 后代选择器（li a）
3. 通配符选择器（ * ）

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

11、CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:checked 单选框或复选框被选中。

12、如何居中 div？如何居中一个浮动元素？

列出 display 的值，说明他们的作用。

”域内，可以把 domain 设置为 “ 和 。在 aaa 下嵌入 bbb 的页面，由于其’;设置一致，来达到互相访问的作用。

WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种很棒的实现。

**需要注意：**WebSocket 对象不支持 DOM 2 级事件侦听器，必须使用 DOM 0 级语法分别定义各个事件。

同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

HTTPS 协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

HTTP 协议传输的数据都是未加密的，也就是明文的，因此使用 HTTP 协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了 SSL（Secure SocketsLayer）协议用于对 HTTP 协议传输的数据进行加密，从而就诞生了 HTTPS。

简单来说，HTTPS协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，要比 http 协议安全。

1、https 协议需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。
2、http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
3、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
4、http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。

1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2.永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息。

1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换 HTTP 协议版本

2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的 URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的 GET 请求

3**(重定向类)：为了完成指定的动作，必须接受
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个 URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始 URL 地址，重定向，新的 URL 会在 response 中的 Location 中返回，浏览器将会使用新的 URL 发出新的Request。
303——建议客户访问其他 URL 或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本 HTTP 中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除

4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用
404——一个 404 错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的 URL
406——根据用户发送的 Accept 拖，请求资源不可访问
407——类似 401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源 URL 长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含 Range 请求头字段，在当前请求资源范围内没有 range 指示值，请求也不包含 If-Range 请求头字段
417——服务器不满足请求 Expect 头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。

5**(服务端错误类)：服务器不能正确执行一个正确
HTTP 500 - 服务器遇到错误，无法完成请求
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常

120、一个页面从输入 URL 到页面加载显示完成的详细过程

1、浏览器查找域名对应的 IP 地址；
2、 浏览器根据 IP 地址与服务器建立 socket连接（三次握手）；

• 主机向服务器发送一个建立连接的请求（ 您好，我想认识您 ）；
• 服务器接到请求后发送同意连接的信号（ 好的，很高兴认识您 ）；
• 主机接到同意连接的信号后，再次向服务器发送了确认信号（ 我也很高兴认识您），自此，主机与服务器两者建立了连接。

3、浏览器与服务器通信： 浏览器请求，服务器处理请求；

• 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
• 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的HTML 文件；
• 服务器将得到的 HTML 文件发送给浏览器；
• 在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
• 在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript 等文件，

4、浏览器与服务器断开连接（四次挥手）。

• 主机向服务器发送一个断开连接的请求（ 不早了，我该走了 ）；
• 服务器接到请求后发送确认收到请求的信号（ 知道了 ）；
• 服务器向主机发送断开通知（ 我也该走了 ）；
• 主机接到断开通知后断开连接并反馈一个确认信号（ 嗯，好的 ），服务器收到确认信号后断开连接；

121、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

（2）添加、移除、替换、插入

//通过 name 属性来获取表单元素(IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的) 

//选择器直接写 css 选择器形式#id

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

124、new 操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this

use strict 是一种 ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行, 使 JS 编码更加规范化的模式,消除 Javascript 语法的一些不合理、不严谨之处，减少一些怪异行为。

• 默认支持的糟糕特性都会被禁用，比如不能用 with，也不能在意外的情况下给全局变量赋值;
• 消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的 arguments 修改，严格模式下的 eval 函数的行为和非严格模式的也不相同;
• 提高编译器效率，增加运行速度；为未来新版本的 Javascript 标准化做铺垫。

126、对引擎的理解？

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS 引擎则：解析和执行 javascript 来实现网页的动态效果。最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

资料均源自网络（已注明所有内容的出处），为方便查找故整理于此。

在线前端代码测试平台：

●《IE盒模型和标准盒模型的区别》

由于 !important 的顶级优先级，结果变成了蓝色方形。

通配符（*）优先级大于继承：

结果：div2 的字体大小是 30px，因此可以判断，通配符优先级大于继承。

●《前端面试题-CSS优先级》

 

 
 

 元素定位表现为在跨越特定阈值前为相对定位（position:relative），之后为固定定位（position:fixed）。
 
 

 
 

 

 

 ●《「前端面试题系列3」伪类与伪元素的区别及实战》
 
 

 

●《用纯CSS创建一个三角形的原理是什么？》

●《浏览器是怎样解析CSS选择器的？》

浏览器解析CSS选择器的规则是从右向左解析的，以提高查找选择器所对应的元素的效率。

    若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

    若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

    是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），

    而从左向右的匹配规则的性能都浪费在了失败的查找上面。