今天完成的事情：

      今天修改了一下任务四的代码，讲了下小课堂
明天计划的事情：

      开始下边的任务
收获：

1.目前流行的组件库有哪些？css，js各有哪些流行的库？

库：库是有用功能的有组织的集合。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，库在查询中需要的功能在自己的应用中使用，我们可以从封装的角度理解库。

        框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发框架。是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。通常框架提供事件。  存储和数据绑定等功能。

 1. WeUI

          WeUI是一套  同微信原生视觉体验一致的基础样式库，微由官方信设计团队为微信内|网页微状语从句：信小程序量身设计，令用户的使用感知更加统一.https ： //weui.io / 

  2. MDUI

         相比国外框架，MDUI更多重要中文排版，提供全中文文档，中文社区。组件丰富MDUI包含了20余个组件，且每个组件都可以适应不同主题。国内开发的mdui基于material- ui开发的.MDUI是一套用于开发Material Design网页的前端框架   https://www.mdui.org/

 3. 惊奇  UI 

          惊奇UI  称为妹子UI的开源框架，据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页.Amaze UI包含20个以上的CSS组件，20 +个JS组件，更多多个包含不同主题的Web组件。相比国外框架，妹子UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能 .http：  //amazeui.org/

4.设计蚂蚁 

           一个服务于企业级产品的设计体系，基于“确定”和“自然”的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验。 https://ant.design /索引-CN 

 5.易于UI

           easyui是基于jQuery的和角用户的界面组件的集合.easyui提供了构建现代互动的JavaScript的应用程序的基本功能。使用easyui你不需要编写很多的的JavaScript代码，通常通过编写一些HTML标记来定义用户界面  .http：//www.jeasyui.com/

6. Bootstrap  

           简洁，直观，强悍的前端开发框架，让web开发更迅速，简单 .http：//www.bootcss.com/ 

7. Foundation

            Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的， Bootstrap有引导的意思，它尝试处理你项目中的一切所需注册有基础，地基及支柱的意思，给你项目中强有力的创造与支持。相对于引导丰富的组件及插件，基金会提供了仅有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。而引导则致力于提供所有定义好的元素，这样使得看起来许多网站都差不多。基础默认不带图标集，它推荐使用开源字体图标。与引导一样，基金使用网格流式布局将网页划分为12列，针对不同的设备显示不同的列数，实现响应式布局。 https://foundation.zurb.om/sites.html

8. jQuery

            jQuery是最常用的JavaScript库，它革命性的在客户端开发，将CSS选择器引入到DOM节点检索加链接来应用事件处理程序，动画和Ajax调用.jQuery近年来备受青睐，对于一个很需要的的JavaScript的功能的项目来说，jQuery的的的绝对是一个可行的选择。  https://jquery.com/

9.阵营

         阵营起源于实的内部项目，因为该公司对市场上所有的JavaScript的MVC框架，都不满意，就决定写自己 一套，用来架设的Instagram的的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了.React声称的英文一个用于构建用户界面的的的JavaScript库，它专注于MVC开发的“视图”部分，并且可以轻松创建保留状态的UI组件。它是实现虚拟DOM的第一个库，内存结构计算差异，有效地更新页面  .https： //reactjs.org/

10.Angular

          AngularJS [1]诞生于2009年，由Misko Hevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中

 .11.Vue

           Vue.js是一个构建数据驱动的网页界面的渐进式框架。由在美的谷歌工程师尤雨溪开发.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅仅是易于上手，还便于与第三方库或既有项目整合.Vue.js自身不是一个全能框架-聚焦它只于视图层因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用.https：//cn.vuejs.org/ 

12.Backbone

            支持jquery，自带路由，对象化视图，强大的同步机制减少页面大小从而加快页面显示   .http ：//backbonejs.org/ 

13.Ember

         一个用于创建web应用的JavaScript MVC框架，采用基于字符串的句柄条模板，支持双向绑定，观察者模式，计算属性（依赖其他属性动态变化），自动更新模板，路由控制，状态机等  。 Ember公司使用自身扩展的类来创建灰烬对象，数组，字符串，函数，提供大量方法与属性用于操作 .https：//www.emberjs.com/

2.请描述 BFC(Block Formatting Context) 及其如何工作 

box和Formatting Context基本概念

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 让我们看看有哪些盒子：

block-level box

    display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

 inline-level box

    display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；     

 Formatting context

      Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

常见定位方案

一 普通流 (normal flow)

    在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中， 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

二 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移

三 绝对定位 (absolute)

  在绝对定位布局中，元素会整体脱离普通流， 因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 概念

       BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，它是一个独立的渲染区域，只有block-levelbox参与，规定了内部block-level-box如何布局，并且 BFC 具有普通容器所没有的一些特性。 你可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

BFC布局规则

        我们平常说的盒子是由margin、border、padding、content组成的,实际上每种类型的四条边定义了一个盒子,分别是 content box、padding box、border box、margin box ,这四种类型的盒子一直存在,即使他们的值为0.决定块盒在包含块中与相邻块盒的垂直间距的便是margin-box。

  •内部的Box会在垂直方向，一个接一个地放置。 就是我们平常div一行一行块级放置的样式。

       • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

       •每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。就是元素左margin和包含块左border接触，即使存在浮动也是如此。左浮动就是靠左，右浮动就是靠右，

       • BFC的区域不会与float box重叠。应用于两列布局

       • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响，浮动不覆盖，

       •计算BFC的高度时，浮动元素也参与计算。如父元素高度塌陷，清除浮动。父元素高度由内部撑开，计算bfc高度，内部浮动的子元素也参加。

如何触发BFC

只要元素满足下面任一条件即可触发 BFC 特性：

     1.body 根元素

     2.浮动元素：float 除 none 以外的值

     3.绝对定位元素：position (absolute、fixed)

     4.display 为 inline-block、table-cells、flex

     5.overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.谈谈以前端角度出发做好SEO需要考虑什么？

SEO由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。

从宏观的角度来说，SEO有三条最重要的规律，那就是原创的内容、高质量的外部链接和适度的优化。

4.知道css有个content属性吗？有什么作用？有什么应用？

content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。

1.content属性与:before及:after伪元素配合使用生成文本内容

2.嵌入文字符号

3.插入图片

4.插入元素的属性值

5.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。 　　优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

6.HTML5的离线储存怎么使用？

什么是Manifest：

其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点：

离线浏览：即当网络断开时，可以继续访问你的页面。

访问速度快：将文件缓存到本地，不需每次都从网络上请求。

稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。

7.渐进增强和优雅降级之间有什么不同?

什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。

什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

8.Quirks模式是什么？它和Standards模式有什么区别？

  如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，这就是标准模式，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式 （怪癖模式，诡异模式，怪异模式）。总结起来，混杂模式是不符合 Web 标准的模式，准标准模式是几乎要符合标准的模式，标准模式是符合标准的模式。 我们可以使用不同的 doctype 来激活不同的模式。

下面解释每种doctype的意义

当 doctype 信息为：

“!DOCTYPE html”

时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。

当 doctype 信息为：

“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"”

时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。

当 doctype 信息为：

“!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"”

时，浏览器会选择 Almost Standards Mode，需要注意的是如果今后需要把这个页面重新改为 HTML5 规范，那么table标签中的分割图片问题可能会错乱。

当 doctype 缺失（不注明、写错）的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式，我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。

9.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

浏览器兼容性

网页浏览标准只规定了接口，并没有接口实现的详细规范，使得各浏览器对相同的功能使用了不同的实现方法，并导致了功能实现的差异。这些差异按程度由显示方面到核心概念都存在。为了使得用户在不同的浏览器访问网页时看到同样的显示内容和效果，就需要考虑浏览器的兼容性问题。

CSS Hack

面对浏览器诸多的兼容性问题，经常需要通过CSS样式来调试，其中用的最多的就是CSS Hack。所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式，通过使用某个浏览器单独识别的样式代码，控制该浏览器的显示效果。

脑图：