聽到前端技術，不少朋友一定會感到有些陌生。但其實，前端，你每天都在接觸。
你正在使用的APP，你正在瀏覽的網頁，這些你能看到的介面，都屬於前端。
而前端最重要的三大技術，HTML，CSS，JavaScript，則是每一個前端開發者必須具備的技能。
掌握這些技能，你可以快速地做出一個酷炫的APP介面或者一個簡單大方的網站頁面。因此，就讓我們一起來快速學習一下這三門技術吧。
實驗介紹本實驗主要介紹一下前端的基礎知識，對比認識一下各個框架的程式碼編寫方式，並介紹我們本次技術選型的主要思路。對於前端三大技術 HTML、CSS、JavaScript，簡單的介紹了基本情況和常用語法。中間介紹了現代框架的一些情況，並通過實際的案例，用程式碼直觀的認識一下各種框架的實現方式。最後分析一下專案的技術選型。
知識點HTML、CSS、JavaScript 快速概覽前端框架概覽和選型後端選型資料庫選型Web 伺服器選型前端技術簡介本節我們簡單介紹一下前端最基礎 HTML, CSS, JavaScript 三駕馬車。雖然本課程預設的讀者為零基礎開發者，但是前端開發一定會這三種技術的運用有要求。建議抽空學習 《 Web 前端工程師路徑》 中的階段 1 甚至階段 2。這裡僅做語法介紹和基本使用的概覽。
在此之前先認識一下實驗環境。實驗環境和 VS Code 使用體驗基本一致。你可以啟動一個終端，並在其中輸入 Linux 命令。
後面的命令無特殊說明的都是在此終端命令列中輸入。大多數命令可以多開終端視窗分別執行。
那麼下面我們就快速的了解一下。
HTMLHTML 全稱超文字標記語言，幾乎是從全球資訊網和瀏覽器產生伊始就存在的。主要用於結構化資訊來方便瀏覽器展示。
以標籤對作為主要特徵，如<p>這是一個段落</p>。這些標籤會被瀏覽器解析成不同的模組，比如 p 標籤就是一個段落，img 標籤就是一個圖片，a 標籤就是一個超連結，標籤名不區分大小寫。
立刻就來嘗試一下吧。首先通過命令列新建一個 demo 目錄：
mkdir demo然後命令列進入 demo 目錄：
新建一個 hello.html 檔案，可以在實驗環境左邊的瀏覽框內在 demo 上右鍵選擇 New File 然後命名為 hello.html；或者也可在命令列終端輸入 touch hello.html，同樣是新建檔案。
在其中輸入以下內容：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>標題</title> </head> <body> 正文 </body></html>然後右擊檔案選擇 Open With → Preview。
看到了嗎？其實我們就是新建了一個 .html 字尾的文字檔案，然後瀏覽器就可以將其中的內容展示出來。你也可以在自己的桌面上新建一個，然後使用瀏覽器開啟看看效果。
這裡巢狀程式碼的縮排格式是為了美觀和可讀性，並無嚴格要求。
head 標籤中是一些暫時無需用到的頭部資訊，渲染的主體是 body 標籤。下面我們修改 body 標籤裡面的內容，填入一些常用標籤來直觀感受一下。
<body> <h1>頁面標題</h1> <div>一個塊容器</div> <div>又一個塊容器</div> <p>這裡是段落了，間距變大</p> <div>一個塊容器</div> <div> <div> 多層巢狀： <div>內部第一個</div> <div>內部第二個</div> </div> </div></body>儲存之後切換到瀏覽標籤看一看，有沒有感覺被忽悠了？巢狀沒巢狀根本沒體現出來，就像 Word 裡排了一下版，按了幾個回車。
因為我們沒有對顯示樣式進行修改，那是 CSS 的事。HTML 主要管內容的組織結構。
這裡有一點針對學習的小建議，本課程中給到的全部程式碼請手動輸入，忘記複製和貼上快捷鍵。
而且最好不要機械的一個字元一個字元照著抄，儘量看過一行或一小段程式碼之後，靠短暫的印象去輸出，別怕出錯，只有過腦子並輸出實踐，才是最快掌握一項技能的捷徑。
以上兩句話是本課程中最有價值內容之一。
下面我們接著修改剛才的程式碼，再給 body 中新增幾個常用標籤。每次修改和儲存之後記得到預覽頁看看樣式的變化。
最後的連結標籤 a 和圖片標籤 img 出現了標籤屬性，屬性為 attr="value" 格式，可以給標籤增加更豐富的資訊。
同時 img 標籤還是一個單標籤，不需要在後面新增 </img> 配合使用。
至此對 HTML 的簡要介紹告一段落。
網際網路上看到的各種五彩繽紛網頁都是由這些 HTML 組成的，但是為什麼我們寫的這麼難看？下一節我們就要學習一下如何用 CSS 美化頁面。
CSSCSS 全稱層疊樣式表，是專門用來修飾 HTML 樣式的一種語言。我們修改一下上節的 hello.html 檔案來直觀感受一下。
內部程式碼塊引入
在 head 標籤內部增加以下 style 程式碼塊：
<head> <meta charset="UTF-8" /> <title>標題</title> <style type="text/css"> div { border: 1px solid blue; padding: 2px; margin: 10px; } </style></head>這是再切換到預覽頁，發現沒那麼平鋪直敘了。
這就是 CSS 的第一種引入方式，HTML 內建程式碼塊。
大括號外面的 div 是標籤選擇器，這裡選中了本頁面中的所有 div 元素。大括號裡面是屬性名與賦值，屬性名都是固定的關鍵字，並已規定好了值的型別和可選範圍。
讀程式碼也就大概知道了，我們將 div 的邊框設定為 1 畫素寬、固體（單線型）、藍色，填充（內邊距）2 畫素，邊緣空白（外邊距）10 畫素。現在可以練習調整一下各個數字，預覽看看發生了什麼？
再說點題外話，懂一些英文對程式設計師來說非常必要，除了可以憑感覺就讀懂沒學過的程式碼，還可以在面向 Google 程式設計、面向 Stack Overflow 程式設計、面向 Github Issues 程式設計時遊刃有餘。
外部檔案引入
然後我們再試一下外部檔案引入，在 hello.html 的同級目錄新建 hello.css，輸入以下內容儲存：
div { color: green; border: 2px dotted red;}然後修改 hello.html，在 style 標籤後面增加一行 link 標籤，新增引入型別和地址：
同樣是 div 選擇器，為什麼邊框的樣式被覆蓋了呢？注意 CSS 在同樣條件下會後面程式碼覆蓋前面，可以嘗試交換 link 標籤和 style 標籤塊的順序看看。
行間樣式
最後一種叫行間樣式，這個結構更簡單。修改 hello.html 中的 <div>內部第一個</div> 為
<div style="margin: 60px 0 10px 30px ;color:purple;">內部第一個</div>
樣式覆蓋前兩種方式了，因為行間樣式的優先順序較高。這裡涉及到選擇器權重，先給一個簡單公式了解一下。
!important > 行間樣式 > ID > class | 偽類 | 屬性選擇 > 標籤 > 繼承 | 萬用字元。
多個選擇器作用時權重相加。這裡算 CSS 裡有點複雜的部分，暫時不展開。
這裡還有個小知識點是內外邊距 margin 和 padding 接受的完整的值是四個，順序固定為“上 右 下 左”。如果省略引數則從末尾計算對向合併。比如：
margin:40px 20px 50px; 三個引數時，左右同為 20px。margin:40px 20px; 兩個引數時 上下同為 40px, 左右同為 20px。margin:40px; 一個引數時呢？請自行嘗試理解。CSS 先講這麼多，雖然沒有把我們的頁面變多好看，但最起碼知道努力的方向了。
JavaScript製作 JavaScript 的快速入門簡直非常傷腦筋。比起前兩種技術 HTML 和 CSS，這是貨真價實的程式語言了。
也是我們後面要用到的 Vue.js 和 Node.js 中的根基，一下子又很難講很多，所以還是希望同學們能重視起來系統學習一下，最起碼讀到後面的程式碼時不至於陷入“這是啥這又是啥”的窘境。
來段程式碼直觀認知一下，還是先內部程式碼塊引入。
在 hello.html 的 head 標籤內增加一個程式碼塊：
<h1 onclick="showMSG(message)">頁面標題</h1>儲存預覽，點選“頁面標題”，會彈出提示框。
JavaScript 程式碼載入之後就會執行，不存在編譯階段。行末的分號絕大多數時候可以省略。
我們先定義了一個變數 message，並賦值為“字串提示”。定義變數關鍵字原是 var，ES6 新增關鍵字 let 有更清晰的作用域，可替代使用。
學習 JavaScript 經常會碰到 ES6、ES7 之類的名詞，實際上是 ECMAScript 標準的版本號的意思。可以簡單理解為新版標準為 JavaScript 新增特定新特性。
然後我們定義了一個函式 showMSG，並新增一個形參 msg。在函式體內部呼叫瀏覽器彈框方法，顯示 msg 的值。function 是定義函式的關鍵字，暫時先把它當做一個功能封閉的盒子，當函式呼叫時，執行函式體內的程式碼。
呼叫部分是先給 h1 標籤添加了 onclick 點選事件，被點選時觸發 showMSG(message)，也就是把 message 傳給了 msg。
之後再試一下呼叫外部 js 檔案，新建 demo.js 檔案，寫入下面內容並儲存。
message = "修改一下字串";然後修改 hello.html 檔案，在 script 程式碼塊後面增加一行：
<script src="./demo.js"></script>這次儲存預覽，點選“頁面標題”，可以看到彈窗的文字變了。這個演示了 script 程式碼塊在頁面可以同時存在多個，也是順序呼叫，而且互相之間可以直接訪問。檔案命名也沒有要求，希望不會逼死強迫症。
JavaScript 就是為什麼網頁可以做那麼多互動的源頭了。掌握起來任重道遠。
課程會提供完整的虛擬機器環境，手把手教大家如何從頭構建實現一個前後端分離的內容釋出系統，包括了前端頁面、後端服務、資料庫等。