HTML 基本語法

什麼是 HTML？

HTML（超文字標記語言）是一種標記語言，它告訴網路瀏覽器如何構建您訪問的網頁。它可以像網頁開發者希望的那樣複雜或簡單。HTML 由一系列元素組成，您可以使用它們來包含、包裝或標記內容的不同部分，使其以某種方式顯示或表現。包圍的標籤可以將內容變成連線到另一個頁面的超連結、使單詞斜體化等等。例如，考慮以下一行文字：

My cat is very grumpy

如果我們希望文字獨立存在，我們可以透過將其包含在段落（<p>）元素中來指定它是一個段落。

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

HTML 存在於名為 HTML 文件的文字檔案中，或簡稱 文件，副檔名為 .html。我們之前討論過網頁，HTML 文件包含網頁的內容並指定其結構。

您會遇到的最常見的 HTML 檔案是 index.html，它通常用於包含網站的主頁內容。在子資料夾中看到自己的 index.html 也很常見，因此一個網站可以在不同的位置擁有多個索引檔案。

HTML 元素的結構

讓我們進一步探討上一節中的段落元素

我們元素的結構是

• 開始標籤：這由元素名稱（在此示例中，段落為 p）組成，並用尖括號包圍。此開始標籤標記元素的開始或生效之處。在此示例中，它位於段落文字的開頭之前。
• 內容：這是元素的內容。在此示例中，它是段落文字。
• 結束標籤：這與開始標籤相同，只是它在元素名稱之前包含一個正斜槓。這標記了元素的結束位置。未能包含結束標籤是初學者常犯的錯誤，可能會導致奇怪的結果。

元素是開始標籤，後跟內容，再後跟結束標籤。

建立你的第一個 HTML 元素

讓我們練習編寫自己的 HTML 元素

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
2. 用 <em> 和 </em> 標籤包裹這行文字。要開啟元素，請將開始標籤 <em> 放在行的開頭。要關閉元素，請將結束標籤 </em> 放在行的末尾。這樣做應該會使輸出面板中呈現的文字顯示為斜體。
3. 如果您樂於冒險，可以嘗試查詢更多 HTML 元素並將其應用於文字示例。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

This is my text.

<em>This is my text.</em>

巢狀元素

元素可以放置在其他元素中。這稱為巢狀。如果我們想說明我們的貓非常脾氣暴躁，我們可以將“非常”這個詞包裹在<strong>元素中，這意味著該詞將具有強調的文字格式

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

巢狀有正確和錯誤的方式。在上面的例子中，我們首先打開了 p 元素，然後打開了 strong 元素。為了正確巢狀，我們應該先關閉 strong 元素，然後關閉 p 元素。

以下是錯誤巢狀方式的示例

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

標籤必須以它們相互巢狀或包含的方式開啟和關閉。像上面示例中那種重疊的方式，瀏覽器必須猜測您的意圖。這種猜測可能會導致意想不到的結果。

空元素

並非所有元素都遵循開始標籤、內容和結束標籤的模式。有些元素由單個標籤組成，通常用於在文件中插入/嵌入某些內容。此類元素稱為空元素。例如，<img> 元素將影像檔案嵌入到頁面中。

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
  alt="Firefox icon" />

這將輸出以下內容

屬性

元素也可以有屬性。屬性看起來像這樣

屬性包含元素的額外資訊，這些資訊不會顯示在內容中。在此示例中，class 屬性是一個標識名稱，用於使用樣式資訊定位元素。

屬性應該有

• 它與元素名稱之間有一個空格。（對於具有多個屬性的元素，屬性之間也應該用空格分隔。）
• 屬性名稱，後跟一個等號。
• 一個屬性值，用開頭和結尾的引號括起來。

向元素新增屬性

現在又輪到你了。在本節中，我們將讓你向 <img> 元素新增屬性，以在頁面上顯示影像。<img> 元素可以接受幾個屬性，包括

• src：一個必需屬性，指定影像的位置。例如：src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"。
• alt：影像的文字描述。例如：alt="Firefox 圖示"。
• width：影像的寬度（以畫素為單位）。例如：width="300"。
• height：影像的高度（以畫素為單位）。例如：height="300"。

按照以下步驟完成任務

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
2. 在網上找到您最喜歡的圖片，右鍵單擊它，然後按“複製圖片連結/地址”。
3. 回到 MDN 演練場，將 src 屬性新增到 <img> 元素中，並將其值設定為步驟 2 中的連結。
4. 將 alt 屬性設定為影像的適當描述。
5. 將 width 屬性設定為例如 300 的值，以便您可以在輸出面板中更好地檢視影像。如果需要，進行調整。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

<img />

<img src="<URL-OF-IMAGE>" alt="A description of the image" width="300" />

布林屬性

有時您會看到沒有值的屬性。這完全可以接受。這些被稱為布林屬性。當布林屬性沒有值，或有任何值（即使是 "false"）時，布林屬性總是設定為 true。否則，如果屬性沒有寫入 HTML 標籤中，則屬性設定為 false。規範要求屬性的值要麼是空字串（包括當屬性沒有明確指定值時）要麼與屬性的名稱相同，但其他值的工作方式也相同。例如，考慮您可以分配給表單輸入元素的disabled屬性。（您可以使用它來停用表單輸入元素，以便使用者無法進行輸入。停用的元素通常呈現灰顯外觀。）例如

<input type="text" disabled="disabled" />

作為簡寫，可以接受將其寫成如下形式

<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled />

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text" />

作為參考，上面的示例還包含一個未停用的表單輸入元素。上面的 HTML 示例產生以下結果

省略屬性值周圍的引號

如果您檢視許多其他網站的程式碼，您可能會遇到一些奇怪的標記樣式，包括沒有引號的屬性值。這在某些情況下是允許的，但在其他情況下也可能會破壞您的標記。下面程式碼片段中的元素 <a> 稱為錨點。錨點將文字括起來並將其轉換為連結。href 屬性指定連結指向的網址。您可以只使用 href 屬性編寫下面的基本版本，如下所示：

<a href=https://www.mozilla.org/>favorite website</a>

錨點還可以有一個 title 屬性，用於描述連結頁面。然而，一旦我們以與 href 屬性相同的方式新增 title，就會出現問題

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

如上所述，瀏覽器錯誤地解釋了標記，將 title 屬性誤認為是三個屬性：一個值為 The 的 title 屬性，以及兩個布林屬性 Mozilla 和 homepage。顯然，這不是預期目的！這會導致錯誤或意外行為，正如您在下面的即時示例中看到的那樣。嘗試將滑鼠懸停在連結上以檢視標題文字！

始終包含屬性引號。這可以避免此類問題，並使程式碼更具可讀性。

單引號還是雙引號？

在本文中，您還會注意到屬性是用雙引號括起來的。但是，您可能會在某些 HTML 程式碼中看到單引號。這是一個風格問題。您可以隨意選擇自己喜歡的。這兩行是等效的

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

確保不要混用單引號和雙引號。下面這個例子展示了一種錯誤的引號混用方式

<a href="https://www.example.com'>A link to my example.</a>

然而，如果你使用一種型別的引號，你可以在你的屬性值內部包含另一種型別的引號。

<a href="https://www.example.com" title="Isn't this fun?">
  A link to my example.
</a>

要在相同型別的引號（單引號或雙引號）中包含引號，請使用字元引用。例如，這會導致錯誤

<a href="https://www.example.com" title="An "interesting" reference">A link to my example.</a>

相反，你需要這樣做

<a href="https://www.example.com" title="An &quot;interesting&quot; reference">A link to my example.</a>

HTML 文件的結構

單個 HTML 元素本身並不是很有用。接下來，讓我們看看單個元素如何組合形成一個完整的 HTML 頁面。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

我們這裡有

1. <!doctype html>: 文件型別宣告。當 HTML 誕生之初（1991-1992 年），文件型別宣告旨在作為一套規則的連結，HTML 頁面必須遵循這些規則才能被認為是良好的 HTML。文件型別宣告過去看起來像這樣：

   html

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   

   最近，文件型別宣告是一個歷史遺留物，需要包含它才能讓所有其他內容正常工作。<!doctype html> 是最短的字元字串，它被視為有效的文件型別宣告。這就是您需要知道的一切！

2. <html></html>: <html> 元素。此元素包裹頁面上的所有內容。它有時被稱為根元素。

3. <head></head>：<head> 元素。此元素充當您希望包含在 HTML 頁面上的所有內容（不是頁面將顯示給訪問者的內容）的容器。這包括在搜尋結果中顯示的關鍵字和頁面描述、用於樣式內容的 CSS、字元集宣告等等。您將在本系列的下一篇文章中瞭解更多資訊。

4. <meta charset="utf-8">：<meta> 元素。此元素表示無法由其他 HTML 元相關元素表示的元資料，例如 <base>、<link>、<script>、<style> 或 <title>。charset 屬性將文件的字元編碼指定為 UTF-8，它包括絕大多數人類書寫語言中的大多數字符。透過此設定，頁面現在可以處理它可能包含的任何文字內容。沒有理由不設定此項，並且它可以幫助避免以後出現一些問題。

5. <title></title>：<title> 元素。這設定了頁面的標題，即頁面載入時瀏覽器選項卡中顯示的標題。頁面標題也用於在頁面被收藏時描述頁面。

6. <body></body>：<body> 元素。此元素包含頁面上顯示的所有內容，包括文字、影像、影片、遊戲、可播放的音訊軌道或任何其他內容。

向 HTML 文件新增一些功能

此時，我們希望您練習編寫一些稍微更實質性的 HTML 內容。為此，您有幾個選擇——您可以在本地計算機上建立 HTML，或像之前的示例一樣使用 MDN 演練場。

• 在本地計算機上操作

  1. 複製上一節中列出的 HTML 頁面示例，並將其貼上到您的程式碼編輯器中的新檔案中。
  2. 按照以下說明對頁面進行更改。
  3. 將檔案儲存為 index.html，然後在新的瀏覽器標籤頁中載入它以檢視結果。

  注意：您也可以在我們的 GitHub 儲存庫中找到這個基本 HTML 模板。您可以複製此檔案，而不是自己建立它。

• 要在 MDN 演練場中操作，請單擊下方輸出面板中的“播放”以編輯示例，然後按照以下說明進行操作。如果您出錯，可以使用 MDN 演練場中的“重置”按鈕清除您的工作。

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

以下是要遵循的說明

1. 在 <body> 元素的開始標籤正下方，新增文件的主標題。這應該被包裹在 <h1> 開始標籤和 </h1> 結束標籤中。
2. 編輯段落內容，使其包含您感興趣的主題的文字。
3. 將重要的詞語用粗體顯示，方法是將它們包含在 <strong> 元素中。
4. 在您的段落中新增兩個連結。這是透過使用 <a> 元素實現的。
5. 如文章前面所解釋的，向您的文件新增一張圖片。將其放置在段落下方。如果它太大而無法看清，請為其新增一個 width 屬性，以將其縮小。

如果你真的卡住了，你可以在這裡檢視解決方案

<h1>Some music</h1>
<p>
  I really enjoy <strong>playing the drums</strong>. One of my favorite drummers
  is Neal Peart, who used to play in the band
  <a href="https://en.wikipedia.org/wiki/Rush_%28band%29">Rush</a>. My favorite
  Rush album is currently
  <a href="https://www.deezer.com/album/942295">Moving Pictures</a>.
</p>
<img
  src="https://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"
  alt="Rush Moving Pictures album cover"
  width="300" />

HTML 中的空白字元

在上面的示例中，您可能已經注意到程式碼中包含大量空白。這是可選的。這兩個程式碼片段是等效的

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

無論您在 HTML 元素內容中使用多少空白（可以包括一個或多個空格字元，也包括換行符），HTML 解析器在渲染程式碼時都會將每個空白序列縮減為一個空格。那麼為什麼使用如此多的空白呢？答案是可讀性。

如果您的程式碼格式良好，則更容易理解其內容。在我們的 HTML 中，每個巢狀元素都比其包含的元素多縮排兩個空格。由您選擇格式化樣式（例如，每個縮排級別使用多少空格），但您應該考慮對其進行格式化。

讓我們看看瀏覽器如何渲染上面帶有和不帶有空白的兩個段落

const noWhitespace = document.getElementById("noWhitespace").innerHTML;
console.log(noWhitespace);
// "Dogs are silly."

const whitespace = document.getElementById("whitespace").innerHTML;
console.log(whitespace);
// "Dogs
//    are
//        silly."

字元引用：在 HTML 中包含特殊字元

在 HTML 中，字元 <、>、"、' 和 & 是特殊字元。它們是 HTML 語法本身的一部分。那麼如何在文字中包含這些特殊字元呢？例如，如果您想使用 & 符號或小於號，但又不希望它被解釋為程式碼。

您可以使用字元引用來完成此操作。這些是表示字元的特殊程式碼，用於這些精確的情況。每個字元引用都以 & 號 (&) 開頭，並以分號 (;) 結尾。

字元引用等價物很容易記住，因為其使用的文字可以被視為 < 的“小於”、" 的“引號”，依此類推。要了解更多關於實體引用的資訊，請參閱XML 和 HTML 字元實體引用列表 (Wikipedia)。

在下面的示例中，有兩個段落

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

在下面的即時輸出中，您可以看到第一個段落出了問題。瀏覽器將第二個 <p> 例項解釋為開始一個新的段落。第二個段落看起來很好，因為它有帶字元引用的尖括號。

HTML 註釋

HTML 有一種在程式碼中編寫註釋的機制。瀏覽器會忽略註釋，使註釋對使用者來說實際上是不可見的。註釋的目的是允許您在程式碼中包含註釋，以解釋您的邏輯或編碼。如果您在離開程式碼庫足夠長的時間後返回，並且不完全記得它，這將非常有用。同樣，當不同的人進行更改和更新時，註釋是無價的。

要編寫 HTML 註釋，請將其包含在特殊標記 <!-- 和 --> 中。例如

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

如您在下方所見，即時輸出中只顯示了第一個段落。

總結

您已經完成了本文的學習！希望您喜歡這次 HTML 基礎知識之旅。

此時，您應該瞭解 HTML 的外觀及其基本工作原理。您還應該能夠編寫一些元素和屬性。本模組後續文章將進一步探討此處介紹的一些主題，並介紹該語言的其他概念。

• 隨著您開始更多地學習 HTML，請考慮學習 CSS（層疊樣式表）的基礎知識。CSS 是用於設定網頁樣式的語言，例如更改字型或顏色或修改頁面佈局。HTML 和 CSS 配合得很好，您很快就會發現。

另見

• 使用 CSS 將顏色應用於 HTML 元素

• 概述：使用 HTML 構造內容
• 下一頁