今天完成的事情：任务14、15深度思考，任务十五页面三的编辑

明天计划的事情：查看学习资料怎么运行javascript文件、javascript数据类型、javascript逻辑运算符、javascript条件语句和循环语句

遇到的问题：

收获：

一、任务十四深度思考

1.为什么要做组件库？

在大型软件系统中，web应用的前后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也越来越高，传统开发模式总是存在着开发效率低，维护成本高等的弊端。 
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。 
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。 
随着React，angular等以组件（指令等）为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

二、任务十五深度思考

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

Quirks模式是什么

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

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

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD（文档类型定义）当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

和Standards模式有什么区别：

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

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

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

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的

用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

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

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

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

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

HTML5 提拱更好的本地存储规范 localStorage 和 sessionStorage , 它们将数据存储在本地，而且在http请求时不会携带 Storage 里的信息, 使用方式也很简单:

localStorage.setItem('key', 'value');

localStorage.getItem('key');

localStorage.removeItem('key');

sessionStorage.setItem('key', 'value');

sessionStorage.getItem('key');

sessionStorage.removeItem('key');

sessionStorage 和 localStorage 使用方式及特性基本一致，唯一的区别是， sessionStorage 只在会话内有效，当浏览器窗口关闭，sessionStorage 缓存的数据会自动被清除， 而 localStorage 只要不手动清除，它会永久保存在本地。

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

微格式在实际应用中的意义和作用

微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：

1、在捉取Web内容时，能够更为准确地识别内容块的语义；

2、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。

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

content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容，此特性目前已被大部分的浏览器支持。

作用以及应用：

最基本的 – 生成内容

使用计数器创建号码内容

为多语言内容插入正确的引号

用图片替换文字

显示相对应的链接图标

使用属性值作为content内容

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

第一， 什么是SEO?

搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。 

要想更好理解以上一段废话，首先需要理解关于搜索引擎的两个概念。

1、 搜索引擎工作原理

可以将搜索引擎比喻为一个偌大的图书馆，里面所有的图书都已经分门别类排列整齐了，分类分成大分类（可以理解为书架）小分类（可以理解为书架上搁架）以及具体到最小的分类（书的名字）。图书馆每天都在增加新的图书，那么一个新的网站就等于一本书，我们进入搜索引擎输入的关键词就是图书馆里面分类的名字或者直接是书名，通过搜索引擎这个庞大的图书馆系统可以很快的找到我们需要的内容。那么什么书归置于什么分类下，如何摆到更容易被找到的位置就需要理解下面的内容了。

2、 搜索引擎蜘蛛工作原理

搜索引擎蜘蛛是搜索引擎工程师开发出的模拟蜘蛛在蜘蛛网爬行的一个程序，因为类似蜘蛛的行为，就称为搜索引擎蜘蛛，用来抓取网页信息，分门别类的存储在上面所说的图书馆里，有需要的时候再进行调取。所以为了让蜘蛛更容易抓取网页内容，就要投其所好，才能为我所用。

第二， 我们为什么需要SEO?

那么我们为什么需要做SEO呢，就是为了提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善用户体验，促进销售的作用。

1、 什么样的网站需要被搜索引擎检索到？

我有百度过关键词“合肥房产网”，出来的结果是好居网排名21位，也就是说翻到第三页第一个才是我们的网站。如果我是一位准备买房或者卖房的用户，我用百度搜索也不太可能会翻到第三页才决定我要找谁给我买或者卖这个房子吧。就算我们的服务我们的产品是最好的，但是用户搜索不到也是白搭，这就是SEO的作用所在，通过更高的排名，让潜在用户可以更便捷的找到我们。

2、 什么样的网站可以更好的被搜索引擎检索到？

对搜索引擎越友好，网站权重越高，排名就越高，就更容易被检索到。从拟人化的角度来看待搜索引擎蜘蛛，可以得出一些结论。首先你需要投其所好，网站结构脉络需要符合蜘蛛阅读的习惯，代码杂乱无章，蜘蛛看着都头疼，就无法给他留个好印象了；其次，网站深度不能太深，从首页到目标页跳转最好不能超过四次，再多的话蜘蛛就头晕了，转不出来，下次他就不再光顾，我们只能往后站；再次，当蜘蛛进入一个网站，半天加载不出来，他每天这么繁重的工作量，哪里会有时间慢慢等加载完成，相信印象也不会有多好了；最后，内容是一个网站存在的基础，蜘蛛循着一个关键词来到我们的网站，转了一圈，发现跟他想找的东西风马牛不相及，他可就头大了，直接就打入冷宫吧。 

看到这里相信大家会对SEO充满好奇了吧，到底怎样才能做好SEO呢？虽然说SEO更多的是运营的工作，布关键词发外链是一项繁重而长期的工程，但是作为网站建设人员，我们也有一些点可以注意，一样可以对SEO有所帮助，下面就是从前端的角度对网站进行的一些优化。

第三， 从前端角度出发有哪些注意事项有利于SEO?

1、提高页面加载速度。 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，使用background-position找到需要的图片位置。可以减少HTTP请求数，提高网页加载速度。 

2、 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上，每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影响阅读的情况下再去加载JS文件。 

3、 优化网站分级结构。在每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路，有条件的话，最好能单独加个Sitemap页面，将网站结构一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。 

4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。 

5、 文本强调标签的使用。当着重强调某个关键词需要加粗表示，选用strong标签比使用b标签要更有强调作用。 

6、 a标签的title属性的使用。在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。 

7、 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上。 

8、 H标签的使用。主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

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

一、什么是BFC 

BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 

中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

二、 形成 BFC 的条件 

1、浮动元素，float 除 none 以外的值； 

2、绝对定位元素，position（absolute，fixed）； 

3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions； 

4、overflow 除了 visible 以外的值（hidden，auto，scroll）

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

css实现轮播图

任务14任务总结：主要是了解了组件化的意义，简单来说就是将一个大型后端服务，拆分成多个小服务，它们分别部署，降低了开发的复杂性，而且提高了系统的可伸缩性。

。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。 

随着React，angular等以组件（指令等）为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

任务15任务总结：初步尝试了组件化，将三个页面公用的的部分单独拿出来作为组件，比如说页眉页脚的样式编辑。还有就是用css写了响应式的导航栏和轮播图还有模拟了栅格系统，响应式导航栏就是简单的引用label标签控制折叠再加一个媒体查询；模拟栅格系统也是加了几个媒体查询，更改列在不同屏幕尺寸下的宽度；轮播图上遇到了一些难点，任务十五主要耗时在这里。

轮播图构成：

轮播图一般由logo图片，底部指示器和左右切换按键组成。

难点：如何模拟左右切换按钮的点击事件

大致思路：

1.确定图片的切换方式，使用绝对定位，令三张图片重叠在一起，通过z-index的变化来切换图片。

2、模拟左右切换按键，利用单选框的伪类：checked来模拟点击事件。

3、模拟底部指示器，自定义单选框的样式，使用label标签和伪元素来更改单选框选中时的样式。

任务进度：css-14

任务开始时间：2018年5月18日

禅道：http://task.ptteng.com/zentao/project-task-692.html