web前端開發入門

阿新 • • 發佈：2019-01-06

前端學習路徑

1.WEB前端快速入門

在本階段，我們需要掌握 HTML 與 CSS 基礎，當然，也包含 H5 和 C3 的新特性。這
個部分內容非常簡單，而且非常容易掌握。相信你也更願意學習這個部分，畢竟他可以讓你
最直觀的感受到前端的魅力。為了鍛鍊大家寫程式碼，可以根據你喜歡的站點去實現效果。
這一階段是非常重要的基礎階段，所謂基礎就是可能這個階段我們的學習的內容，可以
讓我們開發出來絢麗網站站點，但是功能豐富卻暫時做不到。為了完成更絢麗的站點，我
們需要掌握常見特效的實現，利用 css3 和 h5 的新特性實現動畫，佈局，雪碧圖，滑動門，
tab 切換等特效。並且掌握基礎的站點優化內容。例如 sprite 等。雖然我們還不能完成更
多互動內容，但是我們會學習到很多的知識模型和理論，而這些知識模型和理論是我們後期
工作和學習的基石。紮實的基礎有了，我們才能走的更穩更快。
注：本階段不涉及到程式設計，主要是熟悉 HTML5 各種標籤用法、CSS3 各種屬性的用法。

2.JavaScript 基礎與深入解析

JavaScript 語言非常重要，可以說學習前端本質就是學習“JavaScript”程式設計。後
面學的很多高階技術，全部都是基於JavaScript 的。
JavaScript 語言可以讓網頁元素具備動態
效果，讓體驗度更加流暢。這在目前流行
的 B/S 架構體系下，是極端重要的事情。這也是為什麼前端工程師大行其道，被廣泛需求的
根本原因。
在本階段中，我們主要學習基礎 JavaScript 語法與深入解析 JavaScript，包含 DOM 操
作同時也涵蓋了面向物件和設計模式，課程也涵蓋了相容性處理和資料解析。希望大家在本
階段可以熟練掌握這些知識點。

3.jQuery 應用與專案開發

jQuery 是一個快速、簡潔的 JavaScript 框架，
jQuery 設計的宗旨是“write Less，Do More”，即倡
導寫更少的程式碼，做更多的事情。它封裝 JavaScript
常用的功能程式碼，提供一種簡便的 JavaScript 設計模
式，優化 HTML 文件操作、事件處理、動畫設計和 Ajax
互動。在本階段，我們注重講解如何更好的應用 jQuery 以及他的設計方式，同時也包含
jQuery 擴充套件內容。

4.PHP、資料庫程式設計與設計

後端伺服器工程師需要了解前端的基本知識，同樣，前端工程師也必須瞭解伺服器端編
程的基本內容。我們可以不精通，但必須知道整體的流程。
作為一名前端開發工程師，會一門後端語言是必然的。在我們的課程中，為您選擇的是
PHP，因為 PHP 環境搭建簡單，語言與 JavaScript 相似性比較大，並且容易上手，連線資料
庫也非常方便。希望本階段的內容能幫助你快速掌握前後端互動資料。
通過學習 PHP，前端工程師也能稱為“全棧工程師”。既能做前端開發，也能做後端服
務器開發。

5. Http 服務於 Ajax 程式設計

Ajax 真的是一個非常古老的技術了，但是到現在為止，這門技術仍然被大量使用，可
以看出來，他是多麼的優秀。在本階段，我們將帶你瞭解 Ajax，並且掌握它的應用。也包
含了解 Http 相關的知識。對於站點來說，除了頁面效果能看到的就是資料了。所以，資料
的獲取合理適配尤為重要。與 Ajax 相關的也包含跨域處理，希望大家可以掌握這些核心知
識點。

6. 做一個階段專案

本階段為純專案實戰，可以將前面學到的知識融會貫通，不實戰就相當於沒有學習；主
要練習網路請求、站點佈局、網站優化等內容，同時我們需要對專案有一定的而瞭解。所
以，在老師的帶領下，可以更快的瞭解專案如何搭建，如何更優雅的實現程式碼。老師會將整
個專案的開發流程完整的羅列出來。本階段也鍛鍊 BootStrap 的應用，也包含一些常用的第
三方外掛。在實戰中展示具體應用。

7. H5 新特性與移動端開發

H5 新特性在現在來說已經不再是新內容了，專案中隨處可見，畢竟移動端不會存在兼
容性問題，而且這些新特性在移動端的體現也是非常好的。例如定位，語義化等。利用 Canvas實現更多的效果等。

在移動端中，我們主要注重移動端佈局和資源載入，佈局方向，我們主要講解百分比、
flex、REM、柵格系統來實現。資源載入採用（SPA）單頁面載入，也是目前比較火的形式。
在頁面跳轉時可以非常節省資源。混合開發也同樣是移動端的一大特點，在我們的課程中都
會詳細講解。

8. 高階框架

隨著專案的需求越來越多。傳統的開發方式已經不
能滿足我們的需求了，所以我們需要更多的支援。在本
階段中，我們講解模組化，將程式分解為模組化開發。
我們需要 Nodejs 做支撐，無論是作為構建工具中的服務
器存在，還是為我們提供資料模擬測試，都是必不可少的。
隨著 ES5 開發者體會在開發中的難言之隱，ES6 的到來解決了各種頭痛的問題。也是我們必須要掌握的一個重點。還有更多，例如多人協同開發（git 或者 svn），利用 Less 和
Sass 完成更好的 CSS 的編寫。
接下來我們介紹一下目前前端三大框架：
Angular：Angular 是一個開發平臺，他能幫我們
輕鬆的構建 Web 應用，我們將在這部分課程中講解
Angular 的宣告式模板，依賴注入，端到端的工具和一
些最佳實踐於一身。我們通過完整專案配合例項講解課
程，以便於大家更容易去理解 Angular 的應用。

React：作為前端三大框架之一，React 擁有宣告式和組
件化兩大特點，React 可以輕鬆建立互動式使用者介面。為應
用程式中的每個狀態設計簡單的檢視，當資料更改時，React
將高效地更新和正確的渲染元件。宣告式檢視使您的程式碼更
具可預測性，更易於除錯。建立好擁有各自 State(狀態) 的
元件，再將其組合構成更加複雜的 UI 介面。由於元件邏輯是用 JavaScript 而不是模板編寫
的，因此可以通過應用程式輕鬆傳遞豐富的資料，並將 State(狀態) 保留在 DOM 之外。

VUE：在借鑑了 Angular 和 React 兩
個優秀框架的基礎上，Vue 無疑是非常受
歡迎的，它使用簡單，強大的生態系統，
高效的執行速度也是我們在開發中的選
擇之一。Vue 是一套用於構建使用者介面的
漸進式框架。與其它大型框架不同的是，
Vue
的核心庫只關注檢視層，不僅易於上手，
還便於與第三方庫或既有專案整合。另一
方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應
用提供驅動。在學習真個 Vue 的過程中，我們會通過兩個企業級專案來講解他的使用，以便
於大家更好的掌握使用 Vue 熟練開發。

9. 微信小程式

作為微信推出的一種新的專案展示形式，微信小程式必然是非常受到人們重視的，而且，
目前為止，大部分推廣為主的公司都存在了微信小程式，也催生了一個崗位，微信小程式開
發工程師。可想而知，微信小程式是非常火的。

開發環境介紹

文字編輯器

Sublime text 3(最性感的編輯器)

啟動速度快(C++)
外掛眾多(python)
下載sublime
安裝版和綠色便攜版的區別

安裝板支援右鍵選單, 但是不方便遷移
綠色便攜版方便遷移, 但是不支援右鍵選單
推薦綠色便攜版, 右鍵選單解決方案(在subline根目錄下建立sublime_addright.inf將下圖程式碼貼上，儲存後右鍵安裝。)

[Version]
    Signature="$Windows NT$"[DefaultInstall]	AddReg=SublimeText3
    [SublimeText3]
    hkcr,"*\\shell\\SublimeText3",,,"用 SublimeText3 開啟"
    hkcr,"*\\shell\\SublimeText3\\command",,,"""%1%\sublime_text.exe"" ""%%1"" %%*"
    hkcr,"Directory\shell\SublimeText3",,,"用 SublimeText3 開啟"
    hkcr,"*\\shell\\SublimeText3","Icon",0x20000,"%1%\sublime_text.exe, 0"
    hkcr,"Directory\shell\SublimeText3\command",,,"""%1%\sublime_text.exe"" ""%%1"""

notpad++

IDE(整合開發環境)

IDE	介紹
WebStorm
HBuilder
Dreamweaver	不推薦使用，更適合前端設計人員

瀏覽器

谷歌和火狐都是非常優秀的瀏覽器，它們比其他瀏覽器優先之處在於：

(1)速度快，不是指開啟的速度，而是指解析頁面CSS、JS的速度

(2)支援更多新功能，比如最新的標準html5、css3的一下新特性

(3)外掛化開發，Chrome和Firefox提供了應用商店，你可以安裝自己喜歡的外掛，定製自己的瀏覽器
　　所謂的瀏覽器核心也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同，因此同一網頁在不同的核心的瀏覽器裡的渲染（顯示）效果也可能不同，這也是網頁編寫者需要在不同核心的瀏覽器中測試網頁顯示效果的原因

Trident核心代表產品InternetExplorer，又稱其為IE核心。Trident（又稱為MSHTML），是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko核心代表作品Mozilla FirefoxGecko是一套開放原始碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一，僅次於Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。
WebKit核心代表作品Safari、Chromewebkit 是一個開源專案，包含了來自KDE專案和蘋果公司的一些元件，主要用於Mac OS系統，它的特點在於原始碼結構清晰、渲染速度極快。缺點是對網頁程式碼的相容性不高，導致一些編寫不標準的網頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。
Presto核心代表作品OperaPresto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。

除錯工具

HTML文件結構

<!DOCTYPE html>                 //文件型別宣告
 <html lang="en">               //表示html開始
 <head>
     <meta charset="UTF-8" />   //宣告字元編碼
     <title>Document</title>    //設定文件標題
 </head>                        //包含文件元資料結束
 <body>                         //表示 HTML 文件內容
     
 </body>
 </html>                        //表示 HTML 文件結束

表格

表單

表單（Form）在網頁中用來給訪問者填寫資訊，從而獲得使用者資訊，使網頁具有互動功能。一般將表單設計在一個HTML文件中，當用戶填寫完資訊做提交操作後，表單的內容就從客戶端的瀏覽器傳送至伺服器上，經過伺服器上的ASP.NET或PHP等處理程式後，再將使用者所需資訊傳送回客戶端的瀏覽器上，這樣網頁就具有了互動性。

幾乎所有的商業網站都離不開表單。利用表單處理程式可以收集、分析使用者的反饋意見，做出科學、合理的決策。有了表單，網站不僅使“資訊提供者”，同時也是“資訊收集者”。表單通常用作調查表、註冊登入介面、搜尋介面等。

表單使用的標記是成對出現的，在開始標記和介紹標記之間的部分就是一個表單。

表單元素總彙

在 HTML5 的表單中，提供了各種可供使用者輸入的表單控制元件。

元素名稱	說明
form	表示 HTML 表單
input	表示用來收集使用者輸入資料的控制元件
textarea	表示可以輸入多行文字的控制元件
select	表示用來提供一組固定的選項
option	表示提供提供一個選項
optgroup	表示一組相關的 option 元素
button	表示可用來提交或重置的表單按鈕（或一般按鈕）
datalist	定義一組提供給使用者的建議值
fieldset	表示一組表單元素
legend	表示 fieldset 元素的說明性標籤
label	表示表單元素的說明標籤
output	表示計算結果

基本語法：

<form action="" name="" method=""></form>

新增按鈕

<button type="submit"></button>

解釋：元素新增一個按鈕，type 屬性有如下幾個值：

值名稱	說明
submit	表示按鈕的作用是提交表單，預設
reset	表示按鈕的作用是重置表單
button	表示按鈕為一般性按鈕，沒有任何作用

//提交表單

<button type="submit">提交</button>

//重置表單

<button type="reset">重置</button>

//普通按鈕

<button type="button">按鈕</button>

<input name="user">

解釋：元素預設情況會出現一個單行文字框，有五個屬性。

屬性名稱	說明
autofocus	讓游標聚焦在某個 input 元素上，讓使用者直接輸入
disabled	禁用 input 元素
autocomplete	單獨設定 input 元素的自動完成功能
form	讓表單外的元素和指定的表單掛鉤提交
type	input 元素的型別，內容較多，將在下節課展開講解
name	定義 input 元素的名稱，以便接收到相應的值

type

input 元素可以用來生成一個供使用者輸入資料的簡單文字框。在預設的情況下，什麼樣的資料均可以輸入。而通過不同的屬性值，可以限制輸入的內容。

屬性名稱	說明
text	一個單行文字框，預設行為
password	隱藏字元的密碼框
search	搜尋框，在某些瀏覽器鍵入內容會出現叉標記取消
submit、reset、button	生成一個提交按鈕、重置按鈕、普通按鈕
number、range	只能輸入數值的框；只能輸入在一個數值範圍的框
checkbox、radio	複選框，使用者勾選框；單選框，只能在幾個中選一個
image、color	生成一個圖片按鈕，顏色程式碼按鈕
email、tel、url	生成一個檢測電子郵件、號碼、網址的文字框
date、month、time、week、datetime、datetime-local	獲取日期和時間
hidden	生成一個隱藏控制元件
file	生成一個上傳控制元件

type值為text時

//設定文字框長度

<input type="text" size="50">

//設定文字框輸入字元長度

<input type="text" maxlength="10">

//設定文字框的初始值

<input type="text" value="初始值">

//設定文字框輸入提示

<input type="text" placeholder="請輸入內容">

//設定文字提供的建議值

<input list="footlist">
<datalist id="footlist">
    <option value="蘋果">蘋果</option>
    <option value="桔子">桔子</option>
    <option value="香蕉" label="香蕉">
    <option value="梨子">
</datalist>

//設定文字框內容為只讀，可以提交資料

<input type="text" readonly>

//設定文字框內容不可用，不可以提交資料

<input type="text" disabled>

type 為password值時

<input type="password">

解釋：當 type 值為 password 時，一般用於密碼框的輸入，所有的字元都會顯示星號。密碼框也有一些額外屬性。

type 為search時

<input type="search">

解釋：和文字框一致，在除 Firefox 瀏覽器的其他現代瀏覽器，會顯示一個叉來取消搜尋內容。額外屬性也和 text 一致。

生成下拉列表

<select name="fruit">
　　<option value="1">蘋果</option>

　　<option value="2">橘子</option>

　<option value="3">香蕉</option>
</select>

解釋：下拉列表元素至少包含一個子元素，才能形成有效的選項列表。元素包含兩個子元素專案元素和分組元素，還包含了一些額外屬性。

多行文字框

<textarea name="content">請留下您的建議！ </textarea>

//設定行高和列寬，設定插入換行符

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

輸入驗證

HTML5 對錶單提供了輸入驗證檢查方式，但這種驗證還是比較簡陋的，並且不同的瀏覽器支援的成熟度還不同。在大部分情況下，可能還是要藉助 jQuery 等前端庫來實現豐富的驗證功能和顯示效果。

//必須填寫一個值

<input type="text" required>

//限定在某一個範圍內

<input type="number" min="10" max="100">

//使用正則表示式

<input type="text" placeholder="請輸入區號+座機" required pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表單驗證

<form action="http://li.cc" novalidate>

CSS

三種方式

元素內嵌樣式

<p style="color:red;font-size:50px;">這是一段文字</p>

文件內嵌樣式

<style type="text/css"> 
p { 　　color: blue; font-size: 40px;
}

外部引用樣式

<link rel="stylesheet" type="text/css" href="style.css">

//style.css

@charset "utf-8";
p { 　　color: green; 　　font-size: 30px;
}

解釋：很多時候，大量的 HTML 頁面使用了同一個組 CSS。那麼就可以將這些 CSS 樣式儲存在一個單獨的.css 檔案中，然後通過元素去引入它即可。@charset “utf-8” 表明設定 CSS 的字元編碼，如果不寫預設就是 utf-8。如果有多個.css 檔案，可以使用 @import 匯入方式引入.css 檔案。只不過，效能不如多個連結。

層疊和繼承

所謂的樣式表層疊：指的是同一個元素通過不同方式設定樣式表產生的樣式重疊。樣式表繼承：指的是某一個被巢狀的元素得到它父元素樣式。還有一種樣式叫瀏覽器樣式，是這個元素在這個瀏覽器執行時預設附加的樣式。
1.瀏覽器樣式

<b>這個元素隱含加粗樣式</b>

<span style="font-weight:bold;">這個元素通過 style 加粗</span>

解釋：b元素就是具有加粗的隱含樣式，而span元素沒有任何隱含樣式，通過 style 屬性設定樣式。

2.樣式表層疊

樣式表層疊通過五種方式進行，如果樣式相同，那麼比如會產生衝突替換。這時，它的優先順序順序就顯的比較重要。以下優先順序從低到高：

瀏覽器樣式（元素自身攜帶的樣式）；
外部引入樣式（使用引入的樣式）；
文件內嵌樣式（使用

//元素內嵌

<p style="color:red;font-size:30px;">我將被三種方式疊加樣式</p>

//文件內嵌

<style type="text/css">

p { 　　color:blue; font-weight: bold;
}
</style>

//外部引入

@charset "utf-8";
p { 　　
    color: green; 　　
    font-style: italic;
  }

如果某一個樣式被優先順序高的給替換掉了，卻又想執行這個樣式方案，可以將這個方案標記成重要樣式（important）。
//強行設定最高優先順序

color: green !important;

3.樣式繼承

如果某一個元素並沒有設定父元素相關的樣式，那麼就會使用繼承機制將父元素的樣式整合下來。

<p style="color:red;">這是<b>HTML5</b></p>  //<b>元素繼承了<p>元素的樣式

樣式繼承只適用於元素的外觀（文字、顏色、字型等），而元素在頁面上的佈局樣式則不會被繼承。如果繼承這種樣式，就必須使用強制繼承：inherit。

//強制繼承佈局樣式

<p>這是<b>HTML5</b></p>

<style type="text/css">

p { 　　border: 1px solid red;
} 
b { 　　border : inherit;
}
</style>

CSS盒模型

所有頁面中的元素都可以看成是一個盒子，佔據著一定的頁面空間。一般來說這些被站酷的空間往往都是比單純的內容要大。換句話說，可以通過調整盒子的邊距和距離等引數，來調節盒子的位置。

一個盒子模型由content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）這四個部分組成。如下圖所示。

相對路徑絕對路徑

在學習CSS中，我們容易遇到一個極容易忽略的問題。
我們一般會建立如圖所示的檔案型別：

在css中我們會定義這樣一個選擇器

  .style{
             background:url(/images/1.jpg);
             }

但除錯時，會出現圖片無法顯示。這是因為相對路徑錯誤。

首先，我們先了解什麼是相對路徑與絕對路徑。
絕對路徑是指目錄下的絕對位置，直接到達目標位置，通常是從碟符開始的路徑。形如C:\windows\system32\cmd.exe
相對路徑則是相對當前檔案位置而言。例如上圖css檔案中，存在一個style.css的檔案，那麼當我們需要呼叫圖片時，
是以style.css檔案所處位置為起點，或者向下訪問子檔案，如/file1/file2；
或者向上往其根檔案訪問，如…/images/1.jpg。
在上面問題中，由於我們在index.html中呼叫style.css檔案，習慣性思維會導致我們認為style.css與index.css在同一目錄。
解決方案應為：

style{
     backgound:url(../images/1.jpg);
     }