HTML 基礎

HTML (**H**yper**T**ext **M**arkup **L**anguage) 是用於構建網頁及其內容結構的程式碼。例如，內容可以在一組段落、一個帶專案符號的列表或使用圖片和資料表格中進行結構化。顧名思義，本文將讓你瞭解 HTML 及其功能。

什麼是 HTML？

HTML 是一種**標記語言**，用於定義內容的結構。HTML 由一系列**元素**組成，您可以使用它們來包含或包裝不同的內容部分，使其以特定的方式顯示或行為。包含的**標籤**可以使單詞或圖片成為指向其他位置的超連結，可以使單詞斜體，可以使字型更大或更小，等等。例如，以下一行內容

My cat is very grumpy

如果我們希望這行內容獨立存在，我們可以透過將它包含在段落標籤中來指定它是一個段落

html
<p>My cat is very grumpy</p>

HTML 元素的結構

讓我們進一步探討一下這個段落元素。

paragraph element including opening tag, content reading 'my cat is very grumpy', and a closing tag

我們元素的主要部分如下

  1. **開始標籤：**它由元素名稱 (在本例中為 p) 組成，包含在開始和結束**尖括號**中。它表示元素從哪裡開始生效 - 在本例中是段落開始的地方。
  2. **結束標籤：**它與開始標籤相同，只是在元素名稱之前包含一個**斜槓**。它表示元素從哪裡結束 - 在本例中是段落結束的地方。忘記新增結束標籤是常見的初學者錯誤，會導致奇怪的結果。
  3. **內容：**這是元素的內容，在本例中，它只是一些文字。
  4. **元素：**開始標籤、結束標籤和內容共同組成了元素。

元素也可以具有以下屬性

Paragraph opening tag with a class attribute highlighted: class=editor-note

屬性包含有關元素的額外資訊，這些資訊你不希望出現在實際內容中。這裡，class 是屬性**名稱**，而 editor-note 是屬性**值**。class 屬性允許您為元素提供一個非唯一的識別符號，該識別符號可用於使用樣式資訊和其他內容來定位它 (以及具有相同 class 值的所有其他元素)。一些屬性沒有值，例如 required。

設定值的屬性總是具有

  1. 它與元素名稱 (或上一個屬性，如果元素已有一個或多個屬性) 之間有一個空格。
  2. 屬性名稱後跟一個等號。
  3. 屬性值包含在開始和結束引號中。

**注意：**不包含 ASCII 空格 (或任何字元 " ' ` = < >) 的簡單屬性值可以保持不帶引號，但建議您為所有屬性值新增引號，因為這使程式碼更加一致且易於理解。

巢狀元素

您也可以將元素放在其他元素內部 - 這稱為**巢狀**。如果我們想說明我們的貓 **非常** 暴躁，我們可以將單詞“非常”包含在 <strong> 元素中，這意味著這個單詞應該被強烈強調

html
<p>My cat is <strong>very</strong> grumpy.</p>

但是，您需要確保元素正確巢狀。在上面的示例中，我們首先打開了 <p> 元素，然後打開了 <strong> 元素；因此，我們必須首先關閉 <strong> 元素，然後關閉 <p> 元素。以下是不正確的

html
<p>My cat is <strong>very grumpy.</p></strong>

元素必須正確開啟和關閉，以便它們清楚地位於彼此內部或外部。如果它們像上面那樣重疊，那麼您的網頁瀏覽器將嘗試猜測您想表達的意思，這會導致意外結果。所以不要這樣做！

空元素

有些元素沒有內容，被稱為 **空元素**。例如我們 HTML 頁面中已經存在的 <img> 元素

html
<img src="images/firefox-icon.png" alt="My test image" />

它包含兩個屬性，但沒有結束標籤 </img> 也沒有內部內容。這是因為影像元素不包含內容以影響它。它的目的是將影像嵌入 HTML 頁面中它出現的位置。

HTML 文件的結構

這總結了單個 HTML 元素的基礎知識，但它們本身並不實用。現在我們將看看如何將單個元素組合起來形成整個 HTML 頁面。讓我們重新審視我們放入 index.html 示例中的程式碼（我們在 處理檔案 文章中第一次遇到它）

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

這裡，我們有以下內容

  • <!DOCTYPE html> — 文件型別。這是一個必需的前言。在過去，當 HTML 還是個新生事物（大約在 1991/92 年）時，文件型別旨在充當一組規則的連結，HTML 頁面必須遵循這些規則才能被認為是良好的 HTML，這意味著可以自動進行錯誤檢查和其他有用的事情。然而，如今，它們的作用並不大，基本上只是為了確保你的文件行為正確。你現在只需要知道這些。
  • <html></html> — <html> 元素。此元素包含整個頁面上的所有內容，有時被稱為根元素。它還包含 lang 屬性，設定文件的主要語言。
  • <head></head> — <head> 元素。此元素充當所有你想在 HTML 頁面上包含的但 *不是* 顯示給頁面檢視者的內容的容器。這包括諸如 關鍵詞 和你希望出現在搜尋結果中的頁面描述，用於為我們的內容設定樣式的 CSS，字元集宣告等等。
  • <meta charset="utf-8"> — 此元素設定文件應該使用的字元集為 UTF-8，它包含來自絕大多數書面語言的大多數字符。從本質上講，它現在可以處理你可能放在它上面的任何文字內容。沒有理由不設定它，它可以幫助避免以後出現一些問題。
  • <meta name="viewport" content="width=device-width"> — 此 視窗元素 確保頁面以視窗寬度呈現，防止移動瀏覽器呈現比視窗更寬的頁面，然後縮小它們。
  • <title></title> — <title> 元素。這設定了你的頁面的標題，也就是頁面載入時在瀏覽器標籤中顯示的標題。它還用於在將頁面新增為書籤/收藏時描述頁面。
  • <body></body> — <body> 元素。它包含 *所有* 你希望在使用者訪問你的頁面時顯示給他們的內容，無論是文字、影像、影片、遊戲、可播放的音訊軌道，還是其他任何內容。

圖片

讓我們再次關注 <img> 元素

html
<img src="images/firefox-icon.png" alt="My test image" />

正如我們之前所說，它將影像嵌入到頁面中它出現的位置。它透過 src（源）屬性來實現，該屬性包含影像檔案的路徑。

我們還包含了一個 alt（替代）屬性。在 alt 屬性 中，你為無法看到影像的使用者指定描述性文字，這可能是由於以下原因

  1. 他們有視力障礙。有嚴重視力障礙的使用者通常使用稱為螢幕閱讀器的工具來朗讀替代文字。
  2. 某些錯誤導致影像無法顯示。例如，嘗試故意更改 src 屬性中的路徑使其不正確。如果你儲存並重新載入頁面，你應該在影像位置看到類似下面的內容

The words: my test image

替代文字的關鍵詞是“描述性文字”。你編寫的替代文字應該為讀者提供足夠的資訊，讓他們對影像傳達的資訊有一個很好的瞭解。在這個例子中，我們當前的文字“我的測試影像”根本不好。對於我們的 Firefox 徽標，更好的替代方案將是“Firefox 徽標：圍繞地球的火焰狐狸”。

現在嘗試為你的影像想出一些更好的替代文字。

注意： 在我們的 無障礙學習模組 中瞭解更多關於無障礙的資訊。

文字標記

本節將介紹一些你將用於標記文字的基本 HTML 元素。

標題

標題元素允許你指定內容的某些部分是標題——或副標題。就像一本書有主標題、章節標題和副標題一樣，HTML 文件也可以。HTML 包含 6 個標題級別，<h1> - <h6>，儘管你通常最多隻使用 3 到 4 個

html
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

注意： HTML 中 <!-- 和 --> 之間的任何內容都是 **HTML 註釋**。瀏覽器在渲染程式碼時會忽略註釋。換句話說，它們在頁面上不可見，只在程式碼中可見。HTML 註釋是你為你的程式碼或邏輯編寫有用註釋的一種方式。

現在嘗試在你的 <img> 元素正上方新增一個合適的標題到你的 HTML 頁面中。

注意： 你會看到你的標題級別 1 有一個隱含的樣式。不要使用標題元素來使文字變大或加粗，因為它們用於 無障礙性 和 其他原因，例如 SEO。嘗試在你的頁面上建立一個有意義的標題序列，不要跳過級別。

段落

如上所述，<p> 元素用於包含文字段落；在標記常規文字內容時，你會經常使用這些元素

html
<p>This is a single paragraph</p>

將你的示例文字（你應該從 你的網站會是什麼樣子？ 中獲取）新增到一個或幾個段落中，放在你的 <img> 元素的正下方。

列表

網路上的許多內容都是列表，HTML 也有專門的元素用於這些內容。標記列表總是至少包含 2 個元素。最常見的列表型別是排序列表和無序列表

  1. 無序列表 用於專案順序無關緊要的列表，例如購物清單。這些列表包含在 <ul> 元素中。
  2. 有序列表 用於專案順序重要的列表，例如食譜。這些列表包含在 <ol> 元素中。

列表中的每個專案都放在 <li>（列表項）元素中。

例如，如果我們要將以下段落片段的一部分轉換為列表

html
<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…
</p>

我們可以將標記修改為以下內容

html
<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

嘗試在你的示例頁面中新增一個有序或無序列表。

連結非常重要——它們使網路成為一個網路！要新增連結，我們需要使用一個簡單的元素——<a>——“a”是“錨”的縮寫形式。要將段落中的文字變成連結，請執行以下步驟

  1. 選擇一些文字。我們選擇了文字“Mozilla 宣言”。
  2. 將文字包含在 <a> 元素中，如下所示
    html
    <a>Mozilla Manifesto</a>
  3. 為 <a> 元素新增一個 href 屬性，如下所示
    html
    <a href="">Mozilla Manifesto</a>
  4. 用你想要連結指向的網頁地址填充該屬性的值
    html
    <a href="https://www.mozilla.org/en-US/about/manifesto/">
  Mozilla Manifesto
</a>

如果你省略網頁地址開頭的 協議 部分（即 https:// 或 http://），你可能會得到意想不到的結果。建立連結後，單擊它以確保它將你帶到你要去的地方。

注意： href 乍一看似乎是一個相當模糊的屬性名稱選擇。如果你記不住它，請記住它代表 hypertext reference（超文字引用）。

現在在你的頁面中新增一個連結，如果你還沒有新增的話。

總結

如果你按照本文中的所有說明操作，你應該最終得到一個看起來像下面的頁面（你也可以 在這裡檢視）

A web page screenshot showing a Firefox logo, a heading saying Mozilla is cool, and two paragraphs of filler text

如果你遇到問題，你可以隨時將你的工作與我們 GitHub 上的完成示例程式碼 進行比較。

在這裡，我們只是真正觸及了 HTML 的表面。要了解更多資訊，請訪問我們的 學習 HTML 主題。