程大綱
什么是瀏覽器
什么是服務器
瀏覽器請求數據的過程
什么是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文件是一個純文本文件
些初學web前端的小伙伴會比較迷惑,HTML到底是什么呢?
這里解釋一下,HTML稱為超文本標記語言,是一種標識性的語言。
它包括一系列標簽,通過這些標簽可以將網絡上的文檔格式統一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。
HTML的學習也是要由淺到深一步一步學習,對于很多小伙伴來說,HTML的學習路線一直是一個問題,下邊我列出HTML需要學習的幾個知識點,大家可以作為參考。
⒈ html概述
⒉ html基本標簽
⒊ 圖片標簽
⒋ 超鏈接標簽
⒌ 表格標簽
⒍ 無序列表標簽
⒎ 有序列表標簽
⒏ 定義列表標簽
⒐ div標簽
⒑ 語義化標簽
⒒ 表單標簽
⒓ 語義化表單元素
⒔ 框架標簽
⒕ 特殊字符
⒖ 綜合案例
針對以上的html知識點,動力節點也有非常適合初學者的HTML學習教程,相信大家通過HTML視頻課程的學習以后,會對HTML有一個深入的了解。
通過該視頻的學習之后,可以開發基本的網頁,并且可以看懂別人編寫的HTML頁面。
HTML學習資料:http://www.bjpowernode.com/?toutiaohtml.chai
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>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。