瞭解前端

1. 什麼是前端

前端即網站前臺部分，執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。隨著網際網路技術的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種螢幕解析度，完美的動效設計，給使用者帶來極高的使用者體驗。

2. 前端開發概述

從軟體分類來說: (根據使用的目的不同)

• 系統軟體
• 應用軟體

從軟體資訊儲存位置的不同:

單機軟體

• 軟體和資料都儲存在客戶端
• C/S架構軟體 Client / Server
• 軟體程式和資料一部分存在客戶端,一部分存在伺服器端
• B/S架構軟體 Browser / Server
• 軟體程式和資料全部存在伺服器端

前端開發也叫作web前端開發, 是為B/S架構的軟體提供介面解決方案的.

3 核心技術

這三個是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和互動。雖然表面看起來很簡單，但這裡面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。

Html

指的是超文字標記語言 (Hyper Text Markup Language)，這個也是我們網頁最常用普通的語言了，經歷了多個版本的發展，已經發展到5.0版了, 即HTML5。

Css

級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。比如，如果想讓連結字未點選時是藍色的，當滑鼠移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力。

JavaScript

JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

3. 前端開發環境搭建

1) vscode瞭解

Visual Studio Code 是微軟推出的跨平臺編輯器。它採用經典的VS的UI佈局，功能強大，擴充套件性很強。支援多種語言開發,只需要安裝對應的外掛即可. 我們學習前端過程中主要使用它來敲程式碼. 我們前端常用的IDE(整合化開發環境)選擇很多, 例如: vscode, hbuilder, webstorm, sublime等.

vscode官網:   https://code.visualstudio.com

IDE: 整合開發環境

vscode外掛的安裝:

1.view in browser:

能夠讓我們所寫的程式碼執行在瀏覽器上.

2.Beautify:

能夠使我們寫的程式碼變得漂亮點 

3.Auto Close Tag:

自動新增 HTML 關閉標籤

4.Color Highlight:

顏色高亮

5.HTML CSS Support:

html  css 支援外掛

6.Preview on Web Server:

使我們寫的網頁可以通過本地伺服器開啟

vscode的自動儲存設定: 開啟左上角的 檔案 -----> 選擇自動儲存, 如果不選擇自動儲存,則只能夠手動儲存後程序才能執行.

2) chrome瀏覽器

前端的開發工作主要是在vscode等編輯器上進行的, 但是程式碼的除錯主要是在瀏覽器上, 所以我們給大家推薦chrome瀏覽器, 用於檢視和除錯前端程式碼.