前端修煉の道 | 如何成爲一名合格前端開發工程師？

上期回顧

在上一節咱們已瞭解前端開發是作什麼的，如今的問題是，如何才能成爲一名合格的前端開發工程師？ 相信這個問題是你們比較關心的。

前端開發工程師

若是你們在一些搜索引擎上搜索「前端開發工程師」須要具有什麼技能？能夠看到搜索結果中會出現許多諸如要掌握：

「HTML」 「CSS」 「JavaScript」 「DOM」 「Ajax」 「React.js」 「vue. js」 「node.js」 等技術的信息。一些想入行的朋友看到要學習這麼多東西,可能會望而卻步，不敢去了解它。

其實前面所搜索到的結果，不少都是由前端開發的核心技術衍變而來的。無論前端開發技術怎麼發展，萬變不離其宗，它的核心都是 HTML、CSS 和 JavaScript 這三大技術。

只要把這些核心技術的知識體系掌握紮實， 就能夠順利地進行前端開發了，至於「React.js」 「vue.js」 「node.js」這些技術，不妨等基礎穩妥紮實後，再慢慢地學習，畢竟不少「框架」或「類庫」都是流行一時，沒準正在看本書的你在學完本書後發現，有些技術早不流行了，而那些原生語言卻依然有着強悍的生命力，仍然活躍在各種商業應用中。所以，從這個意義上來講，做爲開發者掌握原生語言的開發技能纔是重點。 

在人類社會,語言是人與人之間用來溝通的方式

好比和英國人說話須要用英語，和俄羅斯人說話就得用俄語。在計算機世界，咱們要與計算機進行信息的交流一樣須要語言，這個語言稱爲計算機語言。

人類語言存在不一樣的類型，計算機語言也一樣存在不一樣類型。針對不一樣的應用,咱們須要使用不一樣的計算機語言, 好比針對服務端進行業務邏輯和數據的處理須要 Java、C#、C++ 等計算機語言，而針對在瀏覽器中展示網頁以及實現用戶與網頁的交互等效果的應用，則須要使用 HTML、CSS、JavaScript 等計算機語言。

HTML 超文本標記語言：搭建網頁「結構」 

HTML(Hypertext Markup Language)

中文意思是超文本標記語言。爲了方便記憶和理解,咱們將 HTML 中的 3 個單詞拆分開來,分別解釋其中含義。 

Hypertext(超文本)

指的是頁面中的各類內容。在一個網頁中,有文字、超連接、圖片、音頻、視頻等, 這些內容共同構成了網站信息,這些信息以計算機語言的形式編寫而成,所以稱它們爲「超文本」內容。

 Markup(利潤。在這裏指標記或標籤)

HTML 語言在大多狀況下,使用一對標籤「<></>」來 表示,其中「<>」爲開始標籤,「</>」爲結束標籤。標籤的尖括號內放置着各類英文關鍵詞,例如:「<div></ div>」,它是一段 HTML 代碼,用來表示一個「div」的標籤對。值得注意的是 HTML 代碼(標籤)並不會 顯示在瀏覽器中,能在網頁中顯示的是標籤對中包含的文字,好比:「<div> 咱們是內容 </div>」這段代碼

若是但願在網頁中放置一段文字,可使用「<p></p>」這樣的標籤對。

例如：

「<p> 妙味課堂是國內知名的 IT 培訓機構 </p>」,它將會把「妙味課堂是國內知名的 IT 培訓機構」做爲一段文字放置在網頁中。

 

又好比：

「<h1></h1>」這個標籤對錶明着網頁中的一個一級標題, 例如:「<h1> 前端概要 </h1>」,它將會把「前端概要」設置爲一級標題放置在網頁中。可見,不一樣的標籤 表明着網頁上不一樣的內容。

一個 HTML 頁面就是由不一樣的標籤組合而成的。在本文後續內容中還會介紹更多標籤類型。 

Language(語言)

HTML 就是由各類各樣的標籤組成的語言,在這套語言體系內,描述着網頁的「視頻、 音樂、文字、圖片」等內容。 

HTML 從誕生到如今經歷多個版本，依次是 

• HTML2.0

• HTML3.2

• HTML4.0

• HTML4.01

• HTML5 

HTML5 相比於其餘版本,增長了許多語義化標籤,如 header、nav 等文檔結構標籤,音頻和視頻以及 canvas 畫布等標籤。 

CSS 層疊樣式表：給網頁添加「樣式」 

CSS(Cascading Style Sheets)

中文意思是層疊樣式表,如下簡稱爲「樣式表」。樣式表的做用就是給網 頁加樣式。使用 HTML 標籤搭建頁面結構時,標籤使用的都是本身自己在瀏覽器中的「模樣」,即默認樣式。 這些默認樣式大部分狀況下都毫無美感。而 CSS 樣式就至關於「化妝師」,把頁面上的內容「梳妝打扮」一番, 而後將美好的狀態呈如今用戶面前。

例如：

圖 1-8 就是瀏覽器默認顯示的樣式,

圖 1-9 則是使用 CSS 稍加修 飾之後的樣式。 

圖 1-8 默認樣式輸出結果 圖 1-9 CSS 樣式輸出結果 

從圖 1-9 中能夠看到,使用 CSS 樣式能夠修改頁面內容的對齊方式、顏色以及背景顏色等樣式。兩圖相比較,圖 1-9 更加豐富多彩,更能突出重點,也更吸引人。 

JavaScript:讓網頁響應某種「行爲」 

JavaScript(簡稱 JS)

一種腳本式語言，它可讓網頁響應某些「行爲」。例如用戶在網頁中用鼠標單擊某個按鈕之後，若是他但願瀏覽器可以切換下一張圖片，這樣的想法就能夠經過 JS 來實現。在圖 1-10 中, 用戶能夠經過單擊圖片左、右兩邊的  < 和 > 箭頭來實現圖片的切換。

又或者咱們但願在搜索框中輸入部份內容時能在彈出的下拉框中顯示出全部相關的數據供用戶選擇,如 圖 1-11 所示。這種根據部份內容彈出下拉框並顯示出全部相關數據的效果使用 JS 將很容易實現。 

圖 1-10 單擊圖片兩邊向左和向右箭頭切換圖片 

圖 1-11 根據部份內容實現相關數據的下拉顯示 

綜上所述

咱們能夠看到：HTML、CSS 和 JavaScript 各司其職，分工合做，共同構建 Web 頁面。

• HTML 用於搭建頁面結構，就像人的骨骼，有了骨骼才能支撐起身體；

• CSS 樣式表至關於「化妝師」，讓頁面內容以美好的狀態呈如今用戶面前，這就如同每一個人都有不一樣的穿衣風格同樣；

• JS 能讓頁面具有響應各類「行爲」的能力，產生各類交互效果，使頁面真正的「鮮活」起來，就如同讓一個本來靜止的模特開始活動，他能夠微笑、能夠表演。 

本文連載更新中，敬請關注後續文章發表~

 

訂閱號ID：Miaovclass

關注妙味訂閱號：「妙味前端」，爲您帶來優質前端技術乾貨；