笔记：

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/

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

精减代码

CSS Sprites

为图片指定宽度与高度

启用Keep-Alive属性

使用浏览器缓存

启用GZIP压缩

1.了解搜索引擎如何抓取网页和如何索引网页：你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web 

crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

2.Meta标签优化：主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

3.如何选取关键词并在网页中放置关键词：搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5

个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

4.了解主要的搜索引擎：虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

5.主要的互联网目录：Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

6.按点击付费的搜索引擎：搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

7.搜索引擎登录：网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

8.链接交换和链接广泛度（Link Popularity）：

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从

而给你更高的排名。

9.合理的标签使用

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

微格式是一种网络技术，用于将传统网页中的标签转化成元数据（描述数据的数据）以供机器和人阅读和使用。

不同种类的微格式

XFN 用于描述社交关系

hCalendar  用于描述事件

hCard   描述联系信息

hNews  描述新闻内容

hProduct 描述商品

XOXO 描述列表和大纲

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

1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

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

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在

.二者区别

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

平台稳定性，维护起来资金小， 长期来说降低开发成本。

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

。

采用优雅降级的写法，如果一个浏览器同时支持前缀写法和正常写法，后面的旧版浏览器样式就覆盖了新版样式，出现一些奇怪的问题 ，但是用渐进增强的写法就不存在这个问题。这种属性不止border-radius一个，所以为了避免这个不必要的错误，建议大家都采用渐进增强的写法。

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

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能

。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

现代浏览器在Quirks Mode下，页面会发生哪些变化，怎么样去避免

1.在Quirks Mode下，为body设置一个margin是无效的。

2.默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，它是非活动状态（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需要它的时候），但是在标准模式下，你仍然需要增加html { overflow: auto;}。

3.默认的浮动图片的水平margin是3像素（而不是0）。

4.在CSS中，使用margin: 0 auto使一个块居中是无效的。；

5.字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。

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

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

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

1. png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

3. IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大，浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

     这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

4.渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css

          .bb{

           background-color:#f1ee18;/*所有识别*/

          .background-color:#00deff\9; /*IE6、7、8识别*/

          +background-color:#a200ff;/*IE6、7识别*/

          _background-color:#1e0bd1;/*IE6识别*/

          }

5. IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.

       解决方法:统一通过getAttribute()获取自定义属性.

6.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

7.（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

8.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

9.  超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

10.3像素问题，问题出现的浏览器：IE6及其更低的版本

问题描述：两个相邻的div之间有3个像素的空隙，一个div使用了float,而另一个没有使用产生的。

解决方法：对另一个div也使用float;给浮动的div添加属性margin-right:-3px,但是这样写，在其他浏览器又会不正常，所以我们需要添加IE6的hack，在属性margin-right前添加下划线  _margin-right:-3px.(IE6以及更低版本的hack，是在属性前面添加下划线 _ )

11.居中问题，div里的内容，IE默认为居中，而Firefox默认为左对齐

解决：margin: 0 auto;

12.ul标签在FF中默认是有 padding值的，而在IE中只有margin有值，还有缩进问题

解决：{list-style:none;margin:0px;padding:0px;}

13.IE6不能定义1px左右宽度的容器问题出现的浏览器：IE6及其更低的版本

问题描述：创建一个高度为1px的容器，在IE6中没效果。 解决方法：因为行高line-height在IE6下有默认值，设置 line-height:1px|overflow:hidden|zoom:0.08.

14.Firefox点击链接出现的虚线框：Firfox浏览器

问题描述：Firefox浏览器在点击链接时，会自动在元素周围添加一个虚线边框。 解决方法：我们为了和其他浏览器保持一致，需要去掉虚线框，我们可以给a标签设 置outline属性，如下： a{outline:none;} a:focus{outline:none;}

15. IE6不支持min-*:，问题出现的浏览器：IE6及其更低的版本

问题描述：IE6不支持min-height属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。 解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。 Height : auto  ! important; Height:300px; Min_height:300px;因为IE6不识别!Important，它只识别到了height:300px,当内容超过300px时,它会自动延长高度。IE7以及其他浏览器都识别！Important，虽然定义了Height:300px,但是！Important的优先级别最高。所以内容超过300px时，还是会自动延长

Hack 的弊端

无法知道为什么这个浏览器比那个浏览器多出10个像素了，越来越多的不知道将导致你对css的迷惑。你将越来越依赖hack。

比如双倍距bug，加上display:inline就能解决问题了，并不需要用到hack来取掉那一倍的宽度。使csser对css、对浏览器特性（或者说是漏洞）的理解停滞不前，所以应尽量避免hack的使用。

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

gird布局

   grid: 生成块级网格

    inline-grid: 生成行内网格

    subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大

小。

    2.设置行和列的大小grid-template-columns、grid-template-rows

        grid-template-columns：1px 10% auto ...;设置子元素的宽，值的单位可以px、rem、百分比等；同时值的个数表示列的个数

        grid-template-rows：1px 10% auto ...;设置子元素的高，值的单位可以px、rem、百分比等；同时值的个数表示行的个数

今日完成：任务14

明日完成：复习css的基础  看看js基础 改改任务 进入js

遇到问题：less 还有一些用法用的不熟练

收获：通过不断使用标签，对css越来越熟练