1. 程式人生 > >01-HTML基礎--基本概念

01-HTML基礎--基本概念

nsh 過程 http browser 多個 觀察 事物 其它 共同點

技術分享圖片

什麽是瀏覽器

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

  • 常見主流瀏覽器

    • 技術分享圖片
  • 瀏覽器市場份額-國內統計
  • 瀏覽器市場份額-國外統計
  • 不同的瀏覽器不同的瀏覽器內核, 瀏覽器內核也就是瀏覽器所采用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網頁的內容,從而導致了瀏覽器兼容性問題出現
    • IE內核 Trident
    • 谷歌內核 WebKit / Blink
    • 火狐內核 Gecko
    • Safarri內核 WebKit
    • 歐朋內核 Presto
  • 前期上課以谷歌瀏覽器為主,後面將專門詳細介紹瀏覽器兼容問題

什麽是服務器

  • 服務器也是電腦,只不過是比我們的電腦配置更高的電腦,並且24小時不斷電不關機的計算機
  • 服務器是專門用於存儲數據電腦, 訪問者可以訪問服務器獲得服務器上存儲的資源
  • 服務器一旦關機,訪問者就無法訪問
    • 技術分享圖片

訪問網頁原理

瀏覽器請求數據的原理

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

  • 1.打開IE緩存文件夾

    • C:\Users\Jonathan_Lee\AppData\Local\Microsoft\Windows\Temporary Internet Files
    • Jonathan_Lee
      為個人電腦用戶名名稱
  • 2.清空該文件夾

    • 技術分享圖片
  • 3.用IE打開網頁

    • 技術分享圖片
  • 4.發現文件夾下多了很多文件(.html、.css、.js、.png等), 仔細觀察不難發現其實這些文件都是被訪問網頁上的內容

  • 5.結論

    • 訪問網頁時是有真實的、物理的文件傳輸的
    • 網頁不是一個文件,而是一堆文件組成的
    • 我們之所以平常感覺第二次訪問比第一次訪問快的原因就是,第一次訪問時已經將所有文件緩存到了本地

瀏覽器請求數據的過程

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

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

  • 3.服務器將處理完的結果通過響應報文

    返回給瀏覽器

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

    • 技術分享圖片
  • 請求過程驗證

    • 1.利用chome瀏覽器打開一個網頁
    • 2.打開開發人員工具
    • 3.打開Network查看請求報文和響應報文
      • 3.1請求報文
      • 一個HTTP請求報文由請求行(request line)、請求頭部(header)、空行和請求數據4個部分
    • 技術分享圖片
      • 3.2響應報文
      • 一個HTTP響應報文由響應行、響應頭、響應體組成
    • 技術分享圖片
    • 技術分享圖片

什麽是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協議就相當於我們讓兩個人都說中文或者都說英文一樣, 就是提前規範兩個人之間如何溝通, 也就是規範/約束瀏覽器和服務器之間如何溝通

其它知識儲備

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

    • 默認情況下Windows系統是不顯示文件的擴展名的, 但是作為一個開發者而言, 查看文件的擴展名是我們的必備技能
    • win10: 隨便打開一個文件夾-->點擊查看-->將文件擴展名的選項勾選上
    • 技術分享圖片
  • 電腦上的一個文件是可以"同時"被多個軟件打開的, 不同的軟件打開可能會有不同的效果

    • 例如: 同一個index.html文件可以被多個瀏覽器和記事本一起打開
    • 例如: .html文件通過瀏覽器打開不可以編輯, 通過記事本打開可以編輯
  • 什麽是純文本文件?

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


原文:https://www.jianshu.com/p/f6da3875834b

01-HTML基礎--基本概念