一、前端工程師的角色

一個網站的建設需要以下角色：

①策劃人員：方案

②美工/UI設計師：設計圖 （.psd  .rp）

③前端工程師：靜態網頁

④後端工程師：獲取資料 ( Java   PHP  .NET)

我還是要推薦下我自己建立的web前端資料分享群606721798，這是web前端學習交流的地方，不管你是小白還是大牛，小編都歡迎，不定期分享乾貨，包括我整理的一份適合零基礎學習web前端的資料和入門教程。

二、Web的基礎知識

1、Web（全球資訊網）與Internet（因特網）

①Internet簡介：定義、主要服務、基本實現技術

②Web與Internet關係

Web是Internet提供的服務。

③Web簡介：全球資訊網

2、Web的工作原理

①Web的工作原理

②Web的組成部分

  1)Web伺服器：監聽客戶端連線請求、接收請求，返回響應內容。

產品：TOMCAT;IIS;APACHE

Apache Httpd市場佔有率最高(>60%) ，開源免費 。

一般稱的Apache伺服器預設指Apache Httpd伺服器。

  2)Web客戶端：（目前）瀏覽器和移動裝置的APP（資料傳輸，HTML5是趨勢）

五個常用瀏覽器：IEtester（可以執行各種IE瀏覽器），Google Chrome（近Safari），（Firefox）火狐，（Opera）歐朋，Safari 。

國產的瀏覽器沒有自己的核心。

  3)HTTP協議：定義Web伺服器和客戶端的通訊細節

3、Web的相關技術

①常見的伺服器端技術（執行在伺服器上）：

JSP (Java)/PHP/ASPX

②常見的客戶端技術（執行在瀏覽器）：

HTML/ CSS /JavaScript/SWF 前端學的主要是客戶端技術。

☆補充一：怎麼安裝和使用Apache伺服器。

TIPS：命令列程式視窗內按鍵盤的“上鍵”可以再調出來一遍命令。

到一定層次很多軟體都是英文的。

（1）下載：http://httpd.apache.org

（2）安裝：

①必須填寫Network Domain（域名）；Server Name（伺服器名字）和 管理員郵箱地址  

②埠號預設80 ---伺服器服務程序的地址。Http伺服器埠（port）號為80.

③一般選典型安裝

④伺服器安裝路徑:不要有中文和空格，有時候會出現莫名其妙的問題。一般直接安裝在C盤下C:\Apache 2.2\ 

安裝好後，要準備就緒。

（3）啟動Httpd伺服器：

兩種途徑：

①服務控制程式（可以看見的）

②作業系統的服務控制檯【滑鼠操作（計算機--右鍵--管理--服務）或快捷鍵windows+r--services.msc】

③直接CMD命令啟動：net start Apache2.2（直接安裝在C盤是有原因的，簡化命令列）

【停止：net stop Apache2.2 重啟：net restart Apache 2.2】

如何確定伺服器真正開啟？

因為伺服器是後臺程式，執行在作業系統底層的，使用者看不見。

伺服器開啟且佔用了其埠號，才真正開啟。

可以檢視系統開啟的埠號，確認Httpd是否已經啟動。

netstat -anb 確認80埠是Httpd伺服器程序佔用，迅雷等埠可能會佔用。如被佔用則關掉其他程式（程序）。才能真正啟用伺服器。

（4）訪問伺服器

<1>訪問伺服器的兩種途徑：

①通過Windows IP配置的 IP可以訪問任何人（包括自己）的伺服器（聯網的情況下）；

②127.0.0.1當前計算機（本機）的IP地址，僅限訪問自己的本地伺服器。

兩者區別：

127.0.0.1僅在當前計算機使用，一般是一直可以用的。任何時候聯網或斷網都可以訪問自己的伺服器；但是常規 Windows IP配置的 IP則僅限在聯網的情況下訪問自己或別人的伺服器。

<2>訪問伺服器下的網頁

①訪問方式：路徑直接127.0.0.1或IP則顯示預設網頁index.html

（只有訪問index.html文件不用寫檔名，其他在IP地址後必須寫檔名。）

②伺服器下的網頁不能隨便放在任何路徑下；網頁必須放在Apache Httpd伺服器能夠識別的路徑下。

網頁文件儲存在htdocs資料夾裡才能訪問到（C→Apache2.2 →htdocs）

☆補充二：瀏覽器控制檯。

前端工程師必須要熟練使用瀏覽器控制檯！

試一下標籤：<marquee>hello world!</marquee>---跑馬燈的效果

****右鍵單擊----審查元素----瀏覽器控制檯---糾錯調錯用的。

（1）瀏覽器控制檯---主介面選單和Elements （元素）介面（見圖1）： 

Elements 元素【文件內容、樣式css、盒子模型解決糾錯】

Network 網路

Sources  原始碼

Console 控制檯

Timeline 時間線

Profiles 歸檔

Resources 資源

Security 安全

Audits 審計

（2）瀏覽器控制檯學習---Network（網路）介面（見圖2） 

Method 方法  GET 方法（此圖沒有）

Status 狀態  304響應

Type 文件型別

Initiator 發起者

Size 大小；尺寸

Time 時間（延時）

Timeline 時間線【請求傳送、等待、內容下載】

Timeline是做web頁面的前端優化必須懂的！我們的網頁傳送了多少個請求和哪個請求最耗時使我們的癥結所在。我們對Web頁面進行了前端優化的目的就是，縮短請求時間，使Web網頁開啟時間變短。

（3）瀏覽器操作檯-network-點選網頁名（見圖3）

Headers  標題

Preview 預覽

Response 響應

Timeing 計時 

☆補充三：直接本地開啟檔案html檔案和通過IP地址訪問伺服器開啟html檔案的區別。

（1）首先路徑顯示有區別

（2）是否符合Web模型的區別。

通過IP地址訪問伺服器檢視頁面：通過HTTP協議，網路瀏覽器傳送一個請求，得到伺服器的響應頁面是這樣的。包含了web的三要素。

直接本地雙擊開啟檔案html文件檢視頁面：沒有經過伺服器，沒有遵循http協議，不符合web模型。雖然簡單頁面兩者效果一樣，但是複雜頁面就不一樣了。這樣的訪問沒有經過頁伺服器，伺服器端會對文件加以處理，少了處理訪問的效果就有可能與使用者不一樣，所以訪問時儘量的架伺服器，把網頁放在htdocs。