HTML

目標

使用正確的 HTML 標籤（如段落、標題、列表和影像）設計和構建網頁
透過跟蹤其 HTML 原始碼繪製頁面

資源

第 2 章幻燈片
W3schools 上的教程
HTML 標籤參考
198.209.19.99/~blu/book_examples/ch02-html-files/all_examples.html
關於 HTML 的簡短華夏公益教科書

什麼是 HTML？

HTML（超文字標記語言）是定義網頁的標準語言，網頁作為您 Web 應用程式的介面。HTML 檔案是遵循 HTML 語法的純文字檔案。瀏覽器知道如何獲取 HTML 檔案並在瀏覽器視窗中顯示由 HTML 檔案定義的頁面。該檔案可以儲存在執行瀏覽器的計算機的本地磁碟上，也可以使用 URL 從 Web 伺服器獲取。建立 HTML 檔案是編碼，因為結果原始碼會被瀏覽器（一種虛擬機器）執行。

標籤定義頁面結構

HTML 檔案由標記起來的標記組成，如這幅圖片所示

檔案開頭的標籤是特殊的，因為它用於指示檔案遵循的標準。<!DOCTYPE html> 表示 HTML5 - 最新的 HTML 標準，其中包含一些新功能。您可以將此標籤複製貼上到您建立的每個 HTML 檔案中。

大多數標籤成對出現 - 一個開始標籤和一個結束標籤。每對標籤為網頁定義一個元素，該元素可以是可見的或不可見的。可見元素就像盒子一樣。所有盒子都包含一些內容，一些盒子可以包含其他盒子。例如，<html></html></html> 定義了根（最高級別）元素，它應該包含 HTML 檔案中的所有其他內容。在“html”元素內，我們有“head”元素和“body”元素，它們由其相應的標籤定義。在“head”元素內是“title”元素，在“body”元素內是“paragraph”元素，由

<p></p>

標籤對定義。 “title”元素和“paragraph”元素都以文字作為其內容。這種巢狀結構類似於樹。實際上，瀏覽器總是先將 HTML 檔案解析為一個 DOM 物件（樹形資料結構），然後在螢幕上繪製頁面。請注意，

<!-- -->

標籤定義註釋，用於文件說明，對頁面沒有影響。右側的圖形描繪了 HTML 檔案中巢狀標籤定義的樹結構。

我們將包含其他元素的元素稱為父元素，將包含的元素稱為子元素。顯然，子元素必須完全包含在其父元素中，這意味著標籤必須正確巢狀。例如，以下 HTML 片段對瀏覽器來說是令人困惑的，因為這兩個元素混合在一起了

<em> emphasized and<bold>bold-faced</em></bold>

如果元素可以包含其他元素，我們將這些元素稱為塊元素。例如，段落 (<p>) 元素和列表 (<ul>) 元素是塊元素，它們通常在頁面上佔據多行。所有其他元素稱為內聯元素。有些標籤是自閉合的，例如 <br/> 定義了一個換行符，這是必需的，因為 HTML 中的所有空格字元都會被瀏覽器忽略。有些標籤允許我們為元素定義額外的屬性，例如 <img src="MyPicture.jpg"/> 定義了由“src”屬性指定的路徑處的影像。每個屬性都是一個名值對，值用雙引號括起來。從這個例子中可以看出，影像透過使用指向影像的 <img> 標籤嵌入到網頁中，而實際影像不是 HTML 檔案的一部分。這是一個外部元件的示例，它還包括 CSS 和 JavaScript 檔案。此類外部元件必須單獨下載併合併到網頁中。

以下是一個顯示各種元素及其在網頁上的顯示方式的示例。右鍵點選頁面，選擇“檢視原始碼”以檢視頁面 HTML 原始檔的內容。

學習 HTML 的最佳方法是學習示例並根據需要調整它們。我們的目標是能夠透過檢視 HTML 原始檔在腦海中勾勒出頁面的影像。換句話說，我們希望瞭解我們在 HTML 檔案中編寫的內容與頁面上顯示的內容之間的關係，以便我們可以想象和建立網頁。

基本標籤

您可以在 W3C 學校找到 HTML 標籤的完整列表。更具體地說，您需要了解如何使用以下標籤（單擊標籤以檢視標籤的描述和示例用法）。

元標籤

在 head 元素中，可以使用多個元標籤來提供有關 HTML 文件的資訊，如此示例所示。

帶有“charset”屬性的元標籤是必需的。此屬性通常設定為“utf-8”，如此示例所示。

HTML5 語義

HTML5 引入了一些語義元素，以幫助搜尋引擎或其他程式更好地識別網頁的結構。