今天完成的事情：

1.学习了样式的组件化

2.做了任务14和任务15的构思

明天计划的事情：

1.打算任务14和15一起做，开始着手做任务14和15

2.准备一点小课堂

遇到的问题：

1.在考虑怎么对任务8拆分组件时，不知从何下手，最后打算将页面的头部，响应式导航栏，轮播图，底部这四个当做组件拆分出来

2.去除了bootstrap框架后，页面的响应式导航栏和轮播图都用不了了，需要自己用css进行模拟。

3.由于之前任务8页面布局大量套用bootstrap栅格布局，现在不用框架的话感觉工作量挺大的，所以打算将栅格布局从bootstrap中拆出来用sass写一遍，放到自己做的公共样式表，在各个页面的样式中引用，这样简化对之前任务8代码的重构工作量，不知道这样是否可以？

收获：

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

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

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

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式。

Quirks模式：浏览器为了维持对较旧网页的向后兼容，而使用的一种技术。Standards模式是遵循W3C的标准模式。

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

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

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

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

 （1）渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

（2）优雅降级（graceful degradation）

 一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

   区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，对版本较高的浏览器追加不同的功能

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

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

seo与sem

SEM(Search Engine Market)就是搜索引擎营销。简单理解就是购买搜索引擎提供的广告位， 例如百度和google右侧的结果都是广告，按照关键词购买，按照点击收费，每次有网民点击你的广告，搜索引擎就扣一次费用。

区别：SEO是通过对网站的内容，结构，外链等方面进行优化，使网站更符合搜索引擎的抓取， 从而提升搜索结果排名，提升网站流量的手段。

前端从业人员怎么做seo：

（1）维护网站，提高内容质量，保持更新

搜索引擎会考评网站的质量，保持网站的经常更新，使网站拥有大量的、有用的、可读性强的优质信息。网站的权重会相应的提升。为了保持更新频率而去抄袭并不可取。

（2）网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。

（3）控制首页链接数量

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

（4）导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

（5）控制页面的大小

减少http请求，提高网站的加载速度。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

（6）适量的关键词和网页描述

关键词不宜太多也不宜太少，列举出几个页面的重要关键字即可，切记过分堆砌。网页描述要准确，精简地描述网页的内容。

（7）代码优化

精简代码，代码模块化，减少代码冗余度。代码语义化。

seo工具

百度统计，可查看流量，用户通过搜索什么词进入网站，搜索词排名等等。

爱站网 www.aizhan.com 用户查看流量以及网站的运营状况。

http://link.chinaz.com/  友情链接监测工具可以用下。

进度：css任务14

任务开始时间：2018.6.20

预计demo时间：2018.6.23

是否有延期风险：无

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