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

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

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

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

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

2024 年 9 月,專屬摺疊式面板成為 Baseline 的新功能。
宣告式 Shadow DOM 已於 2024 年 2 月成為新基準。
Popover API 已於 2024 年 4 月成為新基準。
2023 年 4 月起,惰性屬性成為基準新資訊。
2023 年 12 月起,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 程式碼。本指南將說明如何使用此功能,以及如何改善網頁應用程式的效能。