HTML 是網頁的文件層,提供網頁所需的結構和內容,讓網頁更有意義。您可以在這裡找到 HTML 相關內容,例如課程、文章、集合和其他實用資訊,協助您瞭解這個網路的重要部分。
剛開始使用 HTML 嗎?我們提供完整課程,協助您快速上手。
請參閱其他課程,進一步瞭解 HTML 中的特定主題。
瞭解所有主要瀏覽器引擎中新推出的最新 HTML 功能。
瞭解 HTML 模式和概念,以便建構更無障礙的網路應用程式。
瞭解如何運用 HTML 相關概念和模式,加快網頁應用程式的執行速度。
瞭解如何使用 Chrome 開發人員工具,為網頁應用程式中的 HTML 和 DOM 進行偵錯。
課程

如果您是 HTML 新手,我們會提供協助。我們的「學習 HTML」課程將引導您瞭解 HTML 運作方式的基本知識,例如結構性問題、中繼資料、語義學和其他主題,協助您精進技能。

如要進一步瞭解 HTML,這些其他課程將介紹更多進階主題,可用來改善網頁應用程式。

HTML 表單可讓使用者為您的網頁應用程式提供輸入內容,本課程將教您如何有效運用這些表單。
雖然網路上經常使用圖片,但是使用圖片的方法比使用 img 元素要更多。本課程將說明使用網路圖片的所有必學知識。
雖然無障礙設計涵蓋了網站平台的所有部分,但編寫無障礙 HTML 是建構無障礙網站應用程式的基礎。本課程將說明撰寫無障礙標記的所有須知事項。

基準信號會向網頁開發人員發出信號,說明所有主要瀏覽器引擎中的網頁平台功能都能安全使用。以下是現在可在 Baseline 中使用的 HTML 功能。

宣告式 Shadow DOM 已於 2024 年成為新基準。
Popover API 已於 2024 年成為基準新平台。
inert 屬性已於 2023 年成為基準新資訊。
在 2023 年,iframe 的延後載入功能已成為新基準。

HTML 是建構無障礙網頁應用程式的基本元素。本節提供的文章和資源,協助您進一步瞭解如何使用 HTML 打造無障礙網頁應用程式。

只要為標題和地標使用正確的元素,就能大幅改善侵略性技術使用者的瀏覽體驗。
只要使用正確的語意式 HTML 元素,就能滿足大部分或所有鍵盤存取需求。這樣一來,您就不必再花時間調整 tabindex,使用者也會更滿意!
許多暫時性和永久性動作障礙的使用者,都會使用鍵盤快速鍵來更有效率地瀏覽應用程式。為應用程式製定完善的鍵盤瀏覽策略,進而為所有人提供更優質的體驗。
為了讓螢幕閱讀器向使用者顯示朗讀 UI,實用元素必須有適當的標籤或文字替代。標籤或文字替代項目會為元素提供無障礙名稱,這是在無障礙樹狀結構中表達元素語義的其中一個重要屬性。

HTML 的使用方式可能會影響網站應用程式的效能。本節提供文章和資源,協助您進一步瞭解如何使用 HTML 加快網頁應用程式的速度。

瀏覽器預先載入掃描程式是一種特殊的 HTML 剖析器,可讓瀏覽器用來尋找更早之前的資源。瞭解這項功能如何提升網頁應用程式的效能,以及如何避免受到影響。
Fetch Priority API 會使用 fetchpriority HTML 屬性,指出資源相對於瀏覽器的相對優先順序。這可讓您享有最佳載入體驗,並改善 Core Web Vitals
資源預先載入:使用 HTML link 元素的技術,可讓瀏覽器在需要前先載入資源。參閱本指南,瞭解如何使用這項功能來改善網頁應用程式的效能。
延遲載入圖片是有效在頁面初始載入期間節省頻寬的有效技術。本指南將說明如何使用 HTML loading 延後載入圖片。

Chrome 開發人員工具是一套可讓開發人員偵錯網頁應用程式的工具。以下列出幾個建議工具,協助您在網頁應用程式中偵錯網頁的 HTML 和 DOM,以及其他相關概念。

DevTools 提供「元素」面板,可讓您查看、編輯及偵錯網頁應用程式的 DOM。如要開始使用「元素」面板,請參閱這份指南。
您可以透過 DevTools 中的「Elements」面板,監聽 JavaScript 觸發的 DOM 變更。瞭解如何使用這項實用功能,對網頁應用程式的 DOM 變更進行偵錯。
涵蓋率面板是一項實用的工具,可用來找出網頁應用程式 HTML 載入的未使用 CSS 和 JavaScript 程式碼。本指南將說明如何使用此功能,以及如何改善網頁應用程式的效能。