‘壹’ 2019-05-31（前端第六节知识点）表格、元素的层级、背景
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示
设置元素的透明背景
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试
使用background-image来设置背景图片
语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的兆唯位置
可选值察液：
该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
但是我们的外族没培部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
我们这个练习，一上来浏览器只会加载link.png
由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
当hover被触发时，浏览器才去加载hover.png
当active被触发时，浏览器才去加载active.png
由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几对tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
隔行变色：
tbody > tr.nth-child（even/odd）
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格
‘贰’ 前端具体是做什么
前端具体是制作网页的。
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。
核心技术
HTML、CSS、JavaScript，这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。
虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
‘叁’ Web前端开发工程师需要掌握的6个基本技术
1、学习HTML。这是最简单，最基本的是要掌握div、formtable、Ulli、P、跨度、字体这些标签，这些都是最常用的。
2、学习CSS。CSS这里说的不包括CSS3，Web前端开发工程师里面我们看到的，一个可以使用HTML或CSS + CSS+DIV的界面布局。所以CSS是用来协助HTML布局和显示，我们称之为“CSS样式”。CSS必须掌握浮、位置、宽度和高度，以及最大值和最小值，以100%，溢出，边缘、填充等，这些都是与布局相关的样式。
3、JS。事实上，JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格或价值，然后以一个ID或名称元标签，或额外的数据。在HTML，这是对数据的操作有关系，那么数据逻辑的影响，无非是一个跳跃、弹框、隐藏什么，这一切都是结合其他应用，代码一点都不难，将这些基本的学会，多看一些，都不是什么问题。
4、学习jQuery。相当于封装一组JS插件的JS。其目的是操作更方便，编写更少的代码，jQuery条目也非常简单。
5、最好是知道后台语言。因为我们是前台接口数据，从后台到点，如果你知道如何与后台数据交互是最好的，它节省了时间，也可以使前端代码更加规范。否则，可能因为你无法忍受的数据，造成前端代码再次重写，这将是可怕的。
6、研究CSS3 + HTML5。因为如果你准备成为一名专业的Web前端开发开发工程师，最好是学习。
以上小编分享的6个Web前端开发工程师需要掌握的基本技术。目前Web前端的工作无法被替代，发展趋势可见，客户需求存在，前景巨大的。然而程序员需要不断的自我驱动，才不会被IT行业所淘汰。
‘肆’ 前端主要负责什么工作
一名合格的前端开发工程师，不单单需要掌握前端必须的各种技术，同时还要掌握其它技术，需要掌握一点后台的知识，同时也要对网站构架有一定的了解，这样才可以称之为一个合格的Web前端开发工程师。至于Web前端的薪资情况，需要根据个人能力而定。
如果你想要快速学习Web前端技术，专业全面的学习方式比较好，一般费用在2W左右，4-6个月左右。千锋适合零基础的小白迅速成长，学习曲线先快后慢，也适合有一定基础的学员进阶学习，巩固知识的基础上，稳步进步突破职业瓶颈。
‘伍’ 前端主要学什么
（1） html + css。
（2）JavaScript。不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js。如果没有其他编程语言的基础的话，学起来可能要费些力。
（3）Photoshop、flash。熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行。
（4）html5和css3。可以先了解一下，然后再入手。毕竟IE的浏览器大多还不支持。
（5）浏览器兼容。懂web标准，熟练手写 xhtml css3 并符合 符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。
（6）熟悉一门后台编程语言 asp、php、jsp等
‘陆’ 前端必学-函数式编程（六）
我们前篇谈了很多关于【闭包】的理解了，所以你应该会知道，我们现在将要谈的就是 ——【异步】。
我们为什么觉得“异步问题”复杂呢？
其中很重要的一个原因是 —— 时间！时间将我们对数据的操作、管理，变复杂了好几个量级！
（需要特别提出并明确的是： 异步和同步之间是可以相互转化的！ 我们使用异步或者同步取决于 —— 如何使代码更加可读！）
函数式编程给出了实现“代码更可读”的落地原则（已多次回顾）：
所以我们可以期待，异步在函数式编程中的表现！
上代码：
onCustomer(..) 和 onOrders(..) 是两个【回调函数】释义，两者执行的先后顺序并不能确定，所以它是一个基于时间的复杂状态。
释义：回调函数其实就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。
通常来说，我们最先想到的是：把 lookupOrders(..) 写到 onCustomer(..) 里面，那我们就可以确认 onOrders(..) 会在 onCustomer(..) 之后运行。
这样写，对吗？
不对！因为 onCustomer(..) 、 onOrders(..) 这两个回调函数的关系更像是一种竞争关系（都是赋值 customer.orders ）， 它们应该并行执行 ， 而不是串行执行 。
即：我不管你们谁先执行，谁先执行完，谁就赋值给 customer.orders ！
那我们的思路应该是：
不过，这样让代码又变得更加难阅读！！函数内部赋值依赖于外部变量、甚至受外部回调函数的影响。
那究竟怎么办呢？
最终，我们借用 JS promise 减少这个时间状态，将异步转成同步：
两个 .then(..) 运行之前， lookupCustomer(..) 和 lookupOrders(..) 已被同步调用，满足并行执行，谁先结束，谁赋值给 customer.orders ，所以我们不需要知道谁先谁后！
在这样的实现下，不再需要时间先后的概念！减少了时间状态！！代码的可读性更高了！！
这是一个 积极的数组 ，因为它们同步（即时）地操作着离散的即时值或值的列表/结构上的值。
什么意思？
a 映射到 b，再去修改 a ，b 不会收到影响。
而这，是一个 惰性的数组 ， mapLazy(..) 本质上 “监听” 了数组 a，只要一个新的值添加到数组的末端（push(..)），它都会运行映射函数 v => v * 2 并把改变后的值添加到数组 b 里。
什么意思？
a 映射到 b，再去修改 a ，b 也会修改。
原来，后者存在 异步 的概念。
让我们来想象这样一个数组，它不只是简单地获得值，它还是一个懒惰地接受和响应（也就是“反应”）值的数组，比如：
设置“懒惰的数组” a 的过程是异步的！
b ，是 map 映射后的数组，但更重要的是，b 是 反应性 的，我们对 b 加了一个类似监听器的东西。
这里直接给出解答：
这里再多小结一句：时间让异步更加复杂，函数式编程在异步下的运用就是减少或直接干掉时间状态。
想象下 a 还可以被绑定上一些其他的事件上，比如说用户的鼠标点击事件和键盘按键事件，服务端来的 websocket 消息等。
上述的 LazyArray 又可叫做 observable ！（当然，它不止用在 map 方法中）
现在已经有各种各样的 Observables 的库类，最出名的是 RxJS 和 Most 。
以 RxJS 为例：
不仅如此，RxJS 还定义了超过 100 个可以在有新值添加时才触发的方法。就像数组一样。每个 Observable 的方法都会返回一个新的 Observable，意味着他们是链式的。如果一个方法被调用，则它的返回值应该由输入的 Observable 去返回，然后触发到输出的 Observable里，否则抛弃。
比如：
本篇介绍了【异步】在函数式编程中的表现。
原则是：对于那些异步中有时态的操作，基础的函数式编程原理就是将它们变为无时态的应用。即 减少时间状态 ！
就像 promise 创建了一个单一的未来值，我们可以创建一个积极的列表的值来代替像惰性的observable（事件）流的值。
我们介绍了 RxJS 库，后续我们还会介绍更多优美的 JS 函数式编程库！
（俗话说的好，三方库选的好，下班都很早！！）
现在本瓜有点明白那句话了：看一门语言是不是函数式编程，取决于它的核心库是不是函数式编程。
也许我们还不熟悉像 RxJS 这类库，但我们慢慢就会越来越重视它们，越来越使用它们，越来越领会到它们！！
异步，以上。