web_02 | Web 前置知識——初次接觸前端，咱們要理解哪些名詞？

時間 2019-11-06

標籤 web 前置知識初次接觸前端咱們理解哪些名詞欄目 HTML 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

前言： 在上一篇《老生常談的從 URL 輸入到頁面展示背後發生的事》中，咱們瞭解了從輸入到輸出背後到底發生了什麼，也初步認知到「前端」在這個過程當中扮演了什麼角色。這一篇，咱們就正式從名詞解釋開始，慢慢推開「前端」這扇大門。如下系列文章先從 web 前端開發談起。所以，所說的「前端」都指 web 前端開發。php

1 前端職能定位

前端這個職位，咱們主要仍是在互聯網公司裏邊稱呼。css

1.1 什麼是互聯網公司？

我認爲最直接的辨別方式就是看這個公司是否有它的網站地址，且用戶是否能夠經過這個網頁進行相關的操做（例如：國內的 BAT——百度、阿里、騰訊，國外的 facebook 等都屬於互聯網公司）。html

1.2 互聯網公司基本運做模式是怎樣的？

1.3 其中 RD（程序開發）包括哪些崗位？

1.3.1 前端開發

實現面向用戶操做層面的代碼搭建（能夠分爲 iOS 工程師、Android 工程師、web 前端工程師、pc/mac 工程師）。前端

1.3.2 後端開發

後端開發：開發提供給客戶端進行數據接收和推送的服務器運行系統（主要語言 java、php……）。java

固然，公司裏邊的任何職位都不是孤立的。對於前端來講，只要節點到了 PM 這裏，就意味着哪裏都會有你的身影。node

2 初識前端，咱們須要知道最基本概念

2.1 第一類：初作一個靜態頁面

HTML（HyperText Markup Language 超文本標記語言）：用來描述網頁的一種語言，它包含不少的「標籤」和「純文本」。——HTML 的結構決定這個頁面是否穩定、規範、性能好很差；
HTML5：是 HTML 的新標準，它更加的語義化（且增長了許多語義化的標籤）。咱們近些年說的 H5 就是這個東西。——通常用來作移動端的頁面；
CSS（Cascading Style Sheets 層疊樣式表）：用來控制 HTML 的表現。——CSS 決定頁面好很差看、動畫效果酷不酷炫；
CSS3 ：最新的 CSS 標準，在 CSS 的基礎上增長了一些屬性，對動畫效果、流媒體等資源有更好的支持。

總結：webpack

HTML+CSS 是一個靜態頁面的基本組成。就比如一個女生在有基本的身體五官 (HTML) 後，又對本身打扮了下：化了妝、梳了髮型、穿了好看的衣服（CSS）；
而 HTML5+CSS3 能夠知足更高級的動畫效果，但只能兼容高級瀏覽器（對 IE 的兼容很差）。

2.2 第二類：讓上邊的靜態頁面動起來

JavaScript ：它是一種很輕量級的編程語言，在上邊的靜態頁面中插入 JavaScript，可讓頁面「動」起來，實現交互；
jQuery ：它是 JavaScript 的一個函數庫——不過，目前項目中我已經基本不用它了。

總結：ios

若是說 HTML+CSS 是一我的的皮膚五官毛髮，再加點妝容、打扮，那麼JavaScript 就是這我的的關節、骨架、血液，可以讓頁面動起來，實現人機的「交互」；
若是說 JavaScript 是一塊塊磚，你要使用的時候就拿這些磚搭建房屋。那麼 jQuery 就是已經搭建好的各式各樣的房屋，你只須要拿你想用的那一塊去用就能夠了——提升了開發效率。

2.3 第三類：讓頁面更新的更有效率

AJAX（Asynchronous JavaScript and XML 異步的 JavaScript 和 XML）：git

AJAX 是一種用於建立快速動態網頁的技術；
經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

以上是對一個 web 頁面相關名詞的解釋，初學的咱們能夠暫時在這打住（即便後邊還有不少不少）。如下將解釋一些綜合性的名詞，讓咱們有一個大局觀，瞭解一下前端這個職業到底都要接觸些什麼東西。github

3 相關名詞概述

3.1 代碼編輯器（需下載安裝）

初學的第一個月卻是建議用記事本/文本編輯器把代碼一個個敲出來。

3.1.1 是什麼

就是咱們編寫代碼的載體。

3.1.2 有哪些（前端最經常使用）

Visual Studio Code（操做普通，免費，用起來方便）；
Sublime（操做簡單，啓動運行速度快，功能較弱，須要本身配置一些插件使之強大）；
WebStorm（操做較複雜、收費、功能強大，啓動有點慢）。

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 前端自動化工具

3.7.1 Gulp

🔗Gulp 官方文檔
Gulp：對於自動化工具來講，Gulp 算是至關輕便且好理解的，拿來用做 Server 服務啓用、編譯 SASS、編譯 ES6，壓縮圖片大小等工做，在一些小型項目上很是適合。

3.7.2 Webpack

🔗Webpack 官方文檔
Webpack：目前市場佔有率最高的自動化工具，無論是編譯、打包或是服務器服務，都至關全面。入門門檻比較高，Webpack 的配置要透過 loader 工具轉換，再透過簡單的正則表達式去配置，一開始接觸可能會以爲沒有 Gulp 方便，但是當 WebPack 使用習慣後會發現不少東西真的很是方便。

Webpack 已成爲現現在中大型項目的標配。

🚀咱們後邊的實戰項目——移動端旅遊網站，就會用 Webpack 來構建環境。

3.7.3 Parcel

🔗Parcel 官方文檔
Parcel：比較新的自動化工具，號稱極速零配置，不用像 Webpack 或是 Gulp 去寫編譯指令，使用起來很是方便簡單。

🚀咱們後邊的實戰項目——移動端音樂播放器，就會用 Parcel 來構建環境。

3.8 JS 預處理

Babel

🔗Babel 官方文檔
Babel：如今的 JavaScript 能夠說是一年就提一個規格草案，目前出到 ES2018——咱們習慣簡稱爲 ES6+，不過瀏覽器可沒有辦法很快地支持更新（即，當前咱們寫的 ES6 代碼是沒辦法直接在瀏覽器上運行的）。

因此，咱們須要經過編譯的方式把新的語法轉換成瀏覽器的能夠識別的 ES5。

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。

3.9 CSS 預處理

3.9.1 SASS

🔗sass 中文文檔 Sass 參考手冊
SASS：2007 年誕生，最先也是最成熟的 CSS 預處理器，目前受 LESS 影響，已經進化到了全面兼容 CSS 的 SCSS。

3.9.2 LESS

🔗Less 中文文檔
LESS：2009 年出現，受 SASS 的影響較大，但又使用 CSS 的語法，讓大部分開發者和設計師更容易上手，在ruby 社區以外支持者遠超過 SASS，其缺點是比起 SASS 來，可編程功能不夠，不過優勢是簡單和兼容 CSS，反過來也影響了 SASS 演變到了 SCSS 的時代，著名的 Twitter Bootstrap 就是採用 LESS 作底層語言的。

3.9.3 Stylus

🔗Stylus 文檔
Stylus：2010 年產生，來自 Node.js 社區，主要用來給 Node 項目進行 CSS 預處理支持，在此社區以內有必定支持者，在普遍的意義上人氣還徹底不如 SASS 和 LESS。

3.10 DOM 操做

jQuery

jQuery：前端界無人不知無人不曉的老大哥，簡單的語法和操做，還有龐大的套件生態圈，讓新手能夠快速地作出頁面效果。但因爲原生 JS 的更新，對 DOM 操做愈來愈友好（或者因爲 Vue.js 等框架根本不須要操做 DOM）。而 jQuery 相對來講資源過重，愈來愈多的項目已經捨棄了 jQuery。