本文推薦 PC 端閱讀
本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」
複製程式碼前言： 在上一篇《老生常談的從 URL 輸入到頁面展現背後發生的事》中，我們瞭解了從輸入到輸出背後到底發生了什麼，也初步認知到“前端”在這個過程中扮演了什麼角色。這一篇，我們就正式從名詞解釋開始，慢慢推開“前端”這扇大門。 以下系列文章先從 web 前端開發談起（因此，所說的“前端”都指 web 前端開發），之後會慢慢觸及 iOS、Android 等移動端開發。
1 前端職能定位
前端這個職位，我們主要還是在網際網路公司裡邊稱呼。
1.1 什麼是網際網路公司？
我認為最直接的辨別方式就是看這個公司是否有它的網站地址，且使用者是否可以通過這個網頁進行相關的操作（例如：國內的 BAT——百度、阿里、騰訊，國外的 facebook 等都屬於網際網路公司）。
1.2 網際網路公司基本運作模式是怎樣的？
1.3 其中 RD（程式開發）包括哪些崗位？
1.3.1 前端開發
實現面向使用者操作層面的程式碼搭建（可以分為 iOS 工程師、Android 工程師、web 前端工程師、pc/mac 工程師）。
1.3.2 後端開發
後端開發：開發提供給客戶端進行資料接收和推送的伺服器執行系統（主要語言 java、php……）。
當然，公司裡邊的任何職位都不是孤立的。對於前端來說，只要節點到了 PM 這裡，就意味著哪裡都會有你的身影。
2 初識前端，我們需要知道的相關概念
2.1 第一類：初做一個靜態頁面
- HTML（HyperText Markup Language 超文字標記語言）：用來描述網頁的一種語言，它包含很多的“標籤”和“純文字”。——HTML 的結構決定這個頁面是否穩定、規範、效能好不好；
- HTML5：是 HTML 的新標準，它更加的語義化（且增加了許多語義化的標籤）。我們近些年說的 H5 就是這個東西。——一般用來做移動端的頁面；
- CSS（Cascading Style Sheets 層疊樣式表）：用來控制 HTML 的表現。——CSS 決定頁面好不好看、動畫效果酷不酷炫；
- CSS3 ：最新的 CSS 標準，在 CSS 的基礎上增加了一些屬性，對動畫效果、流媒體等資源有更好的支援。
總結：
- HTML+CSS 是一個靜態頁面的基本組成。就好比一個女生在有基本的身體五官 (HTML) 後，又對自己打扮了下：化了妝、梳了髮型、穿了好看的衣服（CSS）；
- 而 HTML5+CSS3 可以滿足更高階的動畫效果，但只能相容高階瀏覽器（對 IE 的相容不好）。
2.2 第二類：讓上邊的靜態頁面動起來
- JavaScript ：它是一種很輕量級的程式語言，在上邊的靜態頁面中插入 JavaScript，可以讓頁面“動”起來，實現互動；
- JQuery ：它是 JavaScript 的一個函式庫。
總結：
- 如果說 HTML+CSS 是一個人的皮膚五官毛髮，再加點妝容、打扮，那麼JavaScript 就是這個人的關節、骨架、血液，能夠讓頁面動起來，實現人機的“互動”；
- 如果說 JavaScript 是一塊塊磚，你要使用的時候就拿這些磚搭建房屋。那麼 jQuery 就是已經搭建好的各式各樣的房屋，你只需要拿你想用的那一塊去用就可以了——提高了開發效率。
2.3 第三類：讓頁面更新的更有效率
AJAX（Asynchronous JavaScript and XML 非同步的 JavaScript 和 XML）：
- AJAX 是一種用於建立快速動態網頁的技術；
- 通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
以上是對一個 web 頁面相關名詞的解釋，初學的我們可以暫時在這打住（即使後邊還有很多很多）。以下將解釋從零開始寫一個 HTML 檔案前需要具備的相關名詞意義。
3 相關名詞概述
3.1 程式碼編輯器（需下載安裝）
初學的第一個月倒是建議用記事本/文字編輯器把程式碼一個個敲出來。
3.1.1 是什麼
就是我們編寫程式碼的載體；
3.1.2 有哪些（前端最常用）
- Visual Studio Code（操作普通，免費，用起來方便）；
- Sublime（操作簡單，啟動執行速度快，功能較弱，需要自己配置一些外掛使之強大）；
- webstrom（操作較複雜、收費、功能強大，啟動有點慢）。
3.2 自己寫部落格需要了解學習的 markdown
3.2.1 是什麼
是一個簡單的標記語言，這些標記和 html 的一些標籤對應，通過一些轉換庫可以把 markdown 轉換成 html 或者把html 轉換成 markdown。
3.2.2 作用
用來在網頁上展示文章，省去排版佈局的煩惱。
3.2.3 侷限性
並不是所有的網頁編寫文章都支援 markdown 格式，比如現在的知乎，我就不能用 markdown 來輕鬆的書寫（“語雀”可以用）。
3.2.4 相關基本語法學習參考
參考連結：語雀 markdown 官方指南
3.3 命令列、終端（windows 使用者需下載安裝）
3.3.1 是什麼
與之對應的概念是“圖形介面”——開啟一個應用有選項、有選單供我們很直觀的點選。而“命令列”就是一開啟什麼也沒有，需要敲擊一些字母、命令來和計算機進行對話。
3.3.2 用處和必要性
為了以後開發過程中我們與後臺伺服器（很多後臺伺服器系統是沒有圖形介面供我們點選的）進行對話。
3.3.3 命令列在哪裡敲擊
命令列是敲擊在一個叫“終端”的地方。
3.3.4 終端
- Linux：系統自帶終端，直接可以找到；
- macOS：command+空格 ，然後在對話方塊中輸入 terminal 或“終端”——因 macOS 系統核心就是 Unix；
- windows：安裝 git 後，會附帶一個“Git Bash”終端——一個小型的仿 Linux 作業系統。
3.3.5 Bash
- Linux 作業系統一般分為 Kernel（核心）和 Shell（外殼）;
- 常見的 Shell 有 Bash 和 Zsh；
- Bash 是一種命令列式的軟體；
- Bash 是對 Shell 的一種具體實現形式。
3.3.6 Shell
- 用於去執行你的在終端上寫的命令的這麼一個東西。
3.4 Git（需要官網下載安裝）、版本控制系統
3.4.1 是什麼
Git 是一個免費、開源且新時代的”分散式版本控制系統“。可以高效處理從小到大的各種專案。
3.4.2 什麼是“版本控制系統”
它是一種記錄一個或多個檔案內容變化，以便將來查閱特定版本修訂情況的系統。主要發展歷程：
- 本地版本控制系統（很早以前有）；
- 集中式版本控制系統（svn）；
- 分散式版本控制系統（Git）。
3.4.3 優勢
- 速度快；
- 設計原理簡單；
- 可以允許成千上萬個並行分支同時去開發；
- 不怕斷網（因為斷網可以先提交到本地庫）。
3.5 GitHub（需自行註冊）
3.5.1 是什麼
- 它是一個成立於 2008 年 4 月、公司地址在舊金山的公司；
- 它是一個通過 Git 進行版本控制的軟體原始碼託管服務平臺；
- 它是世界上最大的程式碼存放網站和開源社群。
3.5.2 作用
用於日後的軟體開發等——很重要。
3.5.3 GitHub 與 Git 的關係
Git 是 GitHub 上用來管理專案的一個工具，現在 GitHub 上託管的所有專案程式碼都是基於 Git 來進行版本控制的。
3.5.4 註冊時注意事項
- 請取一個好的使用者名稱來正式開啟你前端工程師的奮鬥生涯——以後的所有與程式、程式碼相關的名字都是這個最好；
- 之後如果你要在 GitHub 上搭建部落格，那麼你的部落格地址的字首將是你的這個使用者名稱。
- 註冊過程中，你會看到 GitHub 有兩種選擇：
-- 公開倉庫（Unlimited public repositories for free)——這種是免費的，你建立的專案是開放的，所有人都能看得到（對於個人我們直接選擇這種）；
-- 私有倉庫（Unlimited private repositories for $--/month)——自從被微軟收購後，個人私有倉庫也免費了。一般是企業會選擇，他們使用 GitHub 的私有倉庫來託管自己的專案。
- 註冊後，如果嫌英文介面很晦澀，且你用的是 chrome 瀏覽器，那直接右鍵→翻成中文（來大致熟悉介面）。之後請轉回英文介面。記住，英文不可怕。
3.6 Node.js（需要官網下載安裝）、npm（下載安裝 Node.js 後，其附帶了npm）
3.6.1 是什麼
Node 是 JavaScript 語言的伺服器執行環境，Node.js 是一個開源的伺服器框架。
3.6.2 能做什麼
- Node.js 可以生成動態頁面內容；
- Node.js 可以建立，開啟，讀取，寫入，刪除和關閉伺服器上的檔案；
- Node.js 可以收集表單資料；
- Node.js 可以新增，刪除，修改資料庫中的資料。
3.6.3 NPM
- Node Package Manager ，即 node 包管理器；
- 它是 Node.js 預設的、以 JavaScript 編寫的軟體管理系統。
3.7 MDN 網站
3.7.1 是什麼
是一個包含了很多對於我們學習前端技術有用的、最新的、最正確的知識。
3.7.2 怎麼用
在搜尋相關疑難、未知知識點時，空格加上 MDN，便會跳轉到該網站相應的教程、文件上（不要去用 w3cschool 中文站上的東西——與 MDN 相比，它有些過時且有錯誤）。
後記： 以上就是作為一個零基礎的我們所需要了解到的知識點，less is more 先搞定上邊的，然後以其為基點進行後續的發散學習，細水流長。前端路很長，但充滿樂趣。學無止境，它值得你我用後邊的 10000 小時來對待。
（本文版權歸 “Oli's 前端一萬小時” 所有，未經授權，請勿轉載）