搜尋

如何觀察 HTML 原始碼

學習 HTML 除了要會撰寫程式語法,也需要了解如何觀察一份網頁的 HTML 原始碼,這篇教學會介紹使用瀏覽器觀察 HTML 原始碼的方法。

快速導覽:

靜態網頁和動態網頁

如果要簡單區分網頁的類型,可以分成「靜態網頁」和「動態網頁」兩大類,雖然兩者在「網頁原始碼」的表現不相同,但最後呈現的結果依然都會是 HTML,因此只要掌握兩者區分原則,就能用特定的方法觀察網頁最終呈現的原始碼。

  • 靜態網頁:單純撰寫 HTML 實現,所編輯的 HTML 內容幾乎和瀏覽器查看的原始碼相同,網頁載入完成後資源也就一併載入完成。
  • 動態網頁透過後端或 JavaScript 框架「動態」產生 HTML,在不同的情況下會有不同的 HTML 表現 ( 例如不同網址、不同使用者...等 ),瀏覽器查看的原始碼和實際呈現的結果並不相同,動態網頁的內容可能是「全部動態」( 基本網頁載入後,全部的內容透過框架產生 ) 或是「部分動態」( 網頁載入後,部分特定內容再過 JavaScript 或再由資料庫產生 )。

查看網頁原始碼

查看網頁原始碼的方式很簡單,使用 Chrome 瀏覽器開啟網頁,在網頁上按下滑鼠右鍵,選擇「檢視網頁原始碼」( Firefox 稱作「檢視原始碼」,Safari 稱作「顯示網頁原始碼」 )。

HTML 教學 - 如何觀察 HTML 原始碼 - 檢視網頁原始碼

點選後就會開啟一個新分頁,分頁裡會呈現該網頁的原始碼,從中可以看到 HTML 的基本架構,以及各種標籤組成的網頁元素。

這部分的原始碼屬於「靜態網頁」原始碼,如果網頁裡有動態內容,則不會透過這種方式顯示。

HTML 教學 - 如何觀察 HTML 原始碼 - 開啟分頁,查看網頁原始碼

開啟瀏覽器控制台,檢查網頁

如果要查看目前網頁「真正的原始碼」( 最終呈現樣貌的原始碼 ),則需要使用「檢查網頁」的方式,使用 Chrome 瀏覽器開啟網頁,在網頁上按下滑鼠右鍵,選擇「檢查」( Firefox 稱作「檢測」,Safari 稱作「檢閱元件」 )。

HTML 教學 - 如何觀察 HTML 原始碼 - 檢查網頁

點選後會在瀏覽器的下方或右側 ( 可以點擊裡面的圖示切換位置 ),開啟一個可以拖拉大小的顯示區塊,使用 Chrome 瀏覽器點擊「element」頁籤,就能看到完整的 HTML 原始碼,此時也可使用滑鼠點擊網頁元素,就能看到該元素的樣式。

HTML 教學 - 如何觀察 HTML 原始碼 - 檢查網頁 - Chrome

使用 Firebox 瀏覽器點擊「檢測器」頁籤,就能看到完整的 HTML 原始碼以及網頁元素。

HTML 教學 - 如何觀察 HTML 原始碼 - 檢查網頁 - Firefox

使用 Safari 瀏覽器點擊「元件」頁籤,就能看到完整的 HTML 原始碼以及網頁元素。

HTML 教學 - 如何觀察 HTML 原始碼 - 檢查網頁 - Safari

小結

學會觀察 HTML 原始碼是一件很重要的事,未來不論是要設計動態網頁、或是實作網頁爬蟲,都必須要知道 HTML 的網頁結構以及用了哪些網頁元素,甚至還可以從 HTML 原始碼裡,發現一些這個網站不為人知的小秘密,或是一些只能從原始碼看到的小驚喜。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片