HTML
HTML 是網頁的文件層,提供網頁所需的結構和內容,讓網頁更有意義。您可以在這裡找到 HTML 相關內容,例如課程、文章、集合和其他實用資訊,協助您瞭解這個網路的重要部分。
跳至本頁的其他部分:
瞭解 HTML
剛開始使用 HTML 嗎?我們提供完整課程,協助您快速上手。
更多課程
請參閱其他課程,進一步瞭解 HTML 中的特定主題。
HTML 的最新基準功能
瞭解所有主要瀏覽器引擎中新推出的最新 HTML 功能。
HTML 和無障礙功能
瞭解 HTML 模式和概念,以便建構更無障礙的網路應用程式。
HTML 和效能
瞭解如何運用 HTML 相關概念和模式,加快網頁應用程式的執行速度。
使用 Chrome 開發人員工具對 HTML 和 DOM 進行偵錯
瞭解如何使用 Chrome 開發人員工具,為網頁應用程式中的 HTML 和 DOM 進行偵錯。
課程
剛開始使用 HTML?
如果您是 HTML 新手,我們會提供協助。我們的「學習 HTML」課程將引導您瞭解 HTML 運作方式的基本知識,例如結構性問題、中繼資料、語義學和其他主題,協助您精進技能。
查看更多課程。
如要進一步瞭解 HTML,這些其他課程將介紹更多進階主題,可用來改善網頁應用程式。
基準功能:新推出的 HTML 功能
基準信號會向網頁開發人員發出信號,說明所有主要瀏覽器引擎中的網頁平台功能都能安全使用。以下是現在可在 Baseline 中使用的 HTML 功能。
HTML 和無障礙功能
HTML 是建構無障礙網頁應用程式的基本元素。本節提供的文章和資源,協助您進一步瞭解如何使用 HTML 打造無障礙網頁應用程式。
標題和位置標記
只要為標題和地標使用正確的元素,就能大幅改善侵略性技術使用者的瀏覽體驗。
使用語意 HTML 即可輕鬆操控鍵盤
只要使用正確的語意式 HTML 元素,就能滿足大部分或所有鍵盤存取需求。這樣一來,您就不必再花時間調整 tabindex,使用者也會更滿意!
鍵盤存取基礎知識
許多暫時性和永久性動作障礙的使用者,都會使用鍵盤快速鍵來更有效率地瀏覽應用程式。為應用程式製定完善的鍵盤瀏覽策略,進而為所有人提供更優質的體驗。
標籤和文字替代項目
為了讓螢幕閱讀器向使用者顯示朗讀 UI,實用元素必須有適當的標籤或文字替代。標籤或文字替代項目會為元素提供無障礙名稱,這是在無障礙樹狀結構中表達元素語義的其中一個重要屬性。
HTML 和效能
HTML 的使用方式可能會影響網站應用程式的效能。本節提供文章和資源,協助您進一步瞭解如何使用 HTML 加快網頁應用程式的速度。
請勿對抗瀏覽器預先載入掃描器
瀏覽器預先載入掃描程式是一種特殊的 HTML 剖析器,可讓瀏覽器用來尋找更早之前的資源。瞭解這項功能如何提升網頁應用程式的效能,以及如何避免受到影響。
使用 Fetch Priority API 最佳化資源載入
Fetch Priority API 會使用
fetchpriority
HTML 屬性,指出資源相對於瀏覽器的相對優先順序。這可讓您享有最佳載入體驗,並改善 Core Web Vitals。
預先載入重要素材資源,以加快載入速度
資源預先載入:使用 HTML
link
元素的技術,可讓瀏覽器在需要前先載入資源。參閱本指南,瞭解如何使用這項功能來改善網頁應用程式的效能。
網頁瀏覽器層級的延遲載入圖片
延遲載入圖片是有效在頁面初始載入期間節省頻寬的有效技術。本指南將說明如何使用 HTML
loading
延後載入圖片。
使用 Chrome 開發人員工具對 HTML 和 DOM 進行偵錯
Chrome 開發人員工具是一套可讓開發人員偵錯網頁應用程式的工具。以下列出幾個建議工具,協助您在網頁應用程式中偵錯網頁的 HTML 和 DOM,以及其他相關概念。
開始查看及變更 DOM
DevTools 提供「元素」面板,可讓您查看、編輯及偵錯網頁應用程式的 DOM。如要開始使用「元素」面板,請參閱這份指南。
監聽 DOM 變更
您可以透過 DevTools 中的「Elements」面板,監聽 JavaScript 觸發的 DOM 變更。瞭解如何使用這項實用功能,對網頁應用程式的 DOM 變更進行偵錯。
找出網頁應用程式 HTML 載入的未使用程式碼
涵蓋率面板是一項實用的工具,可用來找出網頁應用程式 HTML 載入的未使用 CSS 和 JavaScript 程式碼。本指南將說明如何使用此功能,以及如何改善網頁應用程式的效能。