今天完成的事情：完成了任务2的玩家配比的css部分。
明天计划的事情：继续js2
遇到的问题：暂无
收获：学习到如何通过监控屏幕宽度，而改变字体根大小。

<script type="text/javascript" >
    /*网页字跟随页面自动变化*/
    function setRem(){
        /*获取当前页面的宽度*/
        var width = document.body.offsetWidth;
        /*设置页面的字体大小*/
        var nowFont=width/320*16;
        /*通过标签名称来获取元素*/
        var htmlFont=document.getElementsByTagName('html')[0];
        // 给获取到的元素的字体大小赋值
        htmlFont.style.fontSize =nowFont+"px";
    }
    setRem();
    window.onresize=setRem;  //监听屏幕变化
</script>

                                                           任务十四十五总结                                                                     

任务总结：

任务十四十五，主要是去除任务八九所用到的boostrap的框架。主要内容是从代码所用到布局，分别进行样式分离，单独的作为一个样式表，从而得到自己的组件库。另外就是不基于boostrap的模板，用input和label的联系做出导航栏和轮播图。这一步骤加深了对input和label的理解。之后就是通过less对整体代码进行整理，删除多余div和样式表，使代码简洁。

脑图：

耗时：4天

                                                                深度思考                                                                    

为什么要做组件库？

   ①什么是组件？

      组件：他的核心意义在于对代码的复用。功能相单一或者独立，在整个系统代码层次上位于最低层，被其他代 码所依赖。

   ②组件化的意义？

      传统的开发方式效率低下，而且动辄几百行的代码，根本不方便维护使用。随着业务增长或者变更，系统的复杂性会呈现指数级的增长，经常会出现一个小小的改动，一个小小的功能增加就可能引起整体的逻辑修改造成牵一发动全身。

      所以我们希望一个大且复杂的页面可以被分解为几个小部分，这些小部门，互不干扰，可以单独开发，单独维护，而且他么之间可以随意组合。就拿电脑主机来说吧，cpu，显卡，主板，硬盘，电源，内存等等他们不是一个公司生产的，但是他们彼此之间根据标准分别生产，最后组装，在一起了。当某个部件出现问题，换掉就行了。维修之后在装上去就行了。

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

① WeUI 

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

 ② MDUI 

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

③惊奇  UI 

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

④设计蚂蚁  

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

⑤易于UI 

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

⑥Bootstrap   

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

⑦Foundation 

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

⑧jQuery 

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

⑨阵营

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

⑩Angular 

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

①①.Vue

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

①②.Backbone

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

①③.Ember

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

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

①BFC是什么定义：

       一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

②怎样才能形成

      BFCfloat的值不为none。

     overflow的值不为visible

           display的值为table-cell, table-caption, inline-block中的任何一个

     position的值不为relative和static

     css3中flex boxesfieldset元素

③.BFC的作用

    包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度，这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的不被浮动元素覆盖 浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建BFC 后可以阻止这种情况的出现。

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

①什么是SEO？

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

       其实叫做针对搜索引擎优化更容易理解。它是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化， 改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标。

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

       ①content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。下面详细介绍它的用法 。

      ②before和after是什么呢？

        :before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

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

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。 　　

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

 HTML5的离线储存怎么使用？  　　

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：

1、页面头部像下面一样加入一个manifest的属性；

2、在cache.manifest文件的编写离线存储的资源；

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

3、在离线状态时，操作window.applicationCache进行需求实现。

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

渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器，（特）比（别）如（是）IE6等，不支持CSS3的浏览器，但是CSS3的样式又特别优秀不忍放弃 ，所以在高级浏览器中应用CSS3样式，在低级浏览器只保证基本功能。

“渐进增强”是被Steven Champeon创造于2003年3月11日在奥斯汀的SXSW互动大会，并于2003年3月和6月间通过一系列Webmonkey教程文章的公布。 （我找了半天资料，翻了下英文文章也只找到这段历史，无奈脸），谷歌公司是很支持这种开发方式的啊，我认为渐进增强不仅是一个前端开发思想，更加是一个程序开发思想。

①什么是渐进增强

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

2.什么是优雅降级

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

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

3.二者区别

1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。 你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小， 长期来说降低开发成本。

2.）那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。

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

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

         Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式

       Quirks Mode是一种浏览器（像IE，Firefox，Opera）操作模式。 从根本上说，怪异模式（也称之为兼容模式）意味着一个相对新的浏览器故意模拟许多在旧浏览器中存在的bug，特别是在IE4和IE5中。

       Quirks Mode是由文档类型探查法触发。也就是大家熟知的文档类型切换。这意味着浏览器检查一个HTML文档的开始，看它是否包含一个HTML规范所要求的文档类型声明。

       Quirks Mode的目标是使旧页面显示出他们的作者想要的那样。旧页面可能利用旧浏览器已知的特性写成，或者至少是适应旧浏览器。       Quirks Mode是什么没有权威的规范。毕竟，实质上Quirk Mode是一个故意违反CSS和HTML的规范。

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

CSS Hack的概念

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

描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

响应式布局来说，pc站当然是把所有能呈现的东西都呈现出来，而且一般整体是纵向布局，局部用横向布局（float较多）。到了平板电脑，基本上和pc的布局也是差不多的。到了手机，才开始有了很大的变化，整体依然是纵向布局，但是横向布局却变得越来越少，因为手机能呈现在一屏的内容确实是少之又少，而且还要考虑到分辨率大小的问题，所以一般都是不用float布局，把最重要的功能呈现出来，没有pc里面那么多的效果。