前端基础知识

1.html5特性

1.语义化标签
	header、footer、nav、section、article、aside、details、summary、dialog、
2.音视频处理
	audio、video、
3.canvas画布、webGL

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

   使用js来绘制图像:

<script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>

4.地理位置
	geolocation（地理定位）
5.API（文件读取、拖拽等）
6.web Storeage
	sessionStorage：只要浏览器处于打开状态（包括页面重新加载和恢复），存储的数据就可用，当浏览器关闭后，数据就会被删除
   	localStorage：浏览器关闭再打开后数据仍然存在。
7.WebSocket 
	是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
    	使用 WebSocket() 构造函数来构造一个 WebSocket

cookies，sessionStorage 和 localStorage 的区别：

相同点：都是在浏览器端存储的数据，并且都是同源。（所谓同源是指：域名、协议、端口相同）
不同点：1.cookie存储的数据不超过4k，很小，并且始终在同源的http请求中携带。浪费带宽
2.session和local直接存储在本地，请求时不会携带，并且容量大
3.session是临时会话，当窗口被关闭的时候数据就被清除，而local永久存在，cookie有过期时间
4.cookie和local都可以支持多窗口共享，而session不支持多窗口共享，但都支持a链接跳转的新窗口共享数据。

同源与跨域:

    同源的含义：B网页不能访问A网页的cookie，除非两者同源  
    同源的目的：保证用户信息安全，防止恶意网站窃取数据  
    如果非同源，共有三种行为收到限制：
    	（1） Cookie、LocalStorage 和 IndexDB 无法读取。

	（2） DOM 无法获得。

	（3） AJAX 请求不能发送。  
   针对以上三种行为，分别有对应的方法可以解除限制：
   1）cookie：针对一级域名相同的2个网站，设置相同的 documnet.domain  
   2)典型的例子是iframe窗口和window.open方法打开的窗口无法与父窗口通信：  
   		针对一级域名相同的2个窗口，设置document.domain  
     		针对完全不同源的2个网页，有3中方法：
        		·片段识别符（fragment identifier）
			·window.name
			·跨文档通信API（Cross-document messaging）
   3)Ajax:(AJAX请求只能发给同源的网址，否则就报错)  
   	服务器代理（浏览器请求同源服务器，再由后者请求外部服务）  
   	JSONP
	WebSocket
	CORS
    ........ 
    JSONP:基本思想是，网页通过添加一个<script>元素，想服务器请求json数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里面传回来。
   ```javaScript
   function addscriptTag(src){
    	
    }        

2.HTML5（HyperText Markup Language）的优点与缺点？

优点：1.网络标准统一，由w3c推荐出来的；
2.语义化标签，涉及到网站的抓取和索引的时候，对于seo（搜索引擎优化效果）友好；
3.音视频处理更方便，audio和video
4.跨平台
缺点:
1.安全：websocket和透明代理的实现存在安全问题，webstorage和websocket这样的功能很容易被黑客攻击
2.ie9以下不兼容

3.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?

1.ie：trident内核
2.firefox： gecko内核
3.safari：webkit内核
4.chrome：blink内核

4.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

告诉浏览器按那种规范解析（html或xhtml）

5.HTML5行内元素有哪些,块级元素有哪些?

行内元素：a、br、em、i、img、input、span、
块元素：div、h1-h6、p、ul、ol
区别：
1.块级元素会新起一行。内联元素和其他元素在同一行
2.块元素可以容纳块元素或内联元素，行内元素只能容纳文本或其他内联元素；
3.块级元素的高、行高、以及内外边距都可控制，内联元素的不可以改变

行内元素和块元素的转换：

1.display：block/inline/inline-block
2.当行内元素被设置为float:left/right时，行内元素的display会被赋予block值
3.position：当为行内元素进行定位时，position设置为absolute或fixed都会使得行内元素被转化为块元素

6.flex布局

说说弹性布局： 弹性布局由父级容器（flex container）和子容器（flex item）构成，通过flex direction设置主轴（row or column）来控制子元素的排列方式。
justify-content设置水平对齐方式，alighitem设置垂直对齐方式。
flex布局计算方法：
flex==flex grow（伸缩基准）、flex shrink（扩展比例）、 flex basis（初始大小）

li {
    flex: 0 1 auto;
}

简写为

li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

grow:对剩余空间的瓜分

可用空间 = (容器大小 - 所有相邻项目flex-basis的总和) 可扩展空间 = (可用空间/所有相邻项目flex-grow的总和) 每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-basis值))

shrink(压缩):

width=【（shrinkbasis）/（所有项shrinkbasis累加）】*溢出空间
总结来说，就是flex布局的子元素设置flex属性后它就不会超出父元素，要么放大要么缩小。那如果我们要让元素溢出怎么办呢？应该这样设置：

flex:0 0 auto

可参考：
www.w3cplus.com/css3/flexbo…

7.css盒模型

content-box：width和height属性指的是content，w3c标准盒模型
border-box：...指的是content+border+padding，ie盒模型

css面试场景题：CSS两栏布局，左边定宽，右边自适应

.box{
display:flex;
}
.left{
	width:100px;
    height:100px;
    background:red;
}
.right{
	flex:1;
    height:100px;
    background:blue;
}

水平垂直居中：

水平居中：

行内元素：text-align:center
块元素：margin :0 auto、 flex布局：justify-content：center

垂直居中：

单行文本：line-height=height、 多行文本：通过设置父元素display：table，子元素table-cell和 vertical-align:middle 块元素：1.在需要垂直居中的父元素上，设置display:flex和align-items：center
2.：利用position和top和负margin（需知宽高）

水平垂直居中：

绝对定位、flex布局（justify-content：center、align-items：center）

javascript

1.let var和const的区别

var：变量提升，全局作用域，可重复定义
let：暂存死区（不会被提升到顶部，从该块级作用域到开始到初始化位置为暂存死区），块级作用域{}，禁止重定义，不属于window对象，
const：let该有的属性const都有，不同的是，const不允许修改变量（的数据类型），且必须初始化

for (var i = 0; i < 5; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i) // 0 1 2 3 4
        }, 300)
    })(i)
}

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i); // 5 5 5 5 5 
    }, 300);
}
for (let j = 0; j < 5; j++) {
    setTimeout(function () {
        console.log(j); // 0 1 2 3 4
    }, 300);
}

http状态码：

304：服务器告诉客户端，原来缓存的文档还可以用，是最新版本，如果不是最新版本，就返回200，并返回新的资源。
302：页面临时转移到新的url

1xx：信息，
100：continue，服务器接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
2XX：成功 200 OK
3XX：重定向
4XX：客户端错误
403forbidden 禁止访问
404 not found 服务器无法找到被请求的页面
5XX：服务器错误
500 Internal Server Error 服务器遇到不可预知的情况。 502 bad gateway 请求未完成。服务器从上游服务器收到一个无效的响应。
504 gateway timeout 网关超时

post和get区别：

get：用于获取资源，对访问的数据无副作用，是幂等的，且可缓存。（比如get一下，用户就下单了，这是不可以的），（没有副作用称为幂等）
post：用于修改服务器上的数据，有副作用，非幂等，不可缓存 post和get参考链接

原理：将事件监听器设置在父节点上，利用冒泡原理影响每个子节点。 
比如：给ul注册点击事件，然后利用事件对象的target（e.target）来找到当前点击的li，点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。  
好处：只操作一次dom  

当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序。  
几乎 所有事件都会冒泡。focus 事件不会冒泡  
阻止冒泡event.stopPropagation()   

事件（从 Window）向下走近元素