學習 HTML :指南與教學

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

學習途徑

理想上,你應該從學習 HTML 開始你的學習旅程。可以先從閱讀 HTML 介紹(Introduction to HTML) 開始。接下來你可以開始閱讀以下的進階主題:

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

當你開始閱讀這主題時,你至少必須對使用電腦有基礎了解,以及會基本的上網(諸如網頁瀏覽、了解網頁內容)。而你需要建立一個已安裝基本軟體(詳細軟體請參閱Installing basic software)的基礎工作環境,並且了解如何建立與管理檔案(詳細請參閱Dealing with files)——這些都包含在新手 Web 入門的章節裡。

建議你在開始學習 HTML 這個項目之前,可以先從網際網路開始瞭解是如何運作的。儘管知道網路的運作不是必要的;大部分的項目都在 HTML basics 的文章中Introduction to HTML 這個章節更詳盡地介紹 模組(module)、albeit。

模組

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

HTML 介紹

這個單元為你提供一個平台,讓你熟悉重要的概念和語法、思考如何將 HTML 應用於文本、如何創建超鏈接以及使用 HTML 來構建網頁。

嵌入多媒體

本單元探索如何在你的網頁中使用 HTML 置入多媒體,包括置入圖像的各種方法,以及如何嵌入影片,聲音檔或甚至其他網頁。

表格

以一種易於理解、無障礙的方式在網頁上顯示表格數據可能是一個挑戰。此單元涵蓋基本的表格標記以及更複雜的功能,例如實行標題和摘要。

解決常見的 HTML 問題

利用 HTML 解決常見問題 提供部分連結,這些內容解釋了在創建網頁時如何使用 HTML 解決常見的問題:標題,添加圖像或視頻,強調內容,創建基本表單等等。

或許你還想看

網站表單

這篇指南提供了一系列的文章,幫你掌握 HTML 表單的基本知識。對於與使用者互動,網站表單是一項十分有力的工具,最常使用於用戶數據蒐集,或控制使用者介面。但由於一些歷史與技術上的因素,並沒有顯著的方法發揮表單的潛力。在下面的指引中,我們將介紹網站表單所有基本面向,包括標記他們的 HTML 結構、設定控制器樣式、驗證數據及將數距提送至伺服器。

HTML

MDN 的 HTML 參考文件的主要入口,包括詳細的元素和屬性參考-例如,如果您想知道元素具有哪些屬性或屬性具有什麼值,那麼這是一個很好的起點。