建立web介面：從何處開始

我們將向您展示web介面是如何分解的，然後指出使您成為21世紀web設計師所需的關鍵概念、工具和構建塊。...

超過磚和臼，計算機代碼和像素是二十一世紀經濟的基礎。如果您曾經在瀏覽器中查看過“頁面源代碼”或“開發人員工具”，您可能會遇到一堆亂七八糟的文本，並想知道這是如何使網頁工作的。

Web開發人員將圖形用戶界面（GUI）統稱為Web頁面的前端，而不是後端。前端是用戶可以操縱、使用和使用的。後端可以被認為是包含並支持前端所隱含的所有信息和任務的基礎結構。

這篇文章是關於前端的。我們將描繪出這個領域，這樣您就可以瞭解前端的區別和功能，並向您展示如何開始理解和使用web developer的工具來創建吸引人的交互式網頁。

web設計與前端開發

在大型組織中，設計和開發是由具有不同技能的專業團隊承擔的任務。設計師將創建一個特定的視覺和交互設計；前端開發人員將實現它。

然而，對於個人來說，沒有理由限制你的探索：僅僅因為你對開發感興趣，並不意味著你對設計沒有遠見，反之亦然。對基本的網絡技術或設計原則的少量知識可以證明對你的職業或業務非常有益。

前端開發或多或少都是一種編碼活動。更重要的是，它的設計思想佔了一半以上：許多概念都來自印刷生產的世界。更少，因為它使用計算機代碼時，該代碼是一種不太複雜，更寬容，並且需要比其他Web編程語言（在後端可以找到許多編程語言）的基礎知識更少的程序。

web前端：標記、樣式表和編程語言

大多數網頁是用三種技術構建的：超文本標記語言（HTML）、層疊樣式表（CSS）和JavaScript（JS）：

像HTML這樣的標記語言用標記來標記文檔。標籤界定了文檔的語義內容和結構。結構化文檔可以設置樣式。
CSS是一種樣式表語言，是頁面合成器（為印刷機創建最終可打印圖像）的打印樣式指示的後代；在web上，CSS通常指示內容的表示，如排版和佈局，以及放置圖形。
與前兩種不同，JavaScript是一種編程語言。JS處理交互和用戶輸入，並關注用戶生成的事件。再補充一點，與事件驅動範式相反的是，編程執行與用戶輸入無關。

html格式

它已經有二十多年的歷史了，HTML的核心目的仍然是一樣的：將讀者需要的文本與解析文檔所需的結構分離開來。

你為什麼需要它

為什麼HTML仍然重要？簡單地說，HTML是內容的語義所在。這對於像搜索引擎蜘蛛和屏幕閱讀器這樣的機器閱讀器是必要的。隨著時間的推移，將語義與結構區分開來的關聯性並沒有隨著時間的推移而減弱，反而在增長。最新版本的HTML（5）引入了、、和等標記，以澄清語義和結構。這對人類和機器讀者都有好處。

html元素的剖析

HTML元素至少是一對開始標記和結束標記，每個標記都用青色括在&lt；尖括號&gt；中，例如下面的段落標記。元素可以採用屬性，如下面的洋紅色，例如“class”，這將使元素成為HTML和JS可以影響的組的成員。style屬性的內容在下面用紅色表示，它實際上是一種為該元素創建一次性CSS規則的方法。（CSS最好寫在站點或頁面級別，我們將在下面討論。）

此標記的結果：

此處為純段落文本。

額外學分（高級）

各種開發人員都對執行速度著迷。為此，他們將優化語言本身，以提高編寫和創建可讀行的速度。這就是所謂的句法糖衣。HTML社區已經做出了一些這樣的努力。

假設你是新手，為什麼要使用以開發人員為中心的快捷方式？通過在更簡單的標記中創建東西，您可以將注意力集中在意圖上，而不是表達式上，同時根據標準進行驗證。在簡化標記中生成的源文件要麼編譯成有效的HTML，要麼編譯器在特定行號處拋出錯誤。你可能會發現這比在“標籤湯”中尋找丟失的尖括號更有啟發性。它們都需要一箇中間軟件將它們轉換成HTML。（畢竟這是額外的學分。）

Haml（HTML抽象標記語言）需要Ruby（我們之前仔細地寫過）來編譯
Jade[刪除斷開的URL]|需要節點.js（你可以在這裡找到一個介紹）編譯
Slim需要Ruby來編譯（如上所述）

css格式

CSS使得語義內容和文檔表示可以分開存放，使得佈局、顏色和排版等風格特徵可以移植並適用於不同的文檔。當內容和視覺設計分開時，開發者在視覺設計中獲得了更多的靈活性和一致性。

你為什麼需要它

粗製濫造的網站看起來既糟糕又沒有吸引力。儘管CSS可能可讀，但由於它支持的佈局，它是視覺信息層次結構的基石。例如，下圖部分說明了當前的頂部導航菜單makeuseof.com網站，沒有應用任何CSS。

請注意，除了排版和顏色之外，未設置樣式的菜單是垂直的，因為這是瀏覽器的默認樣式。你不太可能想要重新創建1990年的互聯網，所以你需要一個健康和持續劑量的CSS知識才能真正勝任。此外，隨著iphone、平板電腦等不同尺寸和連接設備的興起，最重要的技能之一變成了“響應式設計”，即適應不同屏幕尺寸的網頁。這一切都是通過CSS實現的。

css規則剖析

CSS規則是在以下三個位置之一編寫的：a）內聯到元素中，b）通過在HTML文檔的標記中創建節，c）在單獨的樣式表中，例如樣式表.

理想情況下，樣式是在多個網頁可能引用的單獨樣式表中編寫的。通過使用相同的規則集，作者可以節省時間並創建更有序和一致的可視化表示。（內聯樣式不能幫助你形成網站的基石——甚至是頁面樣式——這就是為什麼它們最好少用以滿足特定需求的原因。）

CSS規則以一個選擇器開始，用綠色寫在下面。在這種情況下，規則的選擇器是p，對於段落：規則應用於段落元素。規則用{大括號}括起來，而不是&lt；尖括號&gt；。在這種情況下，規則使段落文本的字體正常。

CSS規則可能會變得比本文介紹的更復雜。這就是為什麼，就提交的時間而言，您可以預期CSS要比HTML花更長的時間才能掌握。

額外學分（高級）

與HTML非常相似，CSS對那些想要實現更多、更快的目標的人進行了優化。

SASS（和SCSS）需要Ruby，如上所述
更少的|需要節點.js，同上

javascript語言

當許多人想到編碼時，他們認為它是在指導計算機如何做某事。這是一個編程語言的任務，我們的前端方程的最後一個加數。

編程語言通常是按照它們在語義、祖先語言、範例和類型規則中使用的抽象級別來分類的。JavaScript拒絕簡單的分類，因為它被擴展到了許多框架中，以適應許多不同的目的。這是一個靈活的，模糊衍生自C族，多範式，鬆散類型的混合變色龍與編碼概念玩喜鵲。它要麼是非常通用的語言的一個很好的例子，要麼是許多不同類型語言的一個很差的例子。

你為什麼需要它

為什麼要學習JavaScript？正如我的同事所指出的，JavaScript有它的擁護者和反對者，特別是對於初學JavaScript的人來說。它可能是當今最流行的編程語言。雖然它沒有提供一個強大的基礎來理解編碼王國的其餘部分，但是對於學習JS和Ruby或PHP還有很好的理由。

也就是說，vanilla JS並沒有走得太遠——框架負責當今的web頁面。

流行的框架

Angular是Google的JS框架，用於GMail等web應用程序。
JQuery已經被MUO介紹過了，它支持WordPress和其他應用程序。
React由Facebook工程軍團（Facebook engineering legi***）構建，是為創建ui而設計的。

額外學分（高級）

JavaScript的複寫特性要求一些結構的強制。下面的每一個糖衣都有助於實現

咖啡腳本|需要節點.js，同上
Typescript |需要節點.js，同上

從哪裡開始學習

由於前端開發現在被廣泛認為是各類知識型員工的一項關鍵工作技能，因此您可以在e-learning課程的形式中找到許多起點。以下是我們為讀者**的精選名單：

Coursera（付費）Coursera從大學和學習機構收集在線課程。一門課程的價格從50-250美元不等，但它們宣傳高標準的知識和高能力的成果。
大會（免費）大會是付費專業教育的熱門選擇。Dash是他們的免費產品，涵蓋了HTML/CSS/JS。
MakeUseOf.com網站--Learn to Code 2017捆綁包（付費，即插即用）終身訪問10個類，涵蓋前端和後端web開發的範圍，僅需20美元。
Mozilla開發者網絡（免費）MDN是權威的，但它更多地採用了文檔的風格，而不是課堂式的教學或遊戲化的在線服務。
Treehouse（付費）另一個在線課程，這個是每月付費而不是課程。這是Karen X Cheng在其病毒式媒體帖子“如何不去設計學校就找到一份設計師的工作”中推薦的
網站設計教程由Envato Tuts+（免費和付費內容混合的同等質量）一個一次性的文章和高質量，具體的，有針對性的信息通常在一個主題多部分系列。