校招季--献给前端求职路上的你们（H5+C3）

HTML5部分

<canvas id="canvas" width="60" height="500"></canvas>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");   ctx.rect(20,20,150,100);
ctx.moveTo(10,10);  ctx.lineTo(200,100);  ctx.stroke();

4、本地缓存 WebStorage

5、离线缓存。

6、postMeesage 跨文档通信（跨域）

<iframe id="ifr" src="http://www.postmessage2.com/postmessage/iframe01.html"></iframe>

<script type="text/javascript">
var text = document.getElementById('text'),
send = document.getElementById('send'),
// ifr = window.frames[0];
ifr = document.getElementById('ifr').contentWindow;
window.addEventListener('message', function(ev){
if(ev.origin === 'http://www.postmessage2.com'){
alert('从'+ ev.origin + '传过来的消息：' + ev.data);
}
});

send.addEventListener('click',function(){
//主窗口postMessage发送消息给iframe子窗口。
//子窗口通过监听message事件来获得消息
ifr.postMessage(text.value,'http://www.postmessage2.com');
})
</script>

<script type="text/javascript">
//在iframe窗口中监听messages事件，并接收消息
window.addEventListener('message',function(event){
var div1 = document.getElementById('div1');
if (event.origin === 'http://www.postmessage1.com') {
div1.innerHTML += "来自窗口" + event.origin + event.data+"<br>"
}
//像主页面回送消息
event.source.postMessage("你好，这里是：" + this.location, event.origin);

});

7、web WorSocket通信

function connect(){

try{
var url = 'ws:localhost/test';
socket = new webSocket(url);
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
socket.onopen = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
socket.onmessage = function(msg){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+'<br>'+ "接收数据" + msg.data +"</p>";
}
socket.onclose = function(){
message.innerHTML += "<p>socket状态：" +readyState[socket.readyState]+"</p>";
}
}catch(exception){

// socket.onerror  = function(){
message.innerHTML += "<p>发生错误！"+"</p>";
// }
}
}

function send(){
var text = document.getElementById('text').value;
try{
socket.send(text);
message.innerHTML += "<p>发送数据：" + text +"</p>";
}catch(exception){
message.innerHTML += "<p>发送数据出错</p>";
}
}

function disconnect(){
socket.close();
}

9、多线程线程处理。

event.data

10. 地理位置Geolocation

CSS 部分

1、两种CSS的盒子模型

-webkit-box-sizing: content-box

border-box

Span, input, a,    div, ul ol h1 p dl     br hr meta

2、CSS 选择符有哪些？优先级算法如何计算？

1.id选择器（ # myid）   2.类选择器（.myclassname）  3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）   5.子选择器（ul > li）         6.后代选择器（li a）
7.通配符选择器（ * ）    8.属性选择器（a[rel = "external"]） 9.伪类选择器（a: hover, li:nth-child）

!important >  id > class > tag

3、定位和浮动的问题？如何清除浮动？

<div class=”clear”></div>  .clear{clear:both}.

.clear{float:none;overflow:auto; _zoom:1;} zoom:1用于兼容IE6

.clearfix:after{content:””,height:0px;display:block;
visibility:hidden;clear:both}；

class：after,:before

elment:link，:hover，:active，:visited，:focus，:first-child

4、CSS3有哪些新特性？

border-radius:10p

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

box-shadow:4px 2px 6px #f00, - 0px 0px 12px 5px #3C0 inset;

rgba  background:rgba(255,255,255,0.5); 其中a表示透明度，为0-1之间。

:background-image:linear-gradient(to top left,red,blue,green); to top right |to bottom |to right

text-shadow： X-Offset Y-Offset blur color; x偏移，y偏移，模糊程度，阴影颜色。

text-shadow: 0 1px 1px #fff

transform-origin：原点
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,扭曲

transition: transition-property, transition-duration, transition-timing-function, transiton-delay

transition: height 0.5s ease-in 0.2s   div:hover{height:100px; border-radius: 10px; //到达的特效点}

动画属性 过渡时间  过渡函数  延迟时间，多个过渡用逗号隔开.

from {} to {}

@-webkit-keyframes  chromechange{
0%{ background:red,left:100px,top:100px
}
50%{ background:blue,left:0px,top:100px
}
100%{ background:yellow,left:0px,top: 0px
}
}   @keyframes 后紧跟动画名称  还必须配合相应元素的animation属性

animation：changecolor 8s linear 0.5s
–webkit-animation chromechange 5s ease-in 2s infinite alternate

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

5、 如何居中div,如何居中一个浮动元素?

div{
width:200px;
margin:0 auto;
}

.div {
width:500px ;
height:300px;
margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;

6、Flexbox伸缩布局

.flexcontainer{
display:flex;
flex-direction:row;//column, column-reverse,row-reverse
justify-content:  center|flex-start | flex-end
align-items:    | space-between | space-around
flex-wrap： align-content
flex-flow:

.item {
order: <integer>;;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex
flex-basis   项目覆写默认align-items对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

7、如何设计响应式布局

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
1.1024px显屏

@media screen and (max-width : 1024px) {
/* 样式写在这里 */
}
2.800px显屏

@media screen and (max-width : 800px) {
/* 样式写在这里 */
}
3.640px显屏

@media screen and (max-width : 640px) {
/* 样式写在这*/
}

8、Bootstrap优点与缺点

9、布局实现左侧固定，右边自适应

10、你真的懂z-index?

11、Icon-font: 是用字体文件取代图片文件，来展示图标、特殊字体等元素的。

@font-face{font-family;src:url();}

Ajax—异步JavaScript and xml

var xhr = new XMLHttprequest()；

new ActiveXObject(“Microsoft.XMLHTTP”)；

readyState : ajax工作状态
responseText: ajax请求返回的内容
readystatechange:对于服务器状态的监听，当readyState状态只发生改变是触发
**容错处理**
xhr.status:服务器状态，http状态码，比如404，102等等

function f1(){
var xhr = new XMLHttpRequest();//1 创建ajax对象
{
if(xhr.readyState==4 &&xmlHttp.status==200)
{
alert(xhr.responseText);
}
}
xhr.open('get','./03.php'); //2. 打开http请求1
xhr.send(null); //3. 发送请求2
}
readyState 属性表示Ajax请求的当前状态。
它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
xhr.open("get","../ajaxServlet?timeStacmp="+ new Date().getTime() + "&c=22",true);
//如果是post请求方式，需要手动设置请求头信息
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("a=9&b=10");

$("#testAjax").click(function(){
//Ajax调用处理
$.ajax({
type: "POST",
url: "test.php",
data: "name=garfield&age=18",
success: function(data){
$("#myDiv").html('<h2>'+data+'</h2>');
}
});

});