練習 - 將基本 HTML 新增至您的 Web 應用程式

10 分鐘

目前，您的網站有空白的 HTML 檔案。讓我們新增一些程式碼！目標是使用超文字標記語言 (HTML) 來描述客戶瀏覽器應該顯示的網頁。此時若有一個起始範本該多好？編輯器可以為您便利填入一些典型範本或 HTML 結構。

在此單元中，您將新增基本 HTML 內容、在瀏覽器中開啟 HTML 網頁，並首次查看開發人員工具。

新增一些 HTML 程式碼

Visual Studio Code 為現成可用的 HTML 程式設計提供基本支援。其中包含語法醒目提示、使用 IntelliSense 的智慧完成，以及可自訂的格式。

在 Visual Studio Code 中開啟您的網站資料夾，然後在檔案總管中選取 index.html 檔案以將其開啟。
在 index.html 頁面中，輸入 html:5，然後選取 Enter。 HTML5 範本程式碼會新增到該檔案。

注意

如果 HTML5 範本程式碼未新增至 index.html 檔案，請嘗試關閉該檔案並重新開啟。

請編輯此範本程式碼，使其類似下列程式碼。接下來，在 Windows 上選取 Control+S，或在 macOS 上選取 Command+S 以儲存檔案。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML 有許多不同的版本。 doctype <!DOCTYPE html> 表示此 HTML 文件包含 HTML5 程式碼。

雖然我們不會深入探討所有 HTML 元素的意義，但會指出數個重要項目。 meta 標籤表示檢視者通常看不到的「中繼資料」資訊，除非他們在自己的瀏覽器中檢視原始程式碼。 Meta 項目或標籤提供網頁的相關描述性資訊。例如，其可協助搜尋引擎處理您網頁中要在搜尋結果中傳回的資訊。

UTF-8 的 字元集 (charset) 可能看似不重要，但其對於制定電腦解譯字元的方式至關重要。如果遺漏字元集的中繼資料，會導致安全性遭到入侵。字元集屬性有相當多的歷程記錄和技術資訊，但是其在此練習中的重點在於 Visual Studio Code 典型範本可提供一些合理的預設值。

編輯標題

HTML 程式碼中的 <head> 元素包含瀏覽器索引標籤內看不到的網站相關資訊。

「中繼資料」會定義 HTML 文件的相關資料，例如字元集、指令碼，以及網頁開啟所在的瀏覽器。

網頁的「標題」會顯示在瀏覽器視窗頂端，並在許多方面都很重要。例如，搜尋引擎會利用並顯示標題。讓我們新增標題。

重要

從此位置開始，省略符號 (...) 表示先前宣告的前面或後面程式碼。應該要有足夠的程式碼可作為內容，以對您的工作進行必要的變更或更新，但是您不應該將省略符號複製並貼到您的程式碼中。

在編輯器中，修改 <title> 元素，使其類似於下列範例。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

若要將樣式套用至網頁上的 HTML 元素，您可以直接在網頁標頭中撰寫 CSS 程式碼。在 HTML 頁面中撰寫 CSS 稱為「內部 CSS」。不過，最佳做法是分隔 HTML 結構和 CSS 樣式。具有個別的 CSS 頁面稱為「外部 CSS」。精簡且分段的程式碼通常會更容易閱讀。您可以使用一或多個外部樣式表來提供多個網頁。與其使用重複的 CSS 程式碼更新每個 HTML 網頁，您可以變更單一 CSS 檔案，然後將這些更新套用到所有相依的網頁。讓我們連結到外部 CSS 檔案。

在 Visual Studio Code 編輯器中，在 <title> 元素後面新增一個空白行、輸入 link，然後選取 Enter。 Visual Studio Code 應將下列行新增至您的 index.html 檔案。
```
<link rel="stylesheet" href="">
```

將 href= 更新為 href="main.css"，然後在 Windows 上選取 Control+S 或在 macOS 上選取 Command+S 以儲存檔案。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

編輯本文

讓我們開始填入 <body> 元素。

<body> 元素包含您的網站內容，客戶可以在其瀏覽器中看到該內容。

在 <body> 元素中，新增標題<h1>元素，其後為段落<p>元素，然後建立一份未排序清單<ul>，清單包含數個清單項目<li>元素。

編輯程式碼，或複製並貼上，以便其如下列範例所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

您可以使用 ID 屬性 (在 <p> 元素中使用) 為一個元素設定樣式，而 class 屬性 (在 <li> 元素中使用) 則會為同一類別的所有元素設定樣式。

在下一個步驟之前，請務必選取 Control+S 或 Command+S 來儲存您的檔案。

在瀏覽器中開啟

您可以在瀏覽器中開啟 HTML 檔案，在本機預覽您的網頁。網址不會以 https:// 開頭，而是由您的瀏覽器指向本機檔案路徑，且該路徑應與 C:/dev/simple-website/index.html 看起來相似。

若要使用 Visual Studio Code 進行預覽，請以滑鼠右鍵按一下 index.html 並選取 [在預設瀏覽器中開啟]，或選取 index.html 檔案並使用鍵盤快速鍵 Alt+B。

重要

如果您遇到問題，請確定您直接用右鍵選取檔案名稱圖示或文字。如果出現 Visual Studio Code 對話方塊，請選取 [是，我信任作者]；這是工作區信任功能，可讓您決定您的專案資料夾是否應允許或限制自動程式碼執行。由於您才剛剛建立檔案，因此其為安全的。

網頁隨即會在您的預設瀏覽器中開啟。

使用開發人員工具檢視網頁

您可以在瀏覽器中使用開發人員工具來檢查網頁。讓我們來試試看。

以滑鼠右鍵按一下網頁並選取 [檢查] 來開啟 [開發人員工具]，或是嘗試下列鍵盤快速鍵：
- 請按下 [開發人員工具] 鍵盤快速鍵，即 F12。
- 請在 Windows 與 Linux 按下 Ctrl+Shift+I，或在 Mac 按下 Option+Command+I。
這些鍵盤快速鍵適用於 Microsoft Edge、Chrome，以及 Firefox。如果您使用的是 Safari，請參閱 Web 開發工具。安裝時，選取 [Safari] > [喜好設定]，然後選取 [進階]。在窗格底部，選取 [在功能表列中顯示 [開發] 功能表] 核取方塊。依序選取 [開發] > [顯示網頁檢查]。如需詳細資訊，請參閱 Safari Web Inspector 文件。

若要深入瞭解如何開啟開發人員工具和主要的可用功能，請參閱 DevTools 概觀一文。
選取 [項目] 索引標籤。
將您的滑鼠移至 [項目] 索引標籤中顯示的 HTML 元素，然後將各個不同的元素內容展開。

開發人員工具中的 [元素] 索引標籤顯示瀏覽器中所轉譯的文件物件模型 (DOM)。在偵錯時，去看一下瀏覽器如何理解您的原始程式碼通常很重要。