帶你重新認識身邊的前端工程師

今天要介紹的是產品經理的小夥伴之一：前端開發工程師，雖然天天和他們打交道，但是想必大家都沒有好好的“關心”過他們，今天我們一起來看看天天接觸的前端工程師到底在忙些什麼。

現在移動網際網路發展的這麼快，前端開發領域也越來越廣，前端早已經告別了切圖崽的時代，在web端、移動端（安卓、IOS）、Watch、小程式、公眾號開發、混合app開發都能看到前端開發工程師的影子。

從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專業技能和工具將產品UI設計稿實現成網站產品，涵蓋使用者PC端、移動端網頁，處理視覺和互動問題。

從廣義上來講，所有使用者終端產品與視覺和互動有關的部分，都是前端工程師的專業領域。

簡單的說，前端開發工程師日常工作是建立Web頁面或移動頁面等前端介面呈現給使用者的過程，透過前端三大件HTML、CSS、JavaScript以及衍生出來的各種技術、框架、解決方案，來實現網際網路產品的使用者介面互動 。

使用者看到的每一個網頁主要由三部分組成：結構（ Structure） 、 表現（ Presentation） 和行為（ Behavior）。

• HTML —— 結構， 決定網頁的結構和內容（“是什麼”）；
• CSS —— 表現（ 樣式） ， 設定網頁的表現樣式（“什麼樣子”）；
• JavaScript —— 行為， 控制網頁的行為（“做什麼”）；

HTML、CSS、JavaScript是前端開發中最基本也是最必須的三個技能；前端開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展示的元素進行定位，再透過JavaScript實現相應的效果和互動。接下來我們好好聊聊這三大件，知己知彼。

一、HTML是什麼？

可以把HTML結構想象成一個沒穿衣服的人。

HTML指超文字標記語言（HyperText Markup Language），“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素；前端開發利用HTML標籤（Tag）來標記（Markup）網頁中的文字。

（html程式碼示例）

上述程式碼是一個最基礎HTML結構，一個網頁的結構往往包括“頭”和“主體”，頭部的內容使用header標籤標記，主要存放一些網頁資訊，例如網頁標題、內容摘要、關鍵詞等，頭部內容也是SEO最佳化的重要物件。

主體部分用標籤body標籤標記，網頁的內容全部放在body標籤下，其內部又包含了很多代表不同含義的標籤（如下表所示，只展示部分常用的）。

這些形形色色的標籤就構成了頁面的內容，要注意的是整個網頁的內容都要放在一個頂層標籤html標籤下。

（常用標籤）

例如：我們點選某個連結，然後自動跳轉一個新的頁面，這過程都是a標籤在起作用；還有看到的圖片，就是img標籤承載圖片的資料來源。

最後，告訴大家兩個檢視HTML原始碼的方法，好奇的夥伴可以去試試。

• 開啟瀏覽器，滑鼠在頁面上右擊，然後點選“檢視頁面原始碼”；
• 開啟瀏覽器，按 “F12” 鍵；

二、CSS是什麼？

可以把CSS想象成給一個沒穿衣服的人(HTML結構)化妝、穿衣服等，作用是讓它變得美美的 。

CSS 指層疊樣式表（Cascading Style Sheets），是一種將網頁內容與網頁樣式分離的技術。

我們經常會對一個網站評價道：這網站頁面怎麼這麼亂、這網站看起來真大氣——這背後都是受CSS影響。

CSS可以做什麼？

1）CSS主要用來設計網頁的樣式，美化網頁；它不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化；比如一開始文字顯示是紅色，我點選某個按鈕後文字變黑色了。

2）你可以輕鬆地控制頁面的佈局，CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，因此我們能看到各式各樣的佈局風格。

3）在頁面製作時採用CSS技術，可以有效地對頁面的佈局、字型、顏色、背景和其它效果實現更加精確的控制；例如透過文字屬性，可以改變文字的顏色、字元間距，對齊文字，裝飾文字，對文字進行縮排等等。

4）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了；你可以將站點上所有的網頁風格都使用一個CSS檔案進行控制，只要修改這個CSS檔案中相應的行，那麼整個站點的所有頁面都會隨之發生變動。

5）CSS在幾乎所有的瀏覽器上都可以使用。

CSS程式碼示例

三、JS是什麼？

JS能夠讓HTML結構這個人“跳舞”、“跑步”等動作，主要目的是讓“人”動起來。

JS（JavaScript）是一種屬於網路的高階指令碼語言，已經被廣泛用於Web應用開發，常用來為網頁新增各式各樣的動態功能，為使用者提供更流暢美觀的瀏覽效果；通常JavaScript指令碼是透過嵌入在HTML中來實現自身的功能的。

js可以做什麼：

• 使網頁具有互動性，例如，banner輪播效果、手動Tab切換等效果；
• 可以處理表單，檢驗使用者的輸入，並提供及時反饋節省使用者時間。例如，表單中要你輸入電子郵箱而你卻輸入一個手機號，那麼應該給你一個錯誤提醒。
• 還可以根據使用者的操作，動態的建立頁面。例如，發郵件時，新增附件操作。
• 設定cookie，cookie是儲存在瀏覽器上的一些臨時資訊，例如你瀏覽過的網站地址，使用過的使用者名稱。
• 跨平臺特性，在絕大多數瀏覽器的支援下，可以在多種平臺下執行（如Windows、Linux、Mac、Android、iOS等）。
• ……

JS程式碼示例

前端三大件到此介紹完畢，不過現在有些其他語言的程式猿在討論HTML、CSS、JS倒是算不算程式語言。

四、全棧工程師

前端開發工程師在精進一步可以發展為全棧工程師，向T型人才或者π型人才發展。

全棧工程師熟悉多種開發語言，同時具備前端和後臺開發能力，既能做前端（需要熟悉前端三大件以及Vue等各種前端技術），又能做後端（需要熟悉Node.js或Java或ASP.net或php或Go等），可以獨自完成一個產品的前、後臺開發工作。

簡單瞭解下全棧工程師的技術棧有哪些：

• 前端技術：HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等；
• 後端技術：node.js或Java、php等；
• 中介軟體：Nginx或Dubbo；
• 資料庫：MySQL或MongoDB；
• 程式碼管理：git、svn；
• 構建工具：webpack、gulp、Jenkins；
• ……

我們可以看到，對於全棧工程師來說，要活到老，學到老，其中最重要的屬性，就是不同的思維方式和強大的學習能力。

最後，請重新認識一下你身邊那個平平無奇的前端小夥伴吧！也可以把本篇文章分享給他看看，到底有幾分像，哈哈。

作者：道三，電商PM；公眾號: 產品大秘籍

本文由 @道三 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。