小姐姐用 HTML + CSS 畫油畫？誰能想到前端還有這麼一手操做！

GitHub 項目上好項目真的不少，但做者長的這麼漂亮的確定屈指可數了。

用 HTML + CSS 畫油畫

如圖所示，這位小姐姐的名字叫 Diana Smith ，在她的我的博客上介紹本身是一位 JavaScript 開發人員，技能樹包含 React / Vue / Backbone / jQuery ，仍是一位 CSS 專家（LESS 和 SASS 雙修），同時也是一位響應式設計的 UI 工程師。

她在 GitHub 上星數最高的一個項目，是用 HTML/CSS 創做了仿油畫做品。

這吹彈可破的質感、精妙的構圖、強烈又不違和的色彩搭配，不得不說「畫如其人」啊。

並且，這些圖片是隻用 CSS 和 HTML，全部元素都是手動輸入，僅容許使用 Atom 文本編輯器和 Chrome 開發者工具。

說實話，網頁三兄弟 HTML、CSS、JavaScript 你們都不陌生，但誰能想到能玩出這樣的花來呢？

做者小姐姐的我的博客中分享了一篇文章，其中有一個觀點是：「當你只擁有一把 CSS 錘子時，世界就像是 CSS 釘子。」在工做以外，她也會用 CSS 來尋求藝術靈感。

做爲前端，咱們天天都在與這三兄弟打交道，但你真的瞭解他們麼？你知道他們使用過程當中的一些奇淫巧技麼？

HTML、CSS、JavaScript 都是啥？

在各類技術論壇和貼吧裏，前端算不算真正的程序員一直都是一個被討論的問題。

但我以爲這個問題毫無心義啊，是又如何不是又如何，我只知道對於全世界全部的網站而言，不管其服務器端的語言是什麼，前端都使用了 HTML + CSS。

好久以前我保存了一張微博上的圖片，是一個前端工程師的技能樹。雖然隨着時間的推移不少內容都須要更新，但從圖上咱們也能看出前端工程師絕對不僅是簡單的切切頁面而已。

前端工程師，首先是工程師，而後纔是前端工程師。工程師的工做是用技術去解決業務上遇到的問題，所謂的前端後端只是分工不一樣。目前前端能容納的知識領域愈來愈廣，以後也將須要由更專業的人來完成工做，因此前端的路還能夠走的很長。

今天，就和你們介紹一下網頁三劍客分別是什麼：

1. HTML

之前網頁都是很是單純的資訊呈現，因此有一些聰明的工程師想到，只要在電腦上裝了一個瀏覽器，而後制定一個標準，讓瀏覽器能正確呈現網頁就行了。

這個標準就是 HTML，HTML 用 tag 的方式告訴瀏覽器資訊該如何呈現，舉例：瀏覽器讀到 image 這個 tag 就知道要在網頁上擺一張圖片，讀到 button 就知道要在網頁上放一顆按鈕。

如此一來，我只要制定一系列經常使用的tag (例如<h1>,<h2>,<p>,<image>,<input>等等)，就能讓瀏覽器呈現圖文並茂的網頁。

一個好的網頁其 HTML 能夠說是至關單純且具備易讀性，這種網頁不但方便前端工程師進行後續的維護外，也比較容易讓你的網頁增長曝光率讓搜尋引擎能把你的網頁擺在最前面，此種行爲稱爲 SEO。

2. CSS

有了 HTML 後，你們仍是不滿意，由於單純用 HTML 語言描述出來的網頁很醜，工程師想出了一個方法，就是制定一種描述網頁外觀的語言，再讓它變成一種標準，這樣瀏覽器也就會知道如何美化網頁了，這個語言就是 CSS。CSS 提供不少很厲害的效果和描述外觀的屬性，例如讓圖片變模糊、變亮、旋轉，或者改變字體的顏色。

從 1997 年 CSS 1.0 發佈到現在，從最開始只支持簡單的文字排版到現在已經能夠作出酷炫的 3D 動畫，CSS 已經走過了 22 個年頭，其發展如圖所示：

隨着互聯網的發展，人們對網頁的要求已是從只要展現圖文就好變成了各類交互跟視覺效果都須要有着更多的體驗要求。CSS 爲此也是不斷的更新着。

3. JavaScript

但不少狀況下僅憑 HTML + CSS 仍是不夠的。光是呈現畫面總少了點趣味，咱們但願網站能和使用者有互動，JavaScript 就是用來撰寫這些互動行爲的程式語言。

Javascript 能監聽網頁上的各類操做行爲，例如移動滑鼠、點擊按鈕、網頁縮放、輸入文字等等。

總結一下：

• HTML 創建搭建網頁的主結構
• CSS 負責網頁的美化與優化
• JavaScript 負責描述網頁如何與使用者互動

但光學會這三樣東西，仍然沒法知足工程師開發上的須要，爲了開發的效率，不想從新造輪子，全部的開發語言生態系都必定會衍生出各類 framework 和 library。

常見的 JavaScript 框架有 Vue.js、AngularJS、ReactJS、jQuery 等等，各有喜愛者，但目的都是爲了簡化開發複雜度，把先後端分開，提升重複使用性，可維護性。

後話：前端真的又容易又沒將來麼？

不少人都說前端簡單，但其實前端並非簡單，而是前端的學習反饋很是直接，上手容易而且很快就能見效，這也形成了前端很容易的假象。

但實際上，掌握 HTML + CSS + JavaScript，瞭解一些後端知識，只能說是一個合格的前端工程師；要想達到 80 分，就要了解業務，對於業務的需求和架構設計有真正的理解和設計；而行業內最稀缺的前端大牛，則超過了通常前端的範疇，更接近於「之前端開發爲主的全棧工程師」。

在 20 年前，前端的概念其實還不常見，就連程序員這個大領域也沒有過多的細分，基本上都是一我的或者幾我的一塊兒完成一個項目。

隨着行業的變化和互聯網的發展，狀況和以前大不相同了。2010 年開始，企業須要更多在某一領域更專業、更垂直的開發者，也就形成了如今的先後端分離。

而如今狀況又有所變化，用 Node.js、Meteor.js 這類運行環境來講，他們的出現讓前端工程師也開始進行服務器開發，逐漸又在向全棧靠攏。

前不久有個觀點頗有意思，說是到了雲時代，一家企業只要招幾個前端工程師就能夠了。

運維經過控制檯就能完成，開發藉助 Serverless 和編排工具就能實現無服務端。在更以後的將來，不管是前端工程師仍是全棧工程師，都將不復存在，應該叫端到端(F2E -> E2E)工程師了。

因此咱們不須要界定崗位的優劣，不論是前端仍是後端，只要你有能力、有熱情，都是稀缺的人才，學的只知其一;不知其二想渾水摸魚的人，也就只能是趁着行業的紅利混口飯吃。

點擊右側文字連接，看一看「前端工程師的自我修養」。