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

灰太狼 2022-07-20 12:07 180阅读 0赞

--------------------

### HTML5部分 ###

1、**新的表单元素**：  
(1)color颜色选取  
(2)增强的表单：Number有min,max  
Email:邮件，时间控件Time，progress进度条。新增属性：placeholder，autofocus

**2、新的语义化标签**  
header,footer,artice,aside ,nav，audio,vedio不是以前每个都用div套div这样没有语义的混乱，页面的每个布局都有了一对标签。简洁明了，已维护。方便搜索引擎抓取。

**3、Canvas绘图**:  
(1)定义canvas画布  
(2)获得canvas上下文区域，  
(3)绘制图形。  
Canvas+js实现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)canvas 和 svg 性能比较

SVG 基于 **XML**，这意味着 SVG **DOM** 中的每个元素都是可用的。您可以为某个元素附加 JavaScript **事件处理器**。 SVG 中，每个被绘制的图形均被视为对象。

Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是**逐像素**进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制。**它依赖于像素**。

Canvas 通常被视为具有高性能，但是并不意味着它就是明显的选择，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。

![这里写图片描述][20160722204913103]

### **4、本地缓存 WebStorage** ###

(1) 类型：sessionStorage和localStorage。

**sessionStorage**用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage\*\*不是一种持久化的本地存储，仅仅是会话级别的存储\*\*。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

（2）web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，**并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽**，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与**服务器进行交互，作为HTTP规范的一部分而存在** ，而Web Storage仅仅是为了在本地“存储”数据而生（4k vs 5M）。

### 5、离线缓存。 ###

可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值，只要在html标签中加入**mainfest**属性，并指定mainfest文件即可。配置文件中指定哪些是缓存，哪些是在网络下请求的文件 CACHE MAINFEST 本地缓存，NETWork 网络下载 web.xml MIME-mapping.

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

核心思想是postMessage 发送消息或者回送消息 注册message事件监听 。  
页面1：

页面2 对文件进行回传

### 7、web WorSocket通信 ###

客户端和浏览器建立的一种全双工通信方式，只要一次握手，就能建立双向数据传输。传统的用的比较多的是通过轮询的方式，隔一段时间，由客户端向服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的：  
**缺点** – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。

**WebSocket**—服务器可以主动传送数据给客户端，只要客户端打开的socket与服务器建立连接后，就可以把数据推送到这个socket上，从被动转为主动。我们只要在WebSocket对象中添加回调函数来监听事件。

WebSocket在DOM中是window对象的子对象，它具有：

*  **WebSocket(url)**构造函数。
 *  **readyState**。只读属性，其值可以是CONNECTING（0），OPEN（1），CLOSED（3）。
 *  boolean **send**(in DOMString data)
 *  void **close()**两个方法，分别用于发送消息和关闭WebSocket连接
 *  **onopen**, **onmessage**, 和**onclosee**三个事件属性，分别对open, message和（send）close三个WebSocket事件。

参考：[http://blog.csdn.net/i10630226/article/details/51530850][http_blog.csdn.net_i10630226_article_details_51530850]

### 9、多线程线程处理。 ###

(1)创建一个线程，var worker = new Worker(“worker.js”);  
(2)需要使用“PostMessage”发送信息给子worker对象。子worker的js通过onmessage接收event对象，**`event.data`**再将线程返回。  
(3) worker线程发送数据的时候，通过”onMessage”获取事件.

### 10. 地理位置Geolocation ###

开发app定位。  
(1)getCurrentPosition获取当前用户的地理位置信息  
(2)watchPosition():定期轮询设备的位置  
(3)clearWatch():用于停止的轮询。

--------------------

## CSS 部分 ##

要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、CSS3新特性、移动端开发技术等。

### 1、两种CSS的盒子模型 ###

W3C=width/height+padding+border+margin  
IE=width/height + margin = （内容区宽度+ padding + border） + margin;

可以设置`-webkit-box-sizing: content-box`(W3C) `border-box`(IE)

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素与块元素的转换与区别。

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

**display**：下面的inline,inline-block/block属性有什么区别？

display:none 和 visibility:hidden 的区别是什么?

inline-height 和height 的区别？

将line-height 和 height 设置成一样，可以让文字居中，有文字，有inline-box属性，设置了inline-height后可以将div撑开，如果元素内没有内容，则不会撑开高度，因为line-boxes为0，即使指定了line-height也是不行的，只要有内容，行高就生效。撑开行高度的是line-height（line-boxes），而不是字体大小。

[http://www.cnblogs.com/raimonfuns/p/3921475.html][http_www.cnblogs.com_raimonfuns_p_3921475.html]

### 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` ， important 比 内联优先级高,但内联比 id 要高。优先级就近原则，最后载入的定位为准。

*  可继承，font-size font-family color
 *  不可继承：border padding margin width height ;

注意：css选择器的匹配方式从右往左匹配的，涉及到一个性能的问题。

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

1、 定位position：下面的属性， relative和absolute定位原点是？

（1）浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  
问题：（1）父元素的高度无法被撑开，影响与父元素同级的元素  
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

**解决办法：**  
（1）使用空标签清除浮动。在浮动标签后面添加一个class定义，弊端:增加无意义标签。

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

（2）**使用overflow**。给包含浮动元素的父标签添加css属性

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

（3）使用after伪元素清除浮动。该方法只适用于非IE浏览器。

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

区别：在文档中是创造了新的元素,一个作用者是类，一个作用者是元素。

*  伪元素：`class：after,:before`,并没有创造新的元素
 *  伪类：`elment:link，:hover，:active，:visited，:focus，:first-child`（伪类选择器）

### 4、CSS3有哪些新特性？ ###

**1、CSS3实现圆角。**  
`border-radius:10p`x; 左右右左。除了px,还可以是百分比。超过50%就不会变，不超长/宽的一半。

**实心上半圆**：高度(height)设为宽度（width）的一半，设置左上角和右上角的半径与元素的高度一致（大于也行）

**实心圆**：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。

**2、阴影**  
`box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];`多个逗号隔开

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

**3、多背景**

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

**4、渐变（gradient）**  
线性渐变(linear)和径向渐变(radial)：

右下到左上`:background-image:linear-gradient(to top left,red,blue,green); to top right |to bottom |to right`

**5、对文字加特效**  
文本阴影`text-shadow： X-Offset Y-Offset blur color; x偏移，y偏移，模糊程度，阴影颜色。`  
`text-shadow: 0 1px 1px #fff` 嵌入字体@font-face  
省略标记text-overflow:ellipsis; 溢出隐藏overflow:hidden; 一行显示white-space:nowrap;

**（\*）6、旋转（transform）**

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

**（\*）7、Transition过渡**

语法：  
下面的属性：

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; //到达的特效点}

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

*  transition-property: border-radius ;
 *  transition-duration: 1s；
 *  animation: duration
 *  transition-timing-function(ease,linear,ease-in,ease-out,ease-in-out)
 *  transiton-delay:.2s

**（\*）8、Keyframes 关键帧名**  
可以直接`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-name:（property）其他都一样

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

**（\*）9、animation动画**  
**animation**：`animation-name` `animation-duration` `animation-timing-function` `animation-delay` `animation-iteration-count`

*  播放次数animation-iteration-count:5(infinite):
 *  播放方向：animation-directition:normal alternate(往返)
 *  播放，暂停animation-play-state:paused/running
 *  动画时间外属性 animation-fill-mode(none,forwords,backwards,both)

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

最简单的：

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

负边距：现负一半将元素置到（0,0），再通过left，top –50%

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

## 6、Flexbox伸缩布局 ##

随屏幕与浏览器大小变化而变化，灵活布局。减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

Flex容器属性

.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:

Flex项目属性

.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、如何设计响应式布局 ##

css3中有媒介查询  
设置头部：

## 8、Bootstrap优点与缺点 ##

优点：  
(1)易于上手，后台前端不强的人，减少不少负担。  
(2) 可以自己定制适合自己的类库。设计自己的css库。因为Bootstrap开源，可以用less重新设计组件。而且对于学习如何组织css还是很有帮助。  
（3）栅格化布局，是一个响应式布局的框架，很好用，不需要自己去布局了  
缺点：  
(1)不遵循最佳实践，最大问题之一是DOM元素上将拥挤大量的类。使可扩展性、重用性遇到了更大的挑战，重构和扩展不方便。  
(2)不支持SASS可能是最大的争论之一，BootStrap使用Less构建，原生不支持Compass和SASS。  
(3)不兼容IE8以下浏览器. 大家做出来的网站都一个摸样,没什么创意。

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

方法一：  
**浮动+margin:**左边float left,设置宽度，右边设置margin-left,要记得清除父容器的浮动，\{overflow:hidden,zomm:1\}  
（此方法，在设置右边固定，左边自适应的时候，有个顺序问题，浮动的放前面）  
方法二：（另一种换汤不换药）  
**绝对定位+margin**  
左边让文档流脱离，绝对定位设置宽度top,left=0，右边margin-left,要记得父容器的position：relative；  
问题：当侧边栏（绝对定位的栏高度 < content 时），content 会覆盖后面的footer的内容。因为绝对定位使得content无视他的存在而把footer覆盖。

方法三：

**浮动+ 负边距：**左边float left ：margin-right:-100%,右边容器width:100%,字内容margin-left:左边宽度；  
方法四：

使用自适应布局，一个设置为flex-grow=0,另一个为：1.

三栏布局：两边固定，中间适应（三边自适应）

其他常见布局：见  
[http://www.fscwz.com/2016/03/24/css-basis-layout-summary/\#方法三：float+负margin  
][http_www.fscwz.com_2016_03_24_css-basis-layout-summary_float_margin]

[http://jo2.org/css-auto-adapt-width/][http_jo2.org_css-auto-adapt-width]

## 10、你真的懂z-index? ##

（1）**没有z-index**:那么他会遵循两个规则，顺序规则：不设置定位position，后面的会覆盖前面的，有定位除了static，定位规则：有position 属性的节点会覆盖没有定位的节点。\[电子商务网站的侧边栏\]

（2）**有z-index**:如果没有定位，有z-index属性，那它是失效的，从父规则：爹的z-index大，那就大。因为爹已经覆盖了子，子的z-index设得再大也没用, 那是无法逾越的层级。爹的z-index相同，按照顺序来。

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

**好处**：矢量图，可以拉伸不变形， 字体：**可以自行更换颜色， 大小**：用图片的话，即使是雪碧图，也有很大，  
**缺点**：由于是字体，所有只支持纯色，多种颜色混合就不行了。怎么用声明字体：`@font-face{font-family;src:url();}`

--------------------

### Ajax—异步JavaScript and xml ###

1、应用：(1)百度搜索(2)用户名被占用，合法性校验，(3)无刷新分页。

2、创建Ajax对象 —**XMLHttpRequest对象**

var xhr = new XMLHttprequest()；

**低IE:**

new ActiveXObject(“Microsoft.XMLHTTP”)；

3.典型实例（手写）

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");

4、get发送2k数据， 参数形式url？name=value&形式 传递中文参数要用encodeURIComponent()编码，post无数据限制， 参数要设置头setRequestHeader可以传递中文。

5、优缺点  
**优点：**  
（1）采用异步的方式与服务器进行通信，响应的速度更快，页面无刷新，用户体验非常好。  
（2）按需取数据，要什么，请求什么，减少请求的冗余，以及不必要的数据往返，节省带宽。  
（3）Ajax在客户端运行，承担了一部分本来由服务器承担的工作，可以减小大用户两下的服务器负载。  
**缺点：**  
(1)不支持浏览器的back返回按钮,没有用户的历史浏览记录。  
(2)安全问题 AJAX暴露了与服务器交互的细节。

6、 jQuery ajax 实例（手写）

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

详细参考：[http://blog.csdn.net/liwuyang2013/article/details/18931723][http_blog.csdn.net_liwuyang2013_article_details_18931723]

[20160722204913103]: /images/20220719/81d891a6cd6442b0801542cd3b1a40e9.png
[http_blog.csdn.net_i10630226_article_details_51530850]: http://blog.csdn.net/i10630226/article/details/51530850
[http_www.cnblogs.com_raimonfuns_p_3921475.html]: http://www.cnblogs.com/raimonfuns/p/3921475.html
[http_www.fscwz.com_2016_03_24_css-basis-layout-summary_float_margin]: http://www.fscwz.com/2016/03/24/css-basis-layout-summary/#%E6%96%B9%E6%B3%95%E4%B8%89%EF%BC%9Afloat+%E8%B4%9Fmargin
[http_jo2.org_css-auto-adapt-width]: http://jo2.org/css-auto-adapt-width/
[http_blog.csdn.net_liwuyang2013_article_details_18931723]: http://blog.csdn.net/liwuyang2013/article/details/18931723