使用 HTML 構建內容結構
HTML 是定義任何網站內容和結構的技術。如果編寫得當，它還應以機器可讀的方式定義內容的語義（含義），這對於可訪問性、搜尋引擎最佳化以及充分利用瀏覽器為內容提供的內建功能至關重要。本模組涵蓋了語言的基礎知識，然後探討了文件結構、連結、列表、影像、表單等關鍵領域。
預備知識
在開始本模組之前，您不需要任何 HTML 基礎知識，但您應該至少對使用計算機和被動地使用網路（即，只是檢視和消費內容）有基本的瞭解。您應該設定好一個基本的工作環境（如安裝基本軟體中所述），並瞭解如何建立和管理檔案（如處理檔案中所述）。這兩部分都是我們面向完全初學者的開始使用 Web模組的一部分。
教程與挑戰
- HTML 基本語法
-
涵蓋了 HTML 的絕對基礎知識，幫助您入門 — 我們定義了元素、屬性和其他重要術語，並展示了它們在語言中的位置。我們還展示了典型的 HTML 頁面是如何構建的，以及 HTML 元素是如何構建的，並解釋了其他重要的基本語言特性。在此過程中，我們將透過一些 HTML 實踐來激發您的興趣！
- 網頁元資料（head 部分有什麼？）
-
HTML 文件的 head 是頁面載入時不顯示在網路瀏覽器中的部分。它包含元資料資訊，例如頁面
<title>、指向 CSS 的連結（如果您想使用 CSS 樣式化您的 HTML 內容）、指向自定義網站圖示的連結以及元資料（關於 HTML 的資料，例如作者是誰，以及描述文件的重要關鍵詞）。 - 標題和段落
-
HTML 的主要工作之一是為文字提供結構，以便瀏覽器能夠按照開發人員的意圖顯示 HTML 文件。本文解釋瞭如何使用 HTML 透過定義標題和段落來提供基本的頁面結構。
- 強調和重要性
-
上一篇文章探討了語義在 HTML 中的重要性，並重點介紹了標題和段落。本文繼續探討語義主題，研究了將強調和重要性應用於文字的 HTML 元素（類似於印刷媒體中的斜體和粗體文字）。
- 列表
-
生活中到處都是列表——從您的購物清單到您每天下意識地遵循的回家路線列表，再到您在這些教程中遵循的指令列表！您可能不會感到驚訝，HTML 擁有一組方便的元素，允許我們定義不同型別的列表。在 Web 上，我們有三種類型的列表：無序列表、有序列表和描述列表。本課程向您展示如何使用不同型別。
- 高階文字功能
-
HTML 中還有許多其他用於定義文字語義的元素，我們沒有在強調和重要性一文中提及。本文描述的元素鮮為人知，但仍然值得了解（這絕不是一個完整的列表）。在這裡您將學習如何標記引用、計算機程式碼和其他相關文字、下標和上標、聯絡資訊等等。
- 標記一封信 挑戰
-
我們遲早都會學會寫信；它也是一個有用的例子，可以測試我們的文字格式化技能。在這個挑戰中，您將有一封信要標記，作為對您的 HTML 文字格式化技能以及超連結和 HTML
<head>元素正確使用的測試。 - 構建文件結構
-
除了定義頁面的各個部分（例如“一個段落”或“一張圖片”）之外，HTML 還擁有許多塊級元素，用於定義您網站的區域（例如“頁首”、“導航選單”、“主內容列”）。本文探討了如何規劃一個基本的網站結構，並編寫 HTML 來表示這個結構。
- 建立連結
-
連結（也稱為超連結）非常重要——它們是使 Web 成為 Web 的原因。本文展示了建立連結所需的語法，並討論了連結的最佳實踐。
- 構建內容頁面 挑戰
-
構建準備好使用 CSS 進行佈局的內容頁面是一項非常重要的技能，因此在這個挑戰中，您將測試您思考頁面最終外觀的能力，並選擇適當的結構語義來構建佈局。
- HTML 影像
-
最初，網路只是文字，而且非常枯燥。幸運的是，很快就添加了在網頁中嵌入影像（以及其他更有趣的內容型別）的功能。在本文中，我們將深入研究如何使用
<img>元素，包括其基礎知識，使用<figure>新增標題進行註釋，並詳細說明它與 CSS 背景影像的關係。 - HTML 影片和音訊
-
現在我們已經習慣了向網頁新增簡單的影像，下一步是開始向您的 HTML 文件新增影片和音訊播放器！在本文中，我們將探討如何使用
<video>和<audio>元素來完成此操作；然後我們將通過了解如何為您的影片新增字幕/副標題來結束。 - 令人毛骨悚然的啟動頁面 挑戰
-
在這個挑戰中，我們將測試您對前幾課中討論的一些技術的知識，讓您向一個關於蟲子和其他令人毛骨悚然的爬行動物的啟動頁面新增一些影像和影片。
- HTML 表格基礎
-
本文將帶您開始學習 HTML 表格，涵蓋了行、單元格、標題、使單元格跨多列和多行以及如何將一列中的所有單元格分組以進行樣式設定等非常基礎的知識。
- HTML 表格可訪問性
-
在本文中，我們將探討更多 HTML 表格可訪問性功能，例如標題/摘要，將您的行分組到表頭、表體和表腳部分，以及作用域列和行。
- 構建行星資料表 挑戰
-
在這個挑戰中，我們為您提供了一些關於太陽系行星的資料。您的任務是將其構建成一個可訪問的 HTML 表格。
-
HTML 表單和按鈕是與使用者互動的強大工具——最常見的是用於從使用者收集資料或允許他們控制使用者介面。在本文中，我們將介紹表單和按鈕的基礎知識。
- 除錯 HTML
-
編寫 HTML 很好，但如果出現問題，您找不到程式碼中的錯誤怎麼辦？本文將向您介紹一些可以幫助您查詢和修復 HTML 錯誤的工具。
檢驗你的技能
您會在教程文章之間找到“測試您的技能”文章，以檢查您是否在繼續之前記住了最重要的資訊。如果您想一起探索所有這些文章，可以在測試您的技能：HTML中找到它們。
附加教程
這些教程不屬於學習路徑，但它們仍然很有趣——您應該將這些視為進階目標，在完成主要的“核心”文章後可選擇學習。
- 在 HTML 中包含向量圖形
-
向量圖形在許多情況下都非常有用——它們檔案大小小，可伸縮性強，因此在放大或放大到大尺寸時不會畫素化。在本文中，我們將向您展示如何在網頁中包含一個向量圖形。
- 從 object 到 iframe — 通用嵌入技術
-
開發者通常會想到在網頁中嵌入影像、影片和音訊等媒體。在本文中，我們採取了一種稍微不同的方法，研究了一些允許您在網頁中嵌入各種內容型別的元素：
<iframe>、<embed>和<object>元素。<iframe>用於嵌入其他網頁，另外兩個允許您嵌入外部資源，例如 PDF 檔案。
另見
- 學習 HTML 和 CSS, Scrimba MDN 學習合作伙伴
-
Scrimba 的 學習 HTML 和 CSS 課程透過構建和部署五個出色的專案，以及由知識淵博的老師講授的有趣互動課程和挑戰，教你 HTML 和 CSS。
- 學習 HTML，Codecademy
-
另一個學習 HTML 基礎知識的有用資源。
- 語義化 HTML 基礎，Scrimba MDN 學習合作伙伴
-
這個互動式課程提供了對 HTML 的有用描述，特別強調了其語義方面的重要性。