问题总结（二）

@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‘; }

/** * 1200+ * 内容宽度：1190px 页面内容居中 * 匹配默认样式 */ 
	.box {
	    width: 1190px;
	    margin: auto;
	}
/* 1024-1199 内容宽度990 页面内容居中 */
@media only screen and (max-width:1199px) {
    .box {
        width: 990px;
    }
}
/* 768-1023 内容宽度740 页面内容居中 */
@media only screen and (max-width:1023px) {
    .box {
        width: 740px
    }
}
/* 768 ipad竖屏：(orientation:portrait) ipad横屏：(orientation:landscape) */
@media only screen and (max-width:768px) and (orientation:portrait) {}
/** * 640-767 内容宽度590
* 两边间距25，页面内容居中 */
@media only screen and (max-width:767px) {
    .box {
        width: 590px
    }
}
/** *481-639
* 按百分比缩放，最小缩放到320 */
@media only screen and (max-width:639px) {
    .box {
        width: 98%;
    }
}
/** *320-479
* 按百分比缩放，最小缩放到320 */
@media only screen and (max-width:479px) {
    .box {
        width: 95%
    }
}
/* 设置320px以下的样式 */
@media only screen and (max-width:320px) {
    .box {
        min-width: 320px;
    }
}

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新特性

        input标签新增属性

• email 
  必须输入email
  url 
  必须输入url地址
  number 
  必须输入数值
  range 
  必须输入一定范围内数值
  Date Pickers（日期选择器） 
  拥有多个可供选取日期和时间的新输入类型： 
  date - 选取日、月、年 
  month - 选取月、年 
  week - 选取周和年 
  time - 选取时间（小时和分钟） 
  datetime - 选取时间、日、月、年（UTC 时间） 
  datetime-local - 选取时间、日、月、年（本地时间）
  search 
  用于搜索域，域显示为常规的文本域。
  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. 优点：
  1. jQuery实现脚本与页面的分离
  2. 性能：在大型JavaScript框架中，jQuery对性能的理解最好。
  3. 它是一个“标准”：虽然并不是官方标准，但业内对jQuery的支持经非常广泛
  4. 丰富的插件：基于jQuery开发的插件种类很多，能解决大部分问题，前端工程师还可以根据项目需要自行封装不同需求的插件。
  5. 入门简单、易学，节约学习成本。
  6. 轻量级，最新的版本压缩的jquery代码只有十几k
  7. 强大的选择器，提供多重选择
  8. 出色的DOM操作的封装：jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序
  9. 完善的Ajax
  10. 可靠的事件处理机制
  11. 不污染顶级变量
  12. 出色的浏览器兼容性
  13. 链式操作方式
  14. 行为层与结构层的分离
  15. 完善的文档
  16. 开源
  3. 缺点：
  1. 从上面的介绍可以看出 jquery的优点很多，当然任何一个框架都不是完美的，jQuery也有自身的缺陷，下面就罗列下jQuery的缺点和劣势。
  2. 不能向后兼容：每一个新版本不能兼容早期的版本
  3. 插件兼容性
  4. 在同一页面上使用多个插件时，很容易碰到冲突现象
  5. jQuery的稳定性
  6. 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差

  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