HTML5高級工程師實現Flex彈性布局前端js教程未刪減版

性盒布局模型（Flexible Box Layout）是 CSS3 規范中提出的一種新的布局方式。該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。這種布局方式在條目尺寸未知或動態時也能工作。這種布局方式己經被主流瀏覽器所支持，可以在 Web 應用開發中使用。

display:flex 設置窯器具有彈性特性

任何一個容器都可以指定為Flex布局。

Webkit內核的瀏覽器，必須加上-webkit前綴。

采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。

示例

div{

display: -webkit-flex;

display: flex;

}

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross

size

flex-direction屬性決定主軸的方向

?flex-direction: row 水平排列

?flex-direction: row-reverse 水平反轉排列

?flex-direction: column 垂直排列

?flex-direction: column-reverse 垂直反轉排列

示例

?div{

?display: -webkit-flex;

?display: flex;

?border:solid 1px #000;

?flex-direction:column-reverse;

flex-wrap 如果排不下，如何換行

?flex-wrap: nowrap 不換行（默認）

?flex-wrap: wrap 換行，第一行在上方

?flex-wrap: wrap-reverse 換行，第一行在下方

nowrap（默認）：不換行

wrap：換行，第一行在上方

nowrap（默認）：不換行

示例

?div{

?display: -webkit-flex;

?display: flex;

?border:solid 1px #000;

?flex-direction:column-reverse;

justify-content屬性定義了項目在主軸上的對齊方式

?justify-content: flex-start 左對齊（默認）

?justify-content: flex-end 右對齊

?justify-content: center 居中對齊

?justify-content: space-between 兩端對齊

?justify-content: space-around 每個項目兩側的間隔相等。

align-items屬性定義項目在交叉軸上如何對齊

?align-items: flex-start 頂端對齊

?align-items: flex-end 底部對齊

?align-items: center 中間對齊

?align-items: stretch 項目未設置高度或設為

auto，將占滿整個容器的高度（默認）

align-content屬性定義了多根軸線的對齊方式

? 如果項目只有一根軸線，該屬性不起作用

語法

?align-content:flex-start 頂部對齊

?align-content:flex-end 底部對齊

?align-content: center 中間對齊

? space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布

?space-around 每根軸線兩側的間隔都相等。stretch 軸線占滿整個交叉軸（默認值）

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

語法

?section {

?order:0;

flex-grow屬性定義項目的放大比例

? 如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍

? 默認為0，即如果存在剩余空間，也不放大

語法

?section {

?flex-grow: 2;

flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小

? 如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小

? 如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小

? 負值對該屬性無效

align-self屬性允許單個項目有與真他項目不一樣的對齊方式，可覆蓋align-items屬性

?align-self: flex-start 頂端對齊

?align-self: flex-end 底部對齊

?align-self: center 中間對齊

? align-self: stretch 項目未設置高度或設為auto，將占滿整個容器的高度（默認）

本文章視頻鏈接地址：http://blog.sina.com.cn/s/blog_1671244030102wxpm.html

更多精彩內容請關注 ---- 微信公眾號：houdunit

看完不要跑記得出來吐吐槽！╰(￣▽￣)╮

者 | 六小登登

責編 | 屠敏

從 2013 年專科畢業開始，一路跌跌撞撞走了很多彎路，做過餐廳服務員，進過工廠干過流水線，做過客服，干過電話銷售可以說經歷相當的“豐富”。

最后的機緣巧合下，走上了前端開發之路，作為一個非計算機專業且低學歷的人來說，自學編程其實不是件容易的事情，不過慶幸的是自己堅持下來了。

目前工作還算不錯，收入在目前所在的城市不算高，不算低，生活也還過得去，繼續加油努力，也希望自己在今后更上一層。

從 2016 年下半年開始，我真正接觸前端，到現在 2 年多的時間。開始之初，我沒有任何的語言基礎，完全從零的小白開始，就連「對象」我都弄不明白，更別說那些高深莫測的什么封裝、繼承、多態等。

當時自己也不知從何入手，怎么辦呢？于是每當自己遇到困難時，就厚著臉皮去請教前輩大牛，然后就是去查閱資料，很多時候自己也很覺得不好意思，現在才發現人很多時候都恥于相別人請教，怕自己丟面子。

但作為一個過來人，我要告訴你請教前輩大牛真的很重要，可以讓你少走很多的彎路，不要怕丟人，沒面子，面子值幾個錢？學到真本事才最重要。沒有技能才叫真的沒有面子。當然了我們在請教別人時，一定要掌握「度」，不要打擾到了別人的工作。

我現在非常感謝前輩們的賜教，也感謝那些在網上寫博客、文章分享的大牛們，給了我們這些自學的小白很多的資料，經驗，心得。從中受益很多。

向優秀的前輩們學習，我開始寫博客，希望也能幫到和我一樣，學渣、從零開始、喜歡技術的一群志同道合的人。

我深知自己的技術并不高，還處在繼續學習的路上，離大牛還差的很遠，我本身也非常敬畏技術，也知道自己的渺小，只希望這篇文章的「學習之路」對于那些「從零開始」學習前端的同學有一些指引作用，不像自己一開始那樣的那么盲目，哪怕對你有一點點的幫助，就足夠了。

說了這么多，下面我們直接進入正題，都是我平時學習和收集的一些資料希望能夠幫到你。

前言

首先我得告訴你，自學是件很苦的事情，學習本身就是件反人性的過程，更何況在一個從零開始的全新領域獨自奮斗，這里不是要打擊你，而是要你認真想好，結合自身的環境、條件。不然半途而廢浪費的不僅是時間，還有精力、金錢。
如果你已經想好決定去做，那就不要猶豫，堅持下去你就可以成功，像我這樣的學渣都可以，你沒有什么不可以的，一定要相信自己。
興趣是最好的老師，很多人對這句話非常反感，被生活所迫，談興趣不可笑嗎？其實不是，問問自己對技術有沒有興趣，做自己喜歡和感興趣的事情才能夠走的更遠和更久，很多人不理解這一點，總有一天你會明白的，我當時轉前端的時候也是因為自己挺喜歡，而且最接近用戶，都是所見所得的東西很好玩，另外一方面也覺得工資也挺高，所以自己打心里覺得做前端挺好。
做好持續學習，時刻保持學習的心態，說實話現在社會，科技的發展非常之快，技術的更新更是如此，如果你覺得學習一門技術就可以吃到老，我勸你還是打住，可能考個公務員更適合你（不要杠精，我并不是說公務員不要學習，自己體會就好）。
永遠不要覺得遲，只要行動然后堅持下去，你就干掉了 80% 的人，自學的人很多，但是堅持下來的沒有幾個。就像郭德綱說過，不是我的相聲說的多好而是我活了下來。著名營銷人員「小馬宋」畢業時燒了很多年的鍋爐，但是自己對廣告營銷感興趣，所以離職從零開始，現在已經是很有名的營銷大師。
與其把時間花在學與不學的糾結上，不如把這個時間放在行動上，如果發現自己不合適也堅持不下去，那就換個賽道，專注的去做一件事情，會提高你的成功概率。

工具篇

工欲善其事，必先利其器，所以在開始之前選擇一個合適好用的編輯器是很重要的，工具不再多，在于好用就行，除了編輯器，我們也要掌握其他的一些工具，才能夠讓我們在學習的道路上更加的順暢。

1. WebStorm

不必多說，前端最強大的編輯器，特別是那無敵的智能提示，但是它的缺點在于如果項目多于大時，出現的卡頓讓很多人苦惱。

WebStorm 官網下載地址：https://www.jetbrains.com/webstorm/。
WebStorm 有哪些過人之處？（https://www.zhihu.com/question/20936155）
激活 WebStorm2018（https://blog.csdn.net/qq_32135281/article/details/82696280）

2. Visual Studio Code

微軟開源免費產品，受到非常多技術人員的喜愛，基本上成為前端開發者的必備編輯器，強大的插件擴展，可以靈活的打造自己喜歡的風格。給你們送上常用插件列表拿走不謝。

Visual Studio Code 官網下載地址：https://code.visualstudio.com/。
VSCode 拓展推薦：https://github.com/varHarrie/varharrie.github.io/issues/10
使用頂級 VSCode 擴展來加快開發 JavaScript：https://www.html.cn/archives/9507
vscode 插件推薦：https://segmentfault.com/a/1190000006697219

3. atom

也是一款免費開源的編輯器，受到很多人的喜愛，但是我本人用的較少，所以插件方面就不推薦了，大家可以按照自己的愛好去尋找。

4. 科學上網

每個程序員都應該具備的工具和能力，否則很多事情都無法辦到，至于怎么做，你可以自己查閱資料，這里不就不在多說了。而且下面推薦的很多資源都是需要科學上網之后才能訪問，所以一定要學會。

5. Google

在使用「Google」之前必須學會科學上網，不然無法訪問，學會使用搜索可以幫助我們解決很多問題，一個人的知識是有限的，掌握了搜索的技巧才能以不變應萬變，很多時候百度出來的東西重復性很大，最重要的是垃圾信息很多，在百度找不到的答案，在這里很容易找到，Google 是我的必備搜索。

6. Github

全球最大的「同性」開源交流社區，沒有賬號的趕緊注冊，在這有很多優秀的資源項目，各種大神。觀摩優秀代碼是我們學習的很好路徑。另外在開發過程中，很多時候任務重、時間緊，應該避免重復造輪子，這里能夠找到你需要的工具或代碼。

7. Stack Overflow

國外著名的技術問答交流社區，開發時碰到的很多問題在這里都能找到答案。

8. SegmentFault

對應的國內版的技術問答交流社區，如果你英文不好，也可以在這里找找答案。

9. Markdown

Markdown 輕量級標記語言，簡潔的語法，讓作者專注內容而非復雜的格式要求，我認為人人都應該掌握，特別是經常寫博客的人。想想你在用 world 時的場景，每次寫完文章之后，不得不話費很多時間進行格式的排版，使用它你就可以避免這些煩惱。

Markdown 中文文檔：https://markdown-zh.readthedocs.io/en/latest/

HTML 篇

一些準備就緒之后，開始我們的學習之旅，首先我們先從 HTML 開始。

HTML名為「超文本標記語言」，是整個頁面的結構基礎，它承載了我們的頁面內容。

1. 基礎

w3school 在線教程（http://www.w3school.com.cn/h.asp）：內容非常的基礎，適合小白學習，對 HTML 有一個入門了解。
freeCodeCamp（https://www.freecodecamp.cn/）：一個非常好的入門學習網站，采用闖關的模式，就像游戲打怪升級一樣，非常的有樂趣，準備自學的小伙伴不妨試試。

2. 進階

MDN HTML（https://developer.mozilla.org/zh-CN/docs/Web/HTML）：這里的內容質量更好，錯誤更少，內容也更加的全面。
HTML 和 CSS 編碼規范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質量的代碼。

CSS 篇

HTML 承載了頁面的內容，但是有時候會略顯單調與「丑陋」，CSS 的作用就是為這些內容加上樣式，就像一個美女也要有漂亮的外衣去修飾才會更加漂亮，「人靠衣裝馬靠鞍」，網頁的內容也是需要穿上一件漂亮的外衣去吸引用戶。而 CSS 則完成了這個裝飾。

1. 基礎

學習 CSS 布局（http://zh.learnlayout.com/）：帶你一步一步的完成 CSS 的學習。
CSS 參考手冊（https://css.doyoe.com/）：對CSS可以有一個全面入門的學習。
w3school CSS 參考手冊（http://www.w3school.com.cn/cssref/index.asp）：同上也是非常基礎的知識，適合入門。

2. 進階

書籍：

《CSS揭秘》（https://book.douban.com/subject/26745943/）：非常推薦的一本 CSS 書籍，可以學到很多鮮為人知的技巧。

在線系列：

MDN CSS（https://developer.mozilla.org/zh-CN/docs/Web/CSS）：和 HTML 都是 MDN 社區文檔，質量保障。
HTML和CSS編碼規范（https://codeguide.bootcss.com/）：掌握一些代碼技巧，寫出更好，更高質量的代碼。
大漠老師的CSS系列（https://www.w3cplus.com/CSS3）：大漠老師對CSS有非常深入的認識和豐富的實踐經驗，《圖解CSS3：核心技術與案例實戰》的作者。
大漠老師的SASS系列（https://www.w3cplus.com/blog/tags/302.html）：大漠老師的 sass 文章系列。
SASS中文網（https://www.sasscss.com/）：成熟、穩定、強大的 CSS 擴展語言解析器，它可以讓你使用變量，條件語句等書寫 CSS。
Stylus官網（https://stylus.bootcss.com/）：同樣是 CSS 預編譯器，但它省去了一些符號，讓 CSS 寫起來更加的簡潔，清爽。
HTML5和CSS3（https://github.com/qianguyihao/Web/tree/master/07-HTML5%E5%92%8CCSS3）：詳解HTML5 和 CSS3。

知識點：

別說你懂CSS相對單位（http://wuyuying.com/blog/archives/css-in-depth-relative-units/）：深入了解 CSS 的相對單位rem，em區別。
CSS 進階內容（https://github.com/coconilu/Blog/issues/29）：常見知識點的深入了解。
Flex 布局教程：語法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）：阮一峰老師的flex講解。
Flex 布局教程：實例篇（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）：阮一峰老師的flex講解。
“CSS相關”目錄存檔（https://www.zhangxinxu.com/wordpress/category/css/）：張鑫旭大佬的CSS系列文章，深入淺出，《CSS世界》作者。
CSS繪制的40種形狀和圖形（http://www.open-open.com/lib/view/open1476240478941.html）：利用CSS繪制出的40各種圖形形狀。
CSS-大前端（http://www.daqianduan.com/tag/css）：一些 CSS 的知識點。

JavaScript 篇

有了 HTML 與 CSS，網頁也就有了內容和樣式，但是會缺少與用戶的互動，所有的內容都靜靜的躺在那里死氣沉沉。就好比一個美女穿著漂亮的衣服在你面前一動不動好像也沒有什么吸引力，但如果又唱歌，又跳舞，還向你拋媚眼，那可真就把持不住了。JavaScript 就是給網頁添加這樣的「行為」。

Javascript 簡史（https://blog.csdn.net/qq_32135281/article/details/81667714）：可以簡單了解下，JavaScript 發展由來。

1. 基礎

書籍

《JavaScript權威指南（第6版）》（https://book.douban.com/subject/10549733/）：俗稱「犀牛書」，JS 的經典之作，提升JS技能的必備書籍，我的JS基礎知識全都是啃這本書啃下來的，剛開始讀時可能有會有些吃力，但是只要堅持下來收獲滿滿。
《JavaScript高級程序設計（第3版）》（https://book.douban.com/subject/10546125/）：俗稱「紅寶書」，JavaScript 超級暢銷書，全書闡述了JavaScript語言實現的各個組成部分，ECMAScript，DOM，BOM，事件，面向對象等等，隨時拿出來翻翻，更加深入了學習 JS。

在線系列

除了書籍之外，也有很多優秀的在線教程，可以幫助我們更好的學習。

現代 Javascript 教程（https://zh.javascript.info/）：非常全面的JavaScript 學習教程，從基礎到高階，非常詳細，相信你會愛上它的。
廖雪峰的JavaScript教程（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）：廖雪峰系列教程。
JavaScript 標準參考教程（alpha）（https://javascript.ruanyifeng.com/）：阮一峰老師的系列教程，通俗易懂，案例豐富。

2. 進階

JavaScript語言精粹（https://github.com/qibaoguang/Study-Step-by-Step/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/javascript_the_good_parts.md）：揭示JavaScript中的精華。
JavaScript 秘密花園（http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts）：對 JS 一些的核心知識點進行梳理講解，例如：this，閉包/作用域，構造函數，原型等等，都是面試必考知識點。
ECMAScript 6 入門（http://es6.ruanyifeng.com/）：阮一峰老師ES6入門書籍，全面介紹 ECMAScript 6 新引入的語法特性。
JavaScript使用技巧（http://www.jstips.co/zh_CN/）：可以認識到一些你平時沒有接觸過的小技巧。
深入理解javascript原型和閉包系列（http://www.cnblogs.com/wangfupeng1988/p/4001284.html）：詳細解釋了原型和閉包，看完之后對原型與閉包讓你徹底明白。
大漠老師的JavaScript系列（https://www.w3cplus.com/JavaScript）：大漠老師的JavaScript系列文章。
JavaScript 算法與數據結構（https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md）：基于 JavaScript 的算法與數據結構，讓你愉快的學習。
JavaScript中的正則表達式（https://blog.csdn.net/qq_32135281/article/details/78274563）：我自己的一篇正則表達式的文章，希望對你有幫助。
30分鐘掌握ES6/ES2015核心內容（上）（https://segmentfault.com/a/1190000004365693）
30分鐘掌握ES6/ES2015核心內容（下）（https://segmentfault.com/a/1190000004368132）：闡述了一些常用的ES6的知識點。
學用 JavaScript 設計模式（https://www.oschina.net/translate/learning-javascript-design-patterns）：闡述JavaScript編程語言中經典和現代的設計模式。
你不懂JS（系列叢書）（https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN）
InterviewMap（https://yuchengkai.cn/docs/frontend/#%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B）：聚集了很多知識點，包括JS，瀏覽器，性能等。
30 秒就能理解的 JavaScript 代碼片段（https://www.html.cn/30-seconds-of-code/）：讓你更好的理解一些有用的JS代碼片段。

TypeScript篇

ES6 的超集擴展，嚴格的數據類型，帶來更好的維護，適合大型項目的開發工作，有人說它是未來的發展趨勢，你說要不要了解？

TypeScript 中文手冊（https://typescript.bootcss.com/）：官網翻譯版。
TypeScript Handbook（中文版）（https://zhongsp.gitbooks.io/typescript-handbook/content/）：中文版。
RxJS 中文文檔（https://cn.rx.js.org/）：中文官網。
30 天精通 RxJS (01)：認識 RxJS（https://ithelp.ithome.com.tw/articles/10186104）：繁體字可能閱讀起來并沒有那么順暢。

Jquery篇

雖說現在已經是單頁面應用時代，有React，Vue 這種強大的框架可以使用，但也不缺乏一些老的項目需要維護，而且在學習之初，可以用它做兩個簡單的應用還是不錯的，可以相對了解下基本用法，它可以讓你更好，更方便的操作DOM。但不建議再深度學習。

《鋒利的jQuery(第2版)》（https://book.douban.com/subject/10792216/）：一本很不錯的 Jquery 學習書籍。
jQuery API中文文檔（https://www.jquery123.com/）：JQuery 中文教程。

Ajax篇

掌握了的HTML、CSS、JavaScript時，這時候可以嘗試自己做一些項目了，而項目中肯定會有數據的交互，這時候就是 Ajax 的用武之地了。

廖雪峰AJAX（https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000）：廖雪峰大佬的博客知識。
XMLHttpRequest 對象（https://wangdoc.com/javascript/bom/xmlhttprequest.html）：阮一峰老師的AJAX詳解。
JSON風格指南（https://github.com/liuxiaodeng/free-programming-books/blob/master/free-programming-books-zh.md#javascript）：前后端的交互數據通常都是 JSON 格式，所以了解 JSON 是必要的。

NodeJS與模塊化

NodeJs 的出現讓前端發展進入了一個新的領域，并且滋生出專業的 Node 工程師，不僅如此 Node 在前端模塊化，工程化起到很重要的作用，所以了解是必須的，如果感興趣的可以深入學習，可以向全棧工程師發展。

Javascript模塊化編程（一）（http://www.ruanyifeng.com/blog/2012/10/javascript_module.html）：模塊的寫法
Javascript模塊化編程（二）：AMD規范
Javascript模塊化編程（三）：require.js的用法
前端模塊化開發那點歷史（https://github.com/seajs/seajs/issues/588）：了解下，前端模塊化的發展。
Node.js 官方（https://nodejs.org/zh-cn/）
狼叔：如何正確的學習Node.js（https://github.com/i5ting/How-to-learn-node-correctly）：狼叔江湖地位頗高，《更了不起的 Node.js》的作者。
全棧工程師之路-Node.js（http://i5ting.github.io/nodejs-fullstack/）

框架篇

隨著日益復雜的用戶需求，與系統的復雜度上升，傳統的開發模式日漸的很難滿足，此時的三大框架孕育而生，讓開發者更加高效，可復用，把關注點都放在數據層的操作，免去那些繁瑣而又重復的視圖操作。

現在框架的能力已經是前端開發人員必備的技能之一也是趨勢，三大框架的「最終目的」都是一致的，我認為開發者不必糾結于到底應該選擇哪一個學習，可以選擇其中的兩個是最好的。對于剛入門的人來說，建議選擇 Vue 入手，比較簡單，靈活。

MVC，MVP 和 MVVM 的圖示（http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html）：在學習框架之前，你應該了解下MVVM的設計思想。
框架原理（https://yuchengkai.cn/docs/frontend/framework.html）：了解一些框架的基本原理。

1. Angular

Angular（https://angular.cn/）：Angular官方社區。
Angular開發者（http://www.ngfans.net/）：大漠窮秋老師維護的站點，Angular中國布道者。
NG-ZORRO（https://ng.ant.design/docs/introduce/zh#%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83）：Angular UI 組件庫，阿里巴巴出品。

2. Vue

Vue（https://cn.vuejs.org/index.html）：官網，最好的學習資料。
我的Vue進階之路（https://blog.csdn.net/qq_32135281/column/info/29689）
使用vue全家桶制作博客網站（https://www.cnblogs.com/xiaohuochai/p/9228543.html）
Element（http://element-cn.eleme.io/#/zh-CN）：一個高質量的 Vue UI 組件庫。餓了么前端團隊出品。
Vue 項目里戳中你痛點的問題及解決辦法（更新）（https://juejin.im/post/5b174de8f265da6e410e0b4e）：做項目難免回去到坑，這里你或許可以找到答案。

3. React

React我了解不多，所以就沒什么好推薦的了，大家可自行學習。

React官網（https://www.reactjscn.com/）

圖形可視化

隨著日益增長的數據，如何利用高效的利用數據，是每個企業都考慮的問題，而人的眼睛看到的東西要勝過閱讀的問題，俗話說「一圖勝千言」就是這個道理，所以數據的可視化就會格外的重要，以下都是我常看的一些技術，書籍，和關注的可視化開源庫。

《HTML5 Canvas核心技術》（https://book.douban.com/subject/24533314/）：學習 Canvas 比較好的一本書籍。
Canvas系列（https://www.w3cplus.com/search/node/canvas）：大漠老師的 Canvas 系列。
Echarts（https://www.echartsjs.com/index.html）
D3（https://d3js.org/）
Highcharts（https://www.highcharts.com.cn/）
AntV（https://antv.alipay.com/zh-cn/index.html）
Mapv（https://mapv.baidu.com/）

工程化與版本控制篇

1. Git

版本控制工具，很多新手往往把 git 與 github 傻傻分不清楚，二者是不同的東西，一定要去區分清楚。

Git教程（https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000）：廖雪峰老師的教程。
Learn Git Branching（https://learngitbranching.js.org/）：一種有趣的學習 Git 的方式。
GitHub 漫游指南（https://github.com/phodal/github）：作者是一個極客。
git - 簡易指南：http://www.bootcss.com/p/git-guide/

2. Gulp

自動化構建工具，項目打包部署前的壓縮合并，節省時間，提高開發效率。

Gulp 中文網（https://www.gulpjs.com.cn/）：官方教程。
gulp詳細入門教程（http://www.ydcss.com/archives/18）：非常詳細的實現步驟。

3. Webpack

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。

Webpack中文文檔：https://www.webpackjs.com/
webpack原理：https://juejin.im/entry/5b0e3eba5188251534379615
Webpack揭秘——走向高階前端的必經之路：https://juejin.im/post/5badd0c5e51d450e4437f07a
Webpack HMR 原理解析：https://zhuanlan.zhihu.com/p/30669007
webpack 熱加載原理探索：http://shepherdwind.com/2017/02/07/webpack-hmr-principle/

4. Babel

JavaScript代碼編譯器，可以讓ES6及以上語法轉換成瀏覽器支持的語法，一般會在框架的腳手架中自行配置。

Babel（https://babel.bootcss.com/）：官網教程。

5. 代碼質量

ESLint（https://eslint.bootcss.com/）：javascript代碼檢測工具幫助我們寫出更規范的代碼。

瀏覽器與HTTP

瀏覽器的常見知識點（https://yuchengkai.cn/docs/frontend/browser.html）：需要我們了解的常見知識。
網站安全（https://yuchengkai.cn/docs/frontend/safety.html）：幾種常見安全問題。
同源限制（https://wangdoc.com/javascript/bom/same-origin.html）
從URL輸入到頁面展現到底發生什么？（https://github.com/ljianshu/Blog/issues/24）
深入理解瀏覽器的緩存機制（https://github.com/ljianshu/Blog/issues/23）
網頁性能管理詳解（http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html）
關于Http協議，你必須要知道的（https://github.com/ljianshu/Blog/issues/22）
HTTP 協議（https://github.com/coconilu/Blog/issues/135）
HTTP2 協議（https://github.com/coconilu/Blog/issues/134）
瀏覽器同源政策及其規避方法（http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html）
跨域資源共享 CORS 詳解（http://www.ruanyifeng.com/blog/2016/04/cors.html）
總結 XSS 與 CSRF 兩種跨站攻擊（https://segmentfault.com/a/1190000004623125）

性能優化

性能優化（https://yuchengkai.cn/docs/frontend/performance.html）：常見性能優化。
前端性能優化的七大手段（https://www.cnblogs.com/xiaohuochai/p/9178390.html）
延遲加載(Lazyload)三種實現方式（https://zhuanlan.zhihu.com/p/25455672）
詳解懶加載和預加載（https://www.geekjc.com/post/58d94d0f16a3655650d6fafe）
前端優化帶來的思考，淺談前端工程化（http://www.cnblogs.com/yexiaochai/p/4901341.html）
推薦幾本與Web性能優化有關的書籍（https://w3ctech.com/topic/108）
vue + webpack 前端性能優化（https://juejin.im/post/5bc5c106e51d450e7a253e1b）

SEO

SEO優化實戰（https://imweb.io/topic/5682938b57d7a6c47914fc00）

博客系列

1. 個人

現在是一個信息爆炸的時代，網上有很多優秀的博客文章，每個人的精力都是有限的，不可能關注到所有的博客，每個人關注點可能不太一樣，所以關注的個人博客也會不同，這些推薦幾個我比較常看的幾個高質量博客。而且是持續更新的。

阮一峰的個人網站（http://www.ruanyifeng.com/home.html）：阮一峰老師江湖地位不必多說，博客不止有技術，現在阿里任職。
廖雪峰的官方網站（https://www.liaoxuefeng.com/）：廖雪峰老師寫過很多優秀的系列教程，值得去學習。
張鑫旭（https://www.zhangxinxu.com/）：專注前端技術的大牛之一，出版《css世界》一書。
W3cplus（https://www.w3cplus.com/）：大漠老師在手淘任職，CSS，HTML 有著豐富的經驗。
前端入門和進階學習筆記（https://github.com/qianguyihao/Web）：從零開始自學，然后進入京東，記錄作者一路走來的學習筆記。
六小登登（https://blog.csdn.net/qq_32135281）：我自己的個人博客，記錄自己的一些學習總結，個人成長，認識思維，雖然自己還是個菜鳥，但一直在路上。

2. 團隊

奇舞周刊（https://weekly.75team.com/）：收集每周前端精華文章。
美團技術團隊（https://tech.meituan.com/）：分享一些美團的技術路線。
JavaScript Weekly（https://javascriptweekly.com/）：每周都會分享一些 JavaScript 優質內容。
印記中文周刊（https://weekly.docschina.org/）：如果你對英文有閱讀障礙的話，印記幫你翻譯。
凹凸實驗室（https://aotu.io/index.html）：京東團隊。
淘寶前端團隊FED（http://taobaofed.org/）：淘寶前端團隊，不必多說了。
網易FEG前端團隊（http://feg.netease.com/）：網易的前端團隊，網易的產品一直都是我最喜歡的。
IMWeb前端博客（https://www.imweb.io/）：騰訊公司前端團隊，負責QQ的相關業務你就知道了，都是億級別。
tutorialzine（https://tutorialzine.com/）：高質量教程和文章庫。

項目資源

前端技能匯總（http://html5ify.com/fks/）：一個前端工程師需要的技能點和學習資料。
You-need-to-know-css（https://lhammer.cn/You-need-to-know-css/#/）：一個CSS的優質項目，純 CSS 實現我們項目中很多常用，不常用的樣式。
JavaScript libraries（https://www.javascripting.com/）：一些優秀的JavaScript 開源庫。
awesome-web-dev-books（https://github.com/jobbole/awesome-web-dev-books）：前端經典學習書單。
前端 TOP 100（https://www.awesomes.cn/rank）：基本涵蓋了所有前端在用的開源項目，我覺得收藏這一個就夠了。

常用工具

CSS Sprites Generator（https://www.toptal.com/developers/css/sprite-generator）：雪碧圖的在線制作工具。
Lorem Picsum（https://picsum.photos/）：好用的圖片臨時占位符。
Md2All（http://md.aclickall.com/）：優秀的現在 Markdown 編輯器。
優波設計（https://ubuuk.com/）：優秀的設計導航網站，幫助你更好的尋找資料。
搬書匠（http://www.banshujiang.cn/）：書籍搜索下載。
史萊姆導航（http://www.slimegps.cn/）：資源搜索。
codePen（https://codepen.io/）：在線代碼編輯工具。
Iconfont（https://www.iconfont.cn/）：阿里的字體圖標庫，支持多種格式，下載圖片，在線使用，SVG等等。
Can I use（https://www.caniuse.com/）：可以查看瀏覽器兼容 CSS 情況。
在線工具（https://tool.lu/）：工具資源導航。

最后

以上是我這兩年多一路走來收藏的一些資料，整理這份資料也花了我好幾天的時間，希望能夠在自學的道路上幫到你。

再次聲明，我并不是什么大神，我自認為技術也沒有到達這個層級，但是我會一直堅持學下去，另外一定不要誤會這里面的知識我全部都會，這些都是我學習的一些資料想整理出來，免去小白的一些不知道如何查閱資料。

這里的資源可能并不適合每一個人，你也不一定全部都需要，只需要挑選自己想要的部分就行，任何事情并不是越多越好。

作者：六小登登，個人公眾號：六小登登（ID：liuxiaodengdeng）。目前在某創業公司任職前端開發工作，近 3 年前端開發經驗，愛技術、愛寫作、愛分享。
聲明：本文為作者投稿，版權歸其個人所有。

tml:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登錄界面</title>
    <link href="../css/20240401.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form action="#">
            <h1>Login</h1>
            <div class="input-box">
                <input type="text"  placeholder="username" required/>
            </div>
            <div class="input-box">
                <input type="password"  placeholder="password" required/>
            </div>

            <div class="remember-forgot">
                <label>
                    <input type="checkbox"/> Remember me</label>
                    <a href="#">Forgot password?</a>
            </div>

            <button type="submit" class="btn">Log in</button>

            <div class="register-link">
                <p>Don't have an account? <a href="#">Register Here!</a></p>
            </div>

        </form>
    </div>
</body>
</html>

Css:

@import url(https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Pooppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url(../html/image/20240401/login_bg.jpg);
    background-size: cover;
}

.container{
    width: 420px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    color: #1d6272;
    border-radius: 10px;
    padding: 30px 40px;
    backdrop-filter: blur(18px);

}

.container h1{
    font-size: 36px;
    text-align: center;
}

.container .input-box {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0px;

}

.input-box input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    padding: 20px 45px 20px 20px;

}

.input-box input::placeholder{
    color: #fff;
}

.container .remember-forgot{
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    margin: -15px 0px 15px;
}

.remember-forgot label input{
    color: #1d6272;
    margin-right: 3px;
}

.remember-forgot a {
    color: #1d6272;
    text-decoration: none;

}

.remember-forgot a:hover{
    text-decoration: underline;
}

.container .btn{
    width: 100%;
    height: 45px;
    background: #1d6272;
    border: none;
    outline: none;
    border-radius: 5px;
    box-decoration-break: 0px 0px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.container .register-link{
    font-size: 14.5px;
    text-align: center;
    margin: 20px 0px 20px;
}

.register-link p a {
    color: #1d6272;
    text-decoration: none;
}

.register-link p a:hover{
    text-decoration: underline;
}

效果：

在線咨詢

上一篇：HTML 圖像
下一篇：HTML字間距如何設置？#html

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5高級工程師實現Flex彈性布局前端js教程未刪減版

您的項目需求