---
title: 學習 HTML ：指南與教學
slug: Learn/HTML
tags:
  - Beginner
  - Guide
  - HTML
  - Intro
  - Learn
  - NeedsTranslation
  - Topic
  - TopicStub
  - 初心者
  - 指南
  - 超文本標記語言
translation_of: Learn/HTML
---
<div>{{LearnSidebar}}</div>

<p class="summary">為了建立網頁，你應該要先知道 {{Glossary('「HTML」')}} — 用來建造網站架構的科技。 HTML 是用來辨認網頁中的內容該如何被解讀，例如說被解讀為:一個段落(paragraph)、清單(list)、文件標題(heading)、連結(link)、圖片(images)、多媒體撥放器(multimedia player)、表單(form)或是任何一個可使用的「元素(elements)」，甚至是你自己定義的新元素。</p>

<h2 id="學習途徑">學習途徑</h2>

<p>理想上，你應該從學習 HTML 開始你的學習旅程。可以先從閱讀 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML介紹(Introduction to HTML)</a> 開始。接下來你可以開始閱讀以下的進階主題：</p>

<ul>
 <li><a href="/en-US/docs/Learn/CSS">CSS</a>, 和如何使用它來美化 HTML (例如改變文字大小和字形、加上邊框與陰影、用多欄位[columns]來排版你的頁面、增加動畫和視覺效果...)</li>
 <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, 和如何使用它來為網頁增加互動性的功能 (例如將你的位置顯示在地圖上、點擊按鈕讓 UI 上的元素出現或消失、將用戶的一些資料存放在他們的電腦上... 等等)</li>
</ul>

<p>當你開始閱讀這主題時，你至少必須對使用電腦有基礎了解，以及會基本的上網 (諸如網頁瀏覽、了解網頁內容)。而你需要建立一個已安裝基本軟體 (詳細軟體請參閱<a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>)的基礎工作環境，並且了解如何建立與管理檔案(詳細請參閱<a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>) — 這些都包含在新手 <a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web">Web 入門</a>的章節裡。</p>

<p>建議你在開始學習 HTML 這個項目之前，可以先 <a href="/en-US/docs/Learn/Getting_started_with_the_web">從網際網路開始 </a>瞭解是如何運作的。儘管知道網路的運作不是必要的；大部分的項目都在 <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> 的文章中 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> 這個章節更詳盡地介紹 模組 (module), albeit。</p>

<h2 id="模組">模組</h2>

<p>這主題包含了以下幾個單元, 你可以根據以下順序來閱讀他們。強烈推薦從第一個單元開始讀起。</p>

<dl>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML">HTML介紹</a></dt>
 <dd>這個單元為你提供一個平台，讓你熟悉重要的概念和語法、思考如何將HTML應用於文本、如何創建超鏈接以及使用HTML來構建網頁。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Multimedia_and_embedding">嵌入多媒體</a></dt>
 <dd>本單元探索如何在你的網頁中使用HTML置入多媒體，包括置入圖像的各種方法，以及如何嵌入影片，聲音檔或甚至其他網頁。</dd>
 <dt><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Tables">表格</a></dt>
 <dd><font><font>以一種易於理解、</font></font><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Glossary/Accessibility">無障礙的</a><font><font>方式</font><font>在網頁上顯示表格數據</font><font>可能是一個挑戰。</font><font>此單元涵蓋基本的表格標記以及更複雜的功能，例如實行標題和摘要。</font></font></dd>
</dl>

<h2 id="解決常見的_HTML_問題">解決常見的 HTML 問題</h2>

<p><a href="/zh-TW/docs/Learn/HTML/Howto">利用HTML解決常見問題</a> 提供部分連結，這些內容解釋了在創建網頁時如何使用HTML解決常見的問題：標題，添加圖像或視頻，強調內容，創建基本表單等等。</p>

<h2 id="或許你還想看......">或許你還想看......</h2>

<div class="document-head" id="wiki-document-head">
<dl>
 <dt><a href="https://wiki.developer.mozilla.org/zh-TW/docs/Learn/HTML/Forms">網站表單</a></dt>
 <dd>這篇指南提供了一系列的文章，幫你掌握HTML表單的基本知識。對於與使用者互動，網站表單是一項十分有力的工具，最常使用於用戶數據蒐集，或控制使用者介面。但由於一些歷史與技術上的因素，並沒有顯著的方法發揮表單的潛力。在下面的指引中，我們將介紹網站表單所有基本面向，包括標記他們的HTML結構、設定控制器樣式、驗證數據及將數距提送至伺服器。</dd>
 <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt>
 <dd>MDN的HTML參考文件的主要入口，包括詳細的元素和屬性參考-例如，如果您想知道元素具有哪些屬性或屬性具有什麼值，那麼這是一個很好的起點。</dd>
</dl>
</div>