<1>Web前端Web基礎知識
一、前端工程師的角色
一個網站的建設需要以下角色：
①策劃人員：方案
②美工/UI設計師：設計圖 （.psd .rp）
③前端工程師：靜態網頁
④後端工程師：獲取數據 ( Java PHP .NET)
二、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。