问题总结（二）

1. 说一说你对web标准的理解

它不是一个标准，而是有很多标准组合而成的结果。

网页包含结构（HTML），表现（CSS）和行为（JavaScript）。

2. 浏览器的内核与区别

Trident(又称为MSHTML）代表 IE 浏览器
- Trident是微软开发的一种排版引擎。
- 基于Trident内核的浏览器有 ie6、ie7、ie8(Trident 4.0) 、ie9(trident 5.0) 、ie10(trident6.0)、ie11(trident7.0)、国内的很多双核浏览器也是基于trident内核的，例如：世界之窗、360安全浏览器、遨游2.0（3.0以上版本开始采用webkit内核）、搜狗浏览器、腾讯浏览器等
Gecko（跨平台）代表 Mozilla Firefox
- Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用
- 正在和曾经使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
- Google Gadget引擎采用的就是Gecko浏览器引擎。
WebKit内核（代表：Safari、Chrome）
- WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
- WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
- WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。
Presto内核（代表：Opera）
- Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
- Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
- Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。
- Presto是商业引擎，除了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。

老的IE浏览器有一套自己的标准，其他内核的浏览器都在尽量遵守 W3C 标准
360安全浏览器

极速模式是由Chrome的内核，而兼容模式是IE内核。

3. CSS与盒模型

IE盒模型和标准盒模型：

盒模型：内容（content），填充（padding），边框（border）和边界（margin）。

IE 的盒模型的content部分包含padding和border部分。

box-sizing的属性允许以特定的方式定义和匹配某个区域的特定元素，常见的border-box | content-box |inherit（继承）。

IE8+支持该属性。

content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )

此属性表现为标准模式下的盒模型。

border-box:

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

4. CSS3的最新的属性

圆角 ——border-radius；

阴影——box-shadow；

文字阴影——text-shadow;

渐变——gradient；

转变——transform（旋转：rotate 缩放：scale 定位：translate 倾斜：skew）

多背景——使用逗号隔开

颜色——rgba（红、绿、蓝、透明度）

边框背景——border-image；

服务器端字体——font-face

@font-face {
　　font-family:'MyFont';/* 表示为这种字体起一个名称，可以随意设置，这里用的是MyFont */
　　src: url('myfont.eot');/* 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的 */
　　src:local('myfont.ttf'),
　　url('myfont.woff') format('woff'),
　　url('myfont.ttf') format('truetype');/* local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype */
}
/*使用：*/
h1{font-family:'MyFont';}

选择器的增加:

伪元素的增加selection

媒体查询：

1. 1. /** * 1200+ * 内容宽度：1190px 页面内容居中 * 匹配默认样式 */
  2. .box {
  3. width:1190px;
  4. margin:auto;
  5. }
  6. /* 1024-1199 内容宽度990 页面内容居中 */
  7. @media only screen and (max-width:1199px){
  8. .box {
  9. width:990px;
  10. }
  11. }
  12. /* 768-1023 内容宽度740 页面内容居中 */
  13. @media only screen and (max-width:1023px){
  14. .box {
  15. width:740px
  16. }
  17. }
  18. /* 768 ipad竖屏：(orientation:portrait) ipad横屏：(orientation:landscape) */
  19. @media only screen and (max-width:768px) and (orientation:portrait){}
  20. /** * 640-767 内容宽度590
  21. * 两边间距25，页面内容居中 */
  22. @media only screen and (max-width:767px){
  23. .box {
  24. width:590px
  25. }
  26. }
  27. /** *481-639
  28. * 按百分比缩放，最小缩放到320 */
  29. @media only screen and (max-width:639px){
  30. .box {
  31. width:98%;
  32. }
  33. }
  34. /** *320-479
  35. * 按百分比缩放，最小缩放到320 */
  36. @media only screen and (max-width:479px){
  37. .box {
  38. width:95%
  39. }
  40. }
  41. /* 设置320px以下的样式 */
  42. @media only screen and (max-width:320px){
  43. .box {
  44. min-width:320px;
  45. }
  46. }

多栏布局和弹性布局

flex-box:
弹性布局，适应性强，在做不同屏幕分表率的界面时非常实用
可以随意按照宽度、比例划分元素的宽高
可以轻松改变元素的显示顺序
自适应布局实现快捷，易维护
属性：
.flex{
display: box;// 将一个元素的子元素以弹性布局进行布局
box-flex:1;// 子元素如何分配剩余空间
box-orient: horizontal | vertical |inline-axis | block-axis | inherit;// 子元素的排列方式（横向或者竖向）
box-direction: normal | reverse | inherit;// 子元素排列顺序
box-align: start |end| center | baseline | stretch;// 垂直对齐方式
box-pack: start |end| center | justify;// 水平对齐方式
box-ordinal-group:;// 子元素的显示顺序
}

5. HTML5新特性

新增加了语义化的标签：footer，header，main，aside，article，nav等

删除了一些无意义的标签：basefont、big、center、font、s、strike、tt、u等

input标签新增属性

1. email
2. 必须输入email
3. url
4. 必须输入url地址
5. number
6. 必须输入数值
7. range
8. 必须输入一定范围内数值
9. DatePickers（日期选择器）
10. 拥有多个可供选取日期和时间的新输入类型：
11. date -选取日、月、年
12. month -选取月、年
13. week -选取周和年
14. time -选取时间（小时和分钟）
15. datetime -选取时间、日、月、年（UTC 时间）
16. datetime-local -选取时间、日、月、年（本地时间）
17. search
18. 用于搜索域，域显示为常规的文本域。
19. color
音频视频等元素的增加

画布canvas API的增加

获取地理位置的Geolocation API

本地存储 LocalStorage （长期数据存储，不手动删除则一直存在）http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

sessionStroage（数据在浏览器关闭后自动删除）

http://www.cnblogs.com/zhanglm125/p/4206482.html

6. JavaScript的数据类型

基本数据类型，实际值保存在变量中：
undefined

null

number

string

boolean

引用数据类型，引用类型的值保存在内存中的对象

Object

Date

Array

RegExp

引用数据类型得指向只是一个路径，例如a = b（b是引用类型），a的值改变b的值也会改变

7. 前端语义化的理解

去掉或者是失去样式的时候页面能够呈现出清晰的结构。

有利于SEO 和搜索引擎建立良好的沟通，有利于爬虫抓取更多有效信息，爬虫是通过标签来给与权重，如(

h1的权重要高于p)

方便其他设备解析（屏幕阅读器，盲人阅读器，移动设备等）以有意义的方式来渲染网页。

便于团队的开发与维护，语义化可以增加网页的可读性，遵循W3C的标准，更高效的开发。
8. JQuery的优缺点
2. 优点：
3. 缺点：
9. 前端安全的检测与预防

基本攻击可以分为三大类——资源枚举、参数操作、其他攻击

资源枚举：遍历所有可以访问的目录，然后将一些常见的"备胎"文件名（sql.bak, index.html）如果枚举到就直接下载。

参数操作：包含Sql注入，XXS，会话劫持等，xss指的是在web中插入恶意的html代码。

cookie劫持，通过获取用户的权限，到恶意站点的访问，并携带用户的cookie，获取用户的cookie后直接用被盗用户的身份登录站点。

解决方案：

  永远不要相信客户端传过来的信息，对传过来的信息进行过滤和编码处理。

  使用黑名单和白名单处理（即“不允许哪些敏感信息”或“只允许哪些信息”，白名单的效果更好但局限性高）

  检查、验证请求来源，对每一个重要的操作都进行重新验证使用SSL防止第三方监听通信（但无法阻止XSS、CSRF、SQL注入攻击）

  不要将重要文件、备份文件存放在公众可访问到的地方

  会话ID无序化

  对用户上传的文件进行验证（不单单是格式验证，比方一张gif图片还应将其转为二进制并验证其每帧颜色值<无符号8位>和宽高值<       无符号16位>）

  WSDL文档应当要求用户注册后才能获取

参考地址： http://www.iqianduan.net/blog/web-front-interview-question

来自为知笔记(Wiz)