『壹』 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 這類庫，但我們慢慢就會越來越重視它們，越來越使用它們，越來越領會到它們！！
非同步，以上。