Return to Video

The Internet: HTTP and HTML

  • 0:03 - 0:07
    網際網路如何運作：HTTP 和 HTML
  • 0:07 - 0:12
    我是Jasmine，我是XBOX One工程團隊的項目經理。
  • 0:12 - 0:19
    我們最大的特色之一是XBOX Live 這個線上服務。
  • 0:19 - 0:24
    XBOX Live 串連起全世界的玩家，而這是藉由網際網路才得以實現！
  • 0:24 - 0:30
    這不是一件容易的事，在幕後需要達成很多事情。
  • 0:30 - 0:36
    網際網路完全改變了人們互動和聯繫的方式。但它是如何運作的呢？
  • 0:36 - 0:43
    世界各地的電腦又是如何彼此溝通的呢？我們仔細看看「瀏覽網站」這個例子。
  • 0:43 - 0:50
    首先，你會執行瀏覽器，這是你用來造訪網站的應用程式。
  • 0:50 - 0:59
    然後，你輸入網站位址URL，它代表著網站的統ㄧ資源定位符，如：tumblr.com。
  • 1:05 - 1:07
    嗨，我是 David Karp，Tumblr的創辦人。
  • 1:07 - 1:11
    今天我們來聊聊，每天使用的網站瀏覽器，實際上是如何運作的。
  • 1:11 - 1:17
    在瀏覽器中輸入網址，並按下Enter之後，實際發生了什麼事情呢？
  • 1:17 - 1:20
    它真的是很瘋狂的一件事。
  • 1:20 - 1:27
    你的電腦開始與稱為「伺服器」的另一台電腦通信。兩台電腦通常間隔著數千英里。
  • 1:27 - 1:32
    在幾毫秒內，你的電腦會向伺服器查詢一個網站
  • 1:32 - 1:37
    伺服器則開始使用 HTTP 這個語言，回覆你的電腦。
  • 1:37 - 1:41
    HTTP 代表著 超文件傳輸協定
  • 1:41 - 1:46
    你可以把它看作是一台電腦用來向另一台電腦索取文件的語言。
  • 1:46 - 1:53
    它實際上是非常直覺的。
    如果你去監聽你的電腦與伺服器之間的對話
  • 1:53 - 1:56
    這些對話，主要是由「GET」的請求指令組成。
  • 1:56 - 2:01
    就比如簡單的一句： GET “你所請求的文件名稱”
  • 2:01 - 2:07
    要前往 Tumblr 的登入頁面，
    你只需要向 Tumblr 的伺服器傳送一個 GET 請求
  • 2:07 - 2:17
    說道：GET / login。這會告訴 Tumblr 的伺服器
    你想要 Tumblr 登入頁面所有的 HTML 程式碼。
  • 2:17 - 2:21
    HTML 代表著「超文字標記語言」
  • 2:21 - 2:26
    你可以將它視為一種語言，
    用來告訴瀏覽器，該如何顯示網頁的外觀。
  • 2:26 - 2:31
    想像一下，維基百科這個網站
    它基本上就只是一個大文件
  • 2:31 - 2:36
    HTML 是用來讓 標題「變大」和「粗體」的語言，
    並且讓字體顯示正確
  • 2:37 - 2:44
    讓某些文字能連結到其他頁面
    讓某些文字變成「粗體」、或是變成「斜體」
  • 2:44 - 2:49
    讓圖片顯示在頁面的中間、對齊右邊，或是對齊左邊。
  • 2:49 - 2:53
    網頁中的文字，是直接包含在 HTML 中
  • 2:53 - 3:00
    圖片 或 影片 則是分開的檔案，他們具有自己的URL，需要額外的請求。
  • 3:00 - 3:06
    對於每一個，瀏覽器會個別發送 HTTP 請求，
    並在回覆到達時顯示它們。
  • 3:08 - 3:14
    如果一個頁面有很多不同的圖片
    每一個都會產生個別的 HTTP 請求
  • 3:14 - 3:17
    這就會讓頁面載入變慢
  • 3:19 - 3:23
    有時候當你瀏覽網頁時
    你不僅僅是透過 GET 來取得網頁
  • 3:24 - 3:29
    有時，你還會送出資訊
    像是填寫表單，或是輸入搜索查詢
  • 3:29 - 3:36
    瀏覽器會使用 HTTP POST 指令，以純文字形式，將資訊傳送給伺服器。
  • 3:37 - 3:41
    像是你要登入 Tumblr
    首先，你會發送 POST 需求
  • 3:41 - 3:45
    也就是向 Tumblr的登入頁面，發送一個 POST 指令
  • 3:45 - 3:49
    裡面會有一些附帶的資訊
    像是：你的電子郵件地址和密碼
  • 3:49 - 3:54
    那些會傳送到 Tumblr 伺服器來進行確認
    OK! 你是 David
  • 3:54 - 3:59
    然後傳送一個頁面，回到你的瀏覽器上
    表示著：「成功」，登入的人是「David」
  • 3:59 - 4:04
    除了頁面，還會附加一些看不見的 cookie 資料。
  • 4:04 - 4:07
    你的瀏覽器可以看到
    並知道如何保存這些資料
  • 4:07 - 4:11
    這非常重要，因為這是網站能記住你是誰的唯一方式
  • 4:12 - 4:19
    對 Thumblr 來說 cookie 資料是一種身份識別卡片
    用來辨識你是 David
  • 4:19 - 4:25
    瀏覽器會保留這個編號
    當你更新 Tumblr 頁面，或下次再前往 Tumblr.com 時
  • 4:25 - 4:31
    你的瀏覽器就會自動附加這個編號
    隨著請求發送給 Tumblr 伺服器
  • 4:31 - 4:38
    當 Tumblr 伺服器看到這些請求、編號時，就會知道
    「OK! 這是來自於 David 的請求」
  • 4:40 - 4:44
    目前：1. 網際網路是完全開放的
  • 4:44 - 4:48
    2. 所有的連結都是共享的
    3. 資訊都是以純文字的形式傳送
  • 4:48 - 4:55
    這讓駭客們能夠擷取
    在網際網路上，你傳送的任何個人私密資訊
  • 4:55 - 5:01
    但是安全網站能夠阻止這一點，
    藉著要求你的瀏覽器使用加密頻道來溝通
  • 5:01 - 5:08
    使用「安全資料傳輸層 SSL」以及後續的「傳送層安全協定 TLS」
  • 5:08 - 5:17
    你可以把 SSL 和 TLS 視為包在資訊外圍的安全保護層
    避免資訊被偷看或竄改
  • 5:17 - 5:25
    當你看到網址欄中，在 https 旁邊顯示小鎖的圖案時，
    表示 SSL 和 TLS 正在運作當中
  • 5:25 - 5:31
    安全超本文傳輸協定 (HTTPS) 能確保你的 HTTP 請求是安全且受到保護
  • 5:32 - 5:36
    當網站要求你的瀏覽器要建立安全連線時
  • 5:36 - 5:41
    網站會先提供一份數位憑證
    這就像一張正式的身份認證
  • 5:41 - 5:44
    來證明這個網站是真的
  • 5:44 - 5:52
    數位憑證是經由「CA認證中心」來頒發。
    CA 是具公信力的組織，它會驗證網站的真實性
  • 5:52 - 5:54
    再為這些網站頒發數位憑證
  • 5:54 - 5:57
    就像政府可以核發身份證或護照一樣
  • 5:57 - 6:05
    如果網站沒有正確核發的數位憑證，就想建立安全通訊，瀏覽器便會發出警告。
  • 6:07 - 6:12
    以上就是瀏覽網頁的基礎知識！
    也是我們使用網際網路的日常
  • 6:13 - 6:22
    總結一下，HTTP 和 DNS 管理著網路上
    HTML、多媒體文件或任何資訊的發送和接收
  • 6:22 - 6:31
    讓這成為可能的是，TCP/IP 和 路由器網絡
    它們讓資訊得以拆解並用小封包形式來傳遞
  • 6:31 - 6:37
    這些封包則由二進位制所組成 --- 許多 1 和 0 的次序組合
  • 6:37 - 6:42
    並通過電線，光纖電纜、無線網路來傳送。
  • 6:43 - 6:47
    幸好，你只需要學會網際網路層的運作原理，你就可以依賴它
  • 6:47 - 6:49
    而不用記住所有的細節
  • 6:50 - 6:53
    我們可以相信，所有這些網際網路互連層會一起運作
  • 6:53 - 6:58
    成功地，大規模且可靠的傳遞資訊
Title:
The Internet: HTTP and HTML
Description:
more » « less
Video Language:
English
Duration:
07:07

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.