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进行需求实现。
发表于： 2018-08-02 20:59:40
1 615
今天完成的事情：提交了任务十四任务十五，然后写了任务十四任务十五的深度思考，还有任务总结。
明天计划的事情：明天准备js
遇到的问题：第三个页面hover的动画效果会被其他样式盖住，后来使用了display: table;解决问题，原来用的overflow: hidden;清除浮动，但是动画效果会被其他样式盖住。
收获：display:table=>相当于“table”标签；
display:table-row=>相当于“tr”标签；
display:table-cell=>相当于“td”标签；
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符
深度思考：1.为什么要做组件库？;
为什么要做组件库
传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
针对此弊端，其实业界早就有了一些探索，我们希望一个大且复杂的场景能够被分解成几个小的部分，这些小的部分彼此之间互不干扰，可以单独开发，单独维护，而且他们之间可以随意的进行组合。就拿电脑主机来说，一台整机包括CPU，主板，内存，硬盘等等，而这些部件其实都是由不同的公司进行生产的，他们彼此之间根据一套标准分别生产，最后组装在一起。当某个部件出现问题时，不需要将整台主机都进行维修，只需要将坏的部件拿下来，维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务，而在前端开发中的体现就是组件化。
组件化的意义
为前端提供了很好的分治策略，可以实现独立维护，可维护性强
组件具有独立性，组件之间可以自由组合
页面只不过是组件的容器，负责组合组件即可形成功能完整的界面
组件开发的原则
标准性
任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
组合性
组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
重用性
任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
可维护性
任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。
1.目前流行的组件库有哪些？css，js各有哪些流行的库？
库：库是有用功能的有组织的集合。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，库在查询中需要的功能在自己的应用中使用，我们可以从封装的角度理解库。
框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发框架。是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。通常框架提供事件。 存储和数据绑定等功能。
最流行的当属jQuery， 这货是用来做HTML元素选择操作、css和动画、事件绑定、ajax封装等所有网页基本业务的，其中很多设计特点，和方法名称，都被业内完全认可的，跟jQuery类似的库有很多：prototype，mootools，国内也有很多公司做了自己的类似的库。
由于IE8以下浏览器不能兼容ES5的一些数组对象操作的方法，underscore.js 做了这些常用方法的兼容，并且扩展了大量的常用数据操作方法。 数据过滤、分组、选择、循环等等。
模块化的库： 实在是多的数不胜数，最流行的当属requireJs和seaJs，比较纯粹的模块化库，此外，BAT以及其他顶级的(不顶级的)互联网公司几乎只有有一个技术能力不错的前端架构，都会有自己的库，百度的最出名的是esl，腾讯的JX，阿里系的seaJS和KISSY，等。
还有一些专做图表制作的，比如业内最出名的矢量图库highcharts，百度的canvas图库echarts等。
js进行复杂的HTML拼装的时候。可能需要使用js模板引擎，这样的库也是数不胜数，handlebars，Mustache，jade等
随着前端 MV* 流行，这样的框架也是多不胜数： 以前的backbone、canjs，现在的新贵angular等
2.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
浏览器默认边距不同
由于不同浏览器的很多标签的默认间距是有差别的，所以样式重置就显得尤为重要， 否则网页很容易在不同浏览器上出现较大差异甚至是不能使用
MARGIN加倍问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug
直接使用通配符来将自带的margin和padding初始值设为0 *{margin:0;padding:0;}
在这个div里面加上display:inline
3.Quirks模式是什么？它和Standards模式有什么区别？
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
4.渐进增强和优雅降级之间有什么不同?
渐进增强和优雅降级是在CSS3出现之后才火起来的。由于低级浏览器，（特）比（别）如（是）IE6等，不支持CSS3的浏览器，但是CSS3的样式又特别优秀不忍放弃 ，所以在高级浏览器中应用CSS3样式，在低级浏览器只保证基本功能。
“渐进增强”是被Steven Champeon创造于2003年3月11日在奥斯汀的SXSW互动大会，并于2003年3月和6月间通过一系列Webmonkey教程文章的公布。，谷歌公司是很支持这种开发方式的啊，渐进增强不仅是一个前端开发思想，更加是一个程序开发思想。
5.HTML5的离线储存怎么使用？
7.知道css有个content属性吗？有什么作用？有什么应用？
content的意思顾名思义，是“内容”，它的作用就是在css中直接生成网页显示的 内容， 这个属性要结合：before和：after这俩个伪类属性来使用。
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。
10.描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？
Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。
任务总结：
任务总结：https://wjxhd.github.io/task/html/task14-1.html
任务耗时4天，超出预期一天，超出一天是因为，1号上午请假了，然后就超出预期了。
脑图：
任务十四十五的难点不是很多，就一个轮播图，然后导航栏。导航栏，任务十三的时候也有写过，没有太多坑，
然后实现栅格系统的话，重点就是一个媒体查询，
需要注意的地方是radio和select样式怎么改变，单选一次只能一个选项，radio样式的改变需要用到input和label标
签关联，通过改变label的样式，点击label通过~选择器关联到radio，显示出改变后的样式。
返回列表
评论