編輯導(dǎo)語：產(chǎn)品經(jīng)理在日常工作中會(huì)接觸到多方面的同事，也會(huì)產(chǎn)生比較多的交流，那除了接受需求以及判斷需求以外，更多的是與開發(fā)小哥“battle”；本文作者分享了關(guān)于前端開發(fā)工程師的一些工作日常，我們一起來了解一下。

今天要介紹的是產(chǎn)品經(jīng)理的小伙伴之一：前端開發(fā)工程師，雖然天天和他們打交道，但是想必大家都沒有好好的“關(guān)心”過他們，今天我們一起來看看天天接觸的前端工程師到底在忙些什么。

現(xiàn)在移動(dòng)互聯(lián)網(wǎng)發(fā)展的這么快，前端開發(fā)領(lǐng)域也越來越廣，前端早已經(jīng)告別了切圖崽的時(shí)代，在web端、移動(dòng)端（安卓、IOS）、Watch、小程序、公眾號(hào)開發(fā)、混合app開發(fā)都能看到前端開發(fā)工程師的影子。

從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專業(yè)技能和工具將產(chǎn)品UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動(dòng)端網(wǎng)頁，處理視覺和交互問題。

從廣義上來講，所有用戶終端產(chǎn)品與視覺和交互有關(guān)的部分，都是前端工程師的專業(yè)領(lǐng)域。

簡單的說，前端開發(fā)工程師日常工作是創(chuàng)建Web頁面或移動(dòng)頁面等前端界面呈現(xiàn)給用戶的過程，通過前端三大件HTML、CSS、JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互 。

用戶看到的每一個(gè)網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（ Structure） 、 表現(xiàn)（ Presentation） 和行為（ Behavior）。

• HTML —— 結(jié)構(gòu)， 決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容（“是什么”）；
• CSS —— 表現(xiàn)（ 樣式） ， 設(shè)定網(wǎng)頁的表現(xiàn)樣式（“什么樣子”）；
• JavaScript —— 行為， 控制網(wǎng)頁的行為（“做什么”）；

HTML、CSS、JavaScript是前端開發(fā)中最基本也是最必須的三個(gè)技能；前端開發(fā)中，在頁面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。接下來我們好好聊聊這三大件，知己知彼。

一、HTML是什么？

可以把HTML結(jié)構(gòu)想象成一個(gè)沒穿衣服的人。

HTML指超文本標(biāo)記語言（HyperText Markup Language），“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素；前端開發(fā)利用HTML標(biāo)簽（Tag）來標(biāo)記（Markup）網(wǎng)頁中的文字。

（html代碼示例）

上述代碼是一個(gè)最基礎(chǔ)HTML結(jié)構(gòu)，一個(gè)網(wǎng)頁的結(jié)構(gòu)往往包括“頭”和“主體”，頭部的內(nèi)容使用header標(biāo)簽標(biāo)記，主要存放一些網(wǎng)頁信息，例如網(wǎng)頁標(biāo)題、內(nèi)容摘要、關(guān)鍵詞等，頭部內(nèi)容也是SEO優(yōu)化的重要對(duì)象。

主體部分用標(biāo)簽body標(biāo)簽標(biāo)記，網(wǎng)頁的內(nèi)容全部放在body標(biāo)簽下，其內(nèi)部又包含了很多代表不同含義的標(biāo)簽（如下表所示，只展示部分常用的）。

這些形形色色的標(biāo)簽就構(gòu)成了頁面的內(nèi)容，要注意的是整個(gè)網(wǎng)頁的內(nèi)容都要放在一個(gè)頂層標(biāo)簽html標(biāo)簽下。

（常用標(biāo)簽）

例如：我們點(diǎn)擊某個(gè)鏈接，然后自動(dòng)跳轉(zhuǎn)一個(gè)新的頁面，這過程都是a標(biāo)簽在起作用；還有看到的圖片，就是img標(biāo)簽承載圖片的數(shù)據(jù)源。

最后，告訴大家兩個(gè)查看HTML源碼的方法，好奇的伙伴可以去試試。

• 打開瀏覽器，鼠標(biāo)在頁面上右擊，然后點(diǎn)擊“查看頁面源碼”；
• 打開瀏覽器，按 “F12” 鍵；

二、CSS是什么？

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

CSS 指層疊樣式表（Cascading Style Sheets），是一種將網(wǎng)頁內(nèi)容與網(wǎng)頁樣式分離的技術(shù)。

我們經(jīng)常會(huì)對(duì)一個(gè)網(wǎng)站評(píng)價(jià)道：這網(wǎng)站頁面怎么這么亂、這網(wǎng)站看起來真大氣——這背后都是受CSS影響。

CSS可以做什么？

1）CSS主要用來設(shè)計(jì)網(wǎng)頁的樣式，美化網(wǎng)頁；它不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化；比如一開始文字顯示是紅色，我點(diǎn)擊某個(gè)按鈕后文字變黑色了。

2）你可以輕松地控制頁面的布局，CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，因此我們能看到各式各樣的布局風(fēng)格。

3）在頁面制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制；例如通過文本屬性，可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)等等。

4）你可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新，不用再一頁一頁地更新了；你可以將站點(diǎn)上所有的網(wǎng)頁風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁面都會(huì)隨之發(fā)生變動(dòng)。

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

CSS代碼示例

三、JS是什么？

JS能夠讓HTML結(jié)構(gòu)這個(gè)人“跳舞”、“跑步”等動(dòng)作，主要目的是讓“人”動(dòng)起來。

JS（JavaScript）是一種屬于網(wǎng)絡(luò)的高級(jí)腳本語言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能，為用戶提供更流暢美觀的瀏覽效果；通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。

js可以做什么：

• 使網(wǎng)頁具有交互性，例如，banner輪播效果、手動(dòng)Tab切換等效果；
• 可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。例如，表單中要你輸入電子郵箱而你卻輸入一個(gè)手機(jī)號(hào)，那么應(yīng)該給你一個(gè)錯(cuò)誤提醒。
• 還可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁面。例如，發(fā)郵件時(shí)，添加附件操作。
• 設(shè)置cookie，cookie是存儲(chǔ)在瀏覽器上的一些臨時(shí)信息，例如你瀏覽過的網(wǎng)站地址，使用過的用戶名。
• 跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。
• ……

JS代碼示例

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

四、全棧工程師

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

全棧工程師熟悉多種開發(fā)語言，同時(shí)具備前端和后臺(tái)開發(fā)能力，既能做前端（需要熟悉前端三大件以及Vue等各種前端技術(shù)），又能做后端（需要熟悉Node.js或Java或ASP.net或php或Go等），可以獨(dú)自完成一個(gè)產(chǎn)品的前、后臺(tái)開發(fā)工作。

簡單了解下全棧工程師的技術(shù)棧有哪些：

• 前端技術(shù)：HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等；
• 后端技術(shù)：node.js或Java、php等；
• 中間件：Nginx或Dubbo；
• 數(shù)據(jù)庫：MySQL或MongoDB；
• 代碼管理：git、svn；
• 構(gòu)建工具：webpack、gulp、Jenkins；
• ……

我們可以看到，對(duì)于全棧工程師來說，要活到老，學(xué)到老，其中最重要的屬性，就是不同的思維方式和強(qiáng)大的學(xué)習(xí)能力。

最后，請(qǐng)重新認(rèn)識(shí)一下你身邊那個(gè)平平無奇的前端小伙伴吧！也可以把本篇文章分享給他看看，到底有幾分像，哈哈。

#專欄作家#

道三，微信公眾號(hào)：產(chǎn)品大秘籍，人人都是產(chǎn)品經(jīng)理專欄作家。以前寫過代碼，現(xiàn)在產(chǎn)品圈摸爬滾打，專注于電商領(lǐng)域產(chǎn)品設(shè)計(jì)、主要分享電商和供應(yīng)鏈領(lǐng)域知識(shí)點(diǎn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。