程大綱

• 什么是瀏覽器

• 什么是服務器

• 瀏覽器請求數據的過程

• 什么是URL

• 什么是HTTP協議

• 其它知識儲備

什么是瀏覽器

• 瀏覽器是安裝在電腦里面的一個軟件， 能夠讓將網頁內容呈現給用戶查看，并讓用戶與網頁交互的一種軟件。 就好比QQ一樣都是安裝在電腦里面的一個軟件， 只不過功能不同而已

• 常見主流瀏覽器

• 瀏覽器市場份額-國內統計

• 瀏覽器市場份額-國外統計

• 不同的瀏覽器有不同的瀏覽器內核， 瀏覽器內核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容，從而導致了瀏覽器兼容性問題出現

• IE內核 Trident

• 谷歌內核 WebKit / Blink

• 火狐內核 Gecko

• Safarri內核 WebKit

• 歐朋內核 Presto

• 前期上課以后面谷歌瀏覽器為主，后面將專門詳細介紹瀏覽器兼容問題

什么是服務器

• 服務器也是電腦，只不過是比我們的電腦配置更高的電腦，并且24小時不斷電，不關機的計算機

• 服務器是專門用于存儲數據電腦， 訪問者可以訪問服務器獲得服務器上存儲的資源

• 服務器一旦關機，訪問者就無法訪問

<h2 id="title3">訪問網頁原理</h2>

<h3 id="title4">瀏覽器請求數據的原理</h3>

• 我們是如何通過瀏覽器查看網頁上的內容的？

• 1.打開IE緩存文件夾

• • Jonathan_Lee為個人電腦用戶名名稱

• 2.清空該文件夾

• 3.用IE打開網頁

• 4.發現文件夾下多了很多文件（.html、.css、.js、.png等）， 仔細觀察不難發現其實這些文件都是被訪問網頁上的內容

• 5.結論

• 訪問網頁時是有真實的、物理的文件傳輸的

• 網頁不是一個文件，而是一堆文件組成的

• 我們之所以平常感覺第二次訪問比第一次訪問快的原因就是，第一次訪問時已經將所有文件緩存到了本地

瀏覽器請求數據的過程

• 1.按下回車時瀏覽器根據輸入的URL地址發送請求報文

• 2.服務器接收到請求報文，會對請求報文進行處理

• 3.服務器將處理完的結果通過響應報文返回給瀏覽器

• 4.瀏覽器解析服務器返回的結果，將結果顯示出來

• 請求過程驗證

• 3.1請求報文

• 一個HTTP請求報文由請求行（request line）、請求頭部（header）、空行和請求數據4個部分

• 3.2響應報文

• 一個HTTP響應報文由響應行、響應頭、響應體組成

• 1.利用chome瀏覽器打開一個網頁

• 2.打開開發人員工具

• 3.打開Network查看請求報文和響應報文

什么是URL

• 1.我們在瀏覽器的地址欄中輸入的地址其實就是URL

• 2.URL格式：

• 127.0.0.1/index.html （瀏覽器會自動補全http:和：80）

• http://127.0.0.1/index.html （瀏覽器會自動補全：80）

• http://127.0.0.1:80/index.html （完整格式）

• 協議類型://ip地址:端口號/資源路徑/資源名稱

• 3.URL拆分

• 網絡協議類型 http://

• 服務器IP地址 127.0.0.1

• 服務器端口號 :80

• 資源路徑 網頁在服務器上的路徑

• 資源名稱 index.html

• 4.URL拆分后每一部分的作用

• 4.1服務器IP地址 和 服務器端口號它們兩的作用：

• 告訴瀏覽器要去什么地方才能找到對應的服務器， 也就是告訴瀏覽器服務器的詳細地址

• 服務器IP地址相當于現實生活中的地址； 例如：廣州市天河區棠安苑

• 服務器端口號相當于現實生活中的門牌號碼； 例如： 9棟909室

• 那么如果將地址和門牌號碼結合在一起， 就是我的詳細地址

• 4.2資源名稱它的作用：

• 告訴服務器我需要獲取哪一個文件

• 4.3資源名稱

• 需要訪問的文件名稱

• 5.補充

• URL全稱Uniform Resource Locator(統一資源定位符)， 互聯網上的每一個資源都有一個唯一的URL地址

• 由于IP地址全都是數字， 沒有任何的含義，比較難以記憶。 所以在訪問網頁時最常見的不是IP地址而是“域名”（一串有含義的字母OR數字）

• 好比： http://www.baidu.com AND http://111.13.100.92:80/

什么是HTTP協議

• 1.HTTP是Hypertext Transfer Protocol的縮寫, 超文本傳輸協議

• 2.什么是協議?

• 在現實生活中有很多的協議, 例如租房協議/買賣協議/離婚協議

• 無論是什么協議他們都是一個共同點, 就是用來規范/約束某一類事物

• 3.溝通問題?

• 溝通最常見的問題就是語言不通, 例如中國人和美國人溝通, 一個人說中文, 一個人說英文, 如果兩個人都不懂中文或者英文, 那么就會出現溝通問題

• 如果要想解決溝通文件, 是不是需要先擬定規定, 兩個人都說中文, 或者兩個人都說英文, 或者請一個既懂中文又懂英文的翻譯

• 4.HTTP協議是用來規范/約束哪一類事物?

• 瀏覽器訪問網頁其實就是去服務器請求數據, 所以瀏覽器需要和服務器溝通, 所以也會存在溝通問題

• HTTP協議就相當于我們讓兩個人都說中文或者都說英文一樣, 就是提前規范兩個人之間如何溝通, 也就是規范/約束瀏覽器和服務器之間如何溝通

其它知識儲備

• 1.在Windows系統中如何查看文件的擴展名

• 默認情況下Windows系統是不顯示文件的擴展名的, 但是作為一個開發者而言, 查看文件的擴展名是我們的必備技能

• win10: 隨便打開一個文件夾—>點擊查看—>將文件擴展名的選項勾選上

• 2.電腦上的一個文件是可以”同時”被多個軟件打開的, 不同的軟件打開可能會有不同的效果

• 例如: 同一個index.html文件可以被多個瀏覽器和記事本一起打開

• 例如: .html文件通過瀏覽器打開不可以編輯, 通過記事本打開可以編輯

• 3.什么是純文本文件?

• 我們Windows電腦上有一款默認安裝好的軟件叫做記事本. 這款軟件就是專門用來打開純文本文件的, 所以只要能夠被記事本打開, 并且能夠正常顯示的文件都是純文本文件

• .html的文件可以被記事本打開, 并且能夠正常顯示,所以.html文件是一個純文本文件

html區塊

●區塊元素

大多數html元素被定義為塊級元素或內聯元素.

塊級元素在瀏覽器顯示時,通常以新行來開始(和結束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●內聯元素

內聯元素在顯示時通常不會以新行開始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是塊級元素,它可用于組合其他html元素的容器.

<div>元素沒有特定的含義.除此之外,由于它屬于塊級元素,瀏覽器會在其前后顯示折行.

如果與css一同使用,<div>元素可用于對大的內容塊設置樣式屬性.

●<span>元素

html<span>元素是內聯元素,可用作文本的容器.

<span>元素也沒有特定的含義.

當與css一同使用時,<span>元素可用于為部分文本設置樣式屬性.

二 html表單

html表單用于搜集不同類型的用戶輸入.

<form>標簽用于創建供用戶輸入的html表單.

<form>

...

</form>

使用action屬性規定:當提交表單時,向何處發送表單數據.

<form action="url">

</form>

method屬性

method屬性指定在提交表單時使用的http方法:get或post

下面是兩個示例:

<form action="url" method="get">

<form action="url" method="post">

提示:

當你使用get時,表單數據將在頁面地址中使用.

如果表單正在更新數據或使用敏感信息(密碼),請使用post.post提供更好的安全性,因為提交的數據不會再頁面地址中顯示.

name屬性

name屬性指定表單的名稱

要接手用戶的輸入,你需要相應的表單元素,如文本字段.而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit等

下面是一個請求用戶名和密碼的表單例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

單選框

<input type="radio">標簽定義了表單單選框選項

下面是一個單選框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

運行效果如下:

注意:沒有結束標簽,也能正常顯示,但是有時候會出現意想不到的情況.所以建議還是要加上結束標簽.

復選框

<input type="checkbox">定義了復選框,用戶需要從若干給定的選擇中選取一個或若干選項.

下面是一個復選框的例子:

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>

<input type="checkbox" name="vehicle" value="Car">I have a Car

</form>

運行效果如下:

提交按鈕將表單提交到其action屬性:

<input type="submit" value="Submit">

運行效果如下:

表單提交后,應該使用服務器端語言(如php)進行數據處理.當完成html和css課程后,你可以試著學習php課程.

三 html顏色

html顏色由一個十六進制符號來定義,這個符號由紅色,綠色和藍色的值組成(rgb)

rgb顏色的最小值是0(十六進制:#000).最大值是255(十六進制:#FFF)

四 html框架

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面

<iframe>標簽規定一個內聯框架

一個內聯框架被用來在當前html文檔中嵌入另一個文檔

標記一個內聯框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之間,這樣就可以應對不支持<iframe>的瀏覽器.html5中不支持<frame>標簽.

定義iframe標簽的高度與寬度

height和width屬性用來定義iframe標簽的高度與寬度.

屬性默認以像素為單位,但是你可以指定其按比例顯示(如:80%)

下面是一個例子:

<iframe src="url" width="200" height="200"></iframe>

定義iframe表示是否顯示邊框

frameborder屬性用來定義iframe表示是否顯示邊框

設置屬性值為"0"移除iframe的邊框:

<iframe src="url" frameborder="0"></iframe>