web前端面经总结

web前端面经总结（1）

HTML的集中布局方式

静态布局

• 元素均采用px设置宽高。

流式布局

• 子元素主要采用%来设置宽度，用于屏幕太大（或小）不能完美显示子元素的时候使用，但是子元素的相对布局不会改变。比如说，一行是5个div,每个宽度设为20%，父元素宽为500px时，每个100px,但是子元素最完美的宽度却是80px，通常搭配min-width、max-width使用，不至于过大过小。

自适应布局

• 每个屏幕分辨率对应一个静态布局，经常采用@media结合min-width、min-height使用，给不同尺寸的设备切换不同样式。
  @media：CSS3@media查询，可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

响应式布局

• 简而言之就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式网页设计考虑到多平台、多种屏幕尺寸的情况，可以为不同终端的用户提供更加舒适的界面和更好的用户体验。通常采用弹性布局+流式布局+媒体查询，优秀页面布局的标准；

弹性布局(又称“Flex布局”)

• 弹性就是Flex，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。
• 使用：
  1） 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。
  2）容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
  3）display:flex; 容器添加弹性布局后，显示为块级元素；
  display:inline-flex; 容器添加弹性布局后，显示为行级元素；
  4）设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

ajax请求方式

• 用jquery 的 load() 方法实现ajax请求
  load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。

 $('#mydiv').load('/myrequest/url/param')：//   /myrequest/url/param是要请求的服务端的url

• 用jquery 的 post() ,get() 方法
  jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求
  jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

$post('/myrequest/url/param',
     {
      text:"mytext",
      other:"other_param"
     },
      // 调用服务端成功后的回调函数
      function(){
       alert('succeccd');
     }
)

• jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。
• 用jquery 的 Ajax() 方法

$.ajax({
    async:false,//同步，异步
    url:"/addjoke", //请求的服务端地址
    data:{
       content:mycontent,
       title:joketitle,
       d:Math.random()
       },
    type:"post",
    dataType:"text",
    success:function(data){
      //成功之后的处理，返回的数据就是 data
    }
    error:function(){
      alert('error'); //错误的处理
    }
  });

• 通过 HTTP GET 请求载入 JSON 数据。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});

http与https

1. 什么是 HTTP？
   超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
   特点
   1）无状态：协议对客户端没有状态存储，对事物处理没有“记忆”能力，比如访问一个网站需要反复进行登录操作
   2）无连接：HTTP/1.1之前，由于无状态特点，每次请求需要通过TCP三次握手四次挥手，和服务器重新建立连接。比如某个客户机在短时间多次请求同一个资源，服务器并不能区别是否已经响应过用户的请求，所以每次需要重新响应请求，需要耗费不必要的时间和流量。
   3）基于请求和响应：基本的特性，由客户端发起请求，服务端响应
   简单快速、灵活
   4）通信使用明文、请求和响应不会对通信方进行确认、无法保护数据的完整性
2. 什么是HTTPS？
   HTTPS是身披SSL外壳的HTTP。HTTPS是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。
   注:TLS是传输层加密协议，前身是SSL协议，由网景公司1995年发布，有时候两者不区分。
   特点
   • 基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护。
   • 通过抓包可以看到数据不是明文传输，而且HTTPS有如下特点：
     1）内容加密：采用混合加密技术，中间者无法直接查看明文内容
     2）验证身份：通过证书认证客户端访问的是自己的服务器
     3）保护数据完整性：防止传输的内容被中间人冒充或者篡改
     名词解释：
     混合加密：结合非对称加密和对称加密技术。客户端使用对称加密生成密钥对传输数据进行加密，然后使用非对称加密的公钥再对秘钥进行加密，所以网络上传输的数据是被秘钥加密的密文和用公钥加密后的秘密秘钥，因此即使被黑客截取，由于没有私钥，无法获取到加密明文的秘钥，便无法获取到明文数据。
     数字摘要：通过单向hash函数对原文进行哈希，将需加密的明文“摘要”成一串固定长度(如128bit)的密文，不同的明文摘要成的密文其结果总是不相同，同样的明文其摘要必定一致，并且即使知道了摘要也不能反推出明文。
     数字签名技术：数字签名建立在公钥加密体制基础上，是公钥加密技术的另一类应用。它把公钥加密技术和数字摘要结合起来，形成了实用的数字签名技术。

http协议和https协议的区别：

一、传输信息安全性不同
1、http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
二、连接方式不同
1、http协议：http的连接很简单，是无状态的。
2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
1、http协议：使用的端口是80。
2、https协议：使用的端口是443．
四、证书申请方式不同
1、http协议：免费申请。
2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。

HTML5 表单新属性

autocomplete

• 规定表单是否应该启用自动完成功能，自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
  注：autocomplete 属性适用于 ，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
  

novalidate

• novalidate 属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。
  注：novalidate 属性适用于：，以及以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
  

HTML5 新表单元素

datalist

• 规定输入域的选项列表
• 列表是通过datalist内的option元素创建的。
• 如需把 datalist 绑定到输入域，用输入域的 list 属性引用 datalist 的 id：

keygen

• 提供一种验证用户的可靠方法
• keygen元素是密钥对生成器key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
• 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
• 目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

output

• 用于不同类型的输出，比如计算或脚本输出：