前端開發是創建 Web 頁面或 app 等前端界面呈現給用戶的程序，通過 HTML，CSS 及 JavaScript 以及衍生出來的各種技術、框架、解決方案，來實作互聯網產品的用戶界面互動，它從網頁制作演變而來，名稱上有很明顯的時代特征，在互聯網的演化行程中，網頁制作是 Web1.0 時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主，隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，互動效果顯著，功能更加強大，

移動互聯網帶來了大量高性能的移動終端設備以及快速的無線網路、HTML5、node.js 的廣泛應用，各類框架類別庫層出不窮，

隨著時代的發展，前端開發也越來越受到大家的歡迎，其中不乏轉行來做前端開發的，通過與這些人的接觸發現，很多人在入行前或多或少的存在顧慮，那么轉行來做前端到底可以走多遠，轉行來做前端會不會為時已晚？我們可以看看這個視頻：Web前端技術精講：轉行做編程必看視頻

在開始我們的教程之前，先讓我們來了解一下 Web 前端技術，看一個視頻讓我們快速的了解web 開發：Web前端技術精講：零基礎學習web前端必看

根據我長期的總結并結合時下的技術堆疊，我把前端的學習大致分為如下五個階段，以及羅列了各個階段需要掌握的知識點，

階段一

一、常用開發工具介紹

在學習前端之前，我們先把工具準備好，沒有金剛鉆怎么攬瓷器活？所以準備了如下的一些開發工具，這里推薦使用 VSCode，
1. WebStorm
2. Dreamweaver
3. HbuilderX
4. Sublime Text
5. Vim（高手使用較多）
6. VSCode

思維導圖

二、HTML+CSS 部分

HTML

掌握 HTML 是網頁的核心，是一種制作萬維網頁面的標準語言，是萬維網瀏覽器使用的一種語言，它消除了不同計算機之間資訊交流的障礙，因此，它是網路上應用最為廣泛的語言，也是構成網頁檔案的主要語言，學好 HTML 是成為 Web 開發人員的基本條件，

HTML 是一種標記語言，能夠實作 Web 頁面并在瀏覽器中顯示，

HTML 需要掌握的知識點如下所示：

1. 屬性
2. 事件
3. 標簽
4. 字符集

CSS

學好 CSS 是網頁外觀的重要一點，CSS 可以幫助把網頁外觀做得更加美觀，CSS 需要我們學習如下部分：

1. CSS基礎教程

2. CSS樣式

• 背景
• 文本
• 字體
• 鏈接
• 串列
• 表格
• 輪廓

3. CSS框模型

• 內邊距
• 邊框
• 外邊距

4. CSS定位

• 相對定位
• 絕對定位
• 浮動

5. CSS選擇器

• 元素選擇器
• 選擇器分組
• 類選擇器
• ID選擇器
• 屬性選擇器
• 后代選擇器
• 子元素選擇器
• 相鄰兄弟選擇器
• 偽類
• 偽元素

6. CSS高級

• 對齊
• 尺寸
• 分類
• 導航欄
• 圖片庫
• 圖片透明
• 盒子模型
• 媒體布局

 web 前端開發特輯

Web前端技術特輯：HTML樣式

思維導圖

三、HTML5+CSS3

HTML5

HTML5 作為 HTML 的最新版本，引入了多項新技術，大大增強了對于應用的支持能力，使得Web技術不再局限于呈現網頁內容，

1. HTML5視頻
2. HTML5音頻
3. HTML5拖放
4. HTML5畫布
5. HTML5 SVG
6. HTML5地理定位
7. HTML5 Web存盤
8. HTML5 應用快取
9. HTML5表單

HTML5 可以使開發者的作業大大簡化，理論上單次開發就可以在不同平臺借助瀏覽器運行，降低開發的成本，這也是產業界普遍認為 HTML5 技術的主要優點之一，

CSS3

CSS3使用了層疊樣式表技術，可以對網頁布局、字體、顏色、背景燈效果做出控制，css3作為css的進階版，拆分和增加了盒子模型、串列模塊、語言模塊 、背景邊框 、文字特效 、多欄布局等等，

CSS3的改變有很多，增加了文字特效，豐富了下劃線樣式，加入了圈重點的功能，在邊框方面，有了更多的靈活性，可以更加輕松地操控漸變效果和動態效果等等，在文字效果方面，特意增加了投影，

CSS3在兼容上做了很大的功夫，并且網路瀏覽器也還將繼續支持CSS2，因此原來的代碼不需要做太多的改變，只會變得更加地輕松，

1. CSS3邊框
2. CSS3背景
3. CSS3文本效果
4. CSS3字體
5. CSS3 2D轉換
6. CSS3 3D 轉換
7. CSS3 過渡
8. CSS3 影片
9. CSS3 多列

思維導圖

四、JavaScript

JavaScript 是 web 開發者必學的三種語言之一，這里我們需要區別 JavaScript 和 Java 他們是完全不同的語言，不論是概念還是設計，javascript 部分需要我們學習的知識點如下所示：

1. 認識JavaScript
2. 基本語法
3. 變數
4. 資料型別

• 字串
• 數字
• 布爾
• 陣列
• 物件
• Null
• Undefined

5. 函式

• 內置函式
• 自定義哈數

6. 運算子

7. 流程控制

8. DOM物件

• String
• Array
• Date
• Boolean
• Math
• Number

9. BOM物件

• WIndow
• Navigator
• Screen
• History
• Location

10. 綜合實體

思維導圖

Web前端技術特輯：BFC講解

階段二

一、JavaScript進階

JS 進階主要學習建構式，原型物件，繼承的多種實作方式，原型鏈，函式的本質，閉包，沙箱等，

二、DOM+BOM綜合演練

三、網頁特效

四、 Jquery學習

1. 基礎語法
2. 選擇器

• 基本選擇器
• 層次選擇器
• 過濾選擇器
• 表單選擇器

3. DOM操作

• 查找節點
• 創建節點
• 插入節點
• 洗掉節點
• 復制節點
• 替換節點
• 包裹節點
• 屬性操作
• 樣式操作

4. 事件

• 事件系結
• 事件冒泡

5. 影片

• show、hide
• fadeIn、fadeOut
• slideUp、slideDown
• 自定義影片animate
• 影片回呼以及停止影片

6. 常用工具

• 瀏覽器及特性檢測
• 陣列和物件操作
• Layer UI，主要學習柵格布局，圖示，影片，按鈕，表單，導航，選項卡，進度條，面板，表格，時間線等

7. Ajax

8. Jquery插件撰寫

思維導圖

五、ES6進階

六、Bootstrap

七、其他

1. animate.css學習（擴展）
2. PS切圖學習

思維導圖

階段三

一、Vue

1. Vue基礎

• 模版語法
• 計算屬性偵聽器
• Class與Style系結
• 條件/串列渲染
• 事件處理
• 表單輸入系結
• 組件基礎、注冊
• Prop
• 自定義事件

2. Vuex

• State
• Getter
• Mutation
• Action
• Module

3. Vue-router

• 認識路由
• 動態路由
• 嵌套路由
• 編程式導航
• 路由組件傳參

4. axios

• 認識axios
• 全域配置
• 發送POST、GET請求等

思維導圖

二、React

1. 認識React
2. React元素渲染
3. JSX
4. 組件
5. State
6. Props
7. 事件處理
8. 條件渲染
9. 串列
10. 組件API
11. 組件宣告周期

思維導圖

三、Node

1. 基礎

• console（控制臺）
• crypto（加密）
• debugger（除錯器）
• fs（檔案系統）
• http（網路）
• os（作業系統）
• path（路徑）

2. 高級

• NPM介紹及使用
• MVC模式簡介
• Express框架學習
• 鏈接Mysql
• 鏈接Redis
• 專案實戰

思維導圖

四、webpack

1. 概念

主要講什么是入口，出口，loader，插件等

2. 入口

• 單個入口語法
• 物件語法
• 常見場景

3. 輸出

• 用法
• 多個入口起點
• 高級進階

4. 模式

• development
• production

5. loader

• 實體
• 配置

6. 插件

• 剖析
• 用法
• 配置

7. 配置

• 基本配置
• 多個Target
• 使用其他語言配置

8. 模塊

思維導圖

階段四（擴展部分，了解即可）

一、Mysql

1. 階段一

• 認識mysql
• 安裝mysql
• 創建資料庫、資料表
• 學習常用的SQL命令，完成增刪查改

2. 階段二

• 學習Mysql關聯查詢，子查詢等
• 學習Mysql常用函式
• 學習Mysql分組、分頁、排序等

3. 階段三

• 學習Mysql高級查詢
• 了解存盤程序，自定義函式等
• 了解Mysql組態檔

二、Redis

1. 認識Redis
2. 學習redis的資料型別
3. redis常用操作
4. redis事務

思維導圖

階段五

一、專案管理篇

1. SVN使用

• 認識svn
• 安裝
• 生命周期
• 啟動模式
• 創建版本庫
• 檢出操作
• 解決沖突
• 提交操作
• 版本回退
• 查看歷史
• 分支
• 標簽

2. GIT使用

• 認識git
• 安裝配置
• 作業流程
• 作業區、暫存區和版本庫
• 創建倉庫
• 基本操作
• 分支管理
• 查看歷史等
• 標簽
• github

二、擴展部分

小程式

1. 了解小程式開發流程

2. 視圖容器

• view
• scroll-view
• movable-view
• cover-view
• cover-image

3. 基礎內容

• icon
• text
• rich-text
• progress

4. 表單組件

• button
• checkbox
• form
• input
• label
• picker
• picker-view
• radio
• slider
• switch
• textarea

5. 導航

• navigator
• function-page-navigator

6. 媒體組件

• audio
• image
• video
• camera
• live-player
• live-pusher

7. 地圖（map）

8. 畫布（canvas）

9. 開放能力

• open-data
• web-view
• ad
• official-account

apicloud（移動app開發）

1. 認識apicloud

2. 開發工具講解

3. 端API

• API物件
• 設備訪問
• 功能擴展
• 界面布局
• 導航選單
• 小程式模塊
• 云服務對接

4. 云API

• 資料云API
• 統計云API
• 推送云API
• 云API SDK

5. 小程式模塊使用

三、常用框架使用篇

1. iview （vue框架）
2. element ui （vue框架）
3. echarts (百度圖示庫)
4. 阿里巴巴開源圖示使用
5. Sass學習
6. Swiper學習
7. zoom.js 學習

四、綜合專案實戰

教務管理系統（node+express+mysql）實作

思維導圖

標籤：Html/Css

上一篇：SAP系統 進口商品條碼前導0問題

下一篇：vue axios簡單封裝