1. 程式人生 > >Web前端基礎知識入門學習

Web前端基礎知識入門學習

一、前端工程師的角色

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

①策劃人員:方案

②美工/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。