一、什么是Web？

Web常見的就是網(wǎng)站、網(wǎng)頁(yè)，有三種常見形式：超文本、超媒體、超文本傳輸協(xié)議。而Web開發(fā)就是網(wǎng)站開發(fā)，網(wǎng)站由很多的網(wǎng)頁(yè)組成，網(wǎng)頁(yè)又由一行行的標(biāo)簽代碼、數(shù)據(jù)代碼組成。Web開發(fā)就是把這些代碼編寫組成瀏覽器能認(rèn)識(shí)的標(biāo)記，經(jīng)瀏覽器接受后普通人能看到的過(guò)程。

Web前端主要負(fù)責(zé)前端瀏覽器展示的效果，Web前端頁(yè)面展示的時(shí)候是需要?jiǎng)討B(tài)的數(shù)據(jù)的，這些數(shù)據(jù)是后臺(tái)java程序或者C++程序提供的。這種系統(tǒng)架構(gòu)被稱為B/S結(jié)構(gòu)系統(tǒng)（B:Browser瀏覽器，S:Server服務(wù)器）

1. web相關(guān)名詞介紹

（1）www就是world wide web的簡(jiǎn)稱，我們稱為全球廣域網(wǎng)，也稱為萬(wàn)維網(wǎng)；

（2）web是一種基于http協(xié)議的、全球性的、動(dòng)態(tài)的跨平臺(tái)分布式圖形信息系統(tǒng)，我們最常見的就是網(wǎng)站服務(wù)

（3）網(wǎng)站就是由多個(gè)網(wǎng)頁(yè)組合而成的集合；

（4）網(wǎng)頁(yè)就是通過(guò)瀏覽器展示，包含圖片、文字、鏈接、聲音…..等內(nèi)容的一種html文件；

（5）網(wǎng)頁(yè)在瀏覽器上進(jìn)行解析和展示；

2. Web應(yīng)用

所謂的Web應(yīng)用特指我們平時(shí)用瀏覽器打開的一些應(yīng)用，也就是網(wǎng)站。如微博、朋友圈、知乎等等。Web應(yīng)用一定是以“資源組”的形式存在的。

以微博這個(gè)Web應(yīng)用為例，它是有很多的場(chǎng)景組成的，我們所熟知的場(chǎng)景有：

（1）登錄注冊(cè)場(chǎng)景；

（2）微博瀏覽場(chǎng)景；

（3）發(fā)布微博場(chǎng)景；

（4）個(gè)人中心頁(yè)面；

在這些場(chǎng)景中，每個(gè)場(chǎng)景一般都有自己的主頁(yè)面，一般就是一個(gè)HTML頁(yè)面資源；在這些場(chǎng)景下是一個(gè)個(gè)具體的功能區(qū)，一般來(lái)說(shuō)場(chǎng)景確定下來(lái)之后功能區(qū)只有一到兩個(gè)，要實(shí)現(xiàn)一個(gè)功能，就轉(zhuǎn)變成了要完成一系列動(dòng)作，如注冊(cè)、登錄、閱覽，完成一個(gè)動(dòng)作又需要幾個(gè)資源相互配合完成，HTML只是內(nèi)容數(shù)據(jù)化的一種展示，資源中的數(shù)據(jù)在我們學(xué)習(xí)階段主要來(lái)自數(shù)據(jù)庫(kù)。

我們先通過(guò)數(shù)據(jù)庫(kù)拿到數(shù)據(jù)，然后通過(guò)HTML把拿到的資源標(biāo)記為結(jié)構(gòu)化的內(nèi)容，進(jìn)而形成完整的資源，把幾個(gè)資源相互結(jié)合就形成了一個(gè)功能，幾個(gè)功能進(jìn)行相互拼接、組織就形成了一個(gè)完整的Web應(yīng)用或者系統(tǒng)。

3. Web服務(wù)器

???? 有客戶端就必定會(huì)有服務(wù)器，因?yàn)閃eb服務(wù)器采用HTTP協(xié)議，故我們很多時(shí)候又把它叫做HTTP服務(wù)器（HTTP Sever）。例如：Apache,Tomcat,Netty等。

我們的瀏覽器會(huì)通過(guò)網(wǎng)絡(luò)和我們的客戶端進(jìn)行通信，瀏覽器和客戶端都是別人實(shí)現(xiàn)好的，我們的任務(wù)主要是給客戶端實(shí)現(xiàn)一些外掛的素材（又叫做資源），所以，服務(wù)器經(jīng)過(guò)客戶端訪問(wèn)時(shí)實(shí)際訪問(wèn)的是我們提供的資源，如圖。

????瀏覽器和服務(wù)器之間進(jìn)行通信時(shí)有一套標(biāo)準(zhǔn)，這套標(biāo)準(zhǔn)叫做HTTP協(xié)議，全稱是（Hyper(超級(jí)) Text(文本) Transfer(傳輸) Protocol(協(xié)議)）。通信時(shí)瀏覽器發(fā)出請(qǐng)求，服務(wù)器給與應(yīng)答。

4. 資源

資源，我們暫時(shí)可以理解成一組文件，而所謂的開發(fā)Web應(yīng)用，就是開發(fā)一組資源（表現(xiàn)為一組文件），為了更好的理解，你可以把瀏覽器想象成一個(gè)商場(chǎng)，把我們開發(fā)Web應(yīng)用想象成在這個(gè)商場(chǎng)里開個(gè)店，開店前我們需要準(zhǔn)備好要賣的物品，這就相當(dāng)于資源。一個(gè)瀏覽器里可以有多個(gè)Web應(yīng)用，而每一個(gè)Web應(yīng)用又有一系列的資源。我們開發(fā)的資源需要經(jīng)過(guò)客戶端才能對(duì)外提供服務(wù)，用戶代表的是瀏覽器，瀏覽器是直接和Web服務(wù)器對(duì)接的，我們會(huì)把相應(yīng)的資源掛靠到Web服務(wù)器上，這樣我們的Web應(yīng)用就正式工作起來(lái)了。

5. Web標(biāo)準(zhǔn)構(gòu)成

構(gòu)成：主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個(gè)方面。

（1）結(jié)構(gòu)標(biāo)準(zhǔn)：結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類，咱們主要學(xué)的是HTML。 對(duì)于網(wǎng)頁(yè)來(lái)說(shuō)最重要的一部分

（2）表現(xiàn)標(biāo)準(zhǔn)：表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS

（3）行為標(biāo)準(zhǔn)：行為是指網(wǎng)頁(yè)模型的定義及交互的編寫，咱們主要學(xué)的是 JavasSript（JavaScript 是屬于 HTML 和 Web的編程語(yǔ)言）

理想狀態(tài)我們的源碼： .HTML .css .js

二、HTML基本介紹

1. 基本定義：超文本標(biāo)記語(yǔ)言，超是超鏈接；

2. 目前最流行的版本就是HTML5.0，W3C組織負(fù)責(zé)制定html語(yǔ)言的標(biāo)準(zhǔn)；