手摸手教你編寫你人生中第一個HTML頁面

本小節主要講解 HTML 的基礎語法內容，將通過編寫第一個 HTML 頁面來學習 HTML 的基本結構、`` 聲明、元素和註釋等內容。通過本小節的學習可以對 HTML 的基礎語法有個全面的掌握，這也是我們後續學習 HTML 其他內容時必須要用到的。 ...

本文是《HTML5與CSS3基礎語法自學教程》的第二篇，首發於【前端課湛】微信公眾號。

導讀：本小節主要講解 HTML 的基礎語法內容，將通過編寫第一個 HTML 頁面來學習 HTML 的基本結構、<!DOCTYPE> 聲明、元素和註釋等內容。通過本小節的學習可以對 HTML 的基礎語法有個全面的掌握，這也是我們後續學習 HTML 其他內容時必須要用到的。

提示：學習 HTML 基礎語法需要用到開發編輯器，這裡使用 Visual Studio Code 編輯器。當然，你也可以選擇你更熟悉的開發編輯器來使用。關於 Visual Studio Code 編輯器的基本操作可以參考本小節中擴展閱讀。

1. HTML 基本結構

1.1 創建第一個 HTML 頁面

打開 Visual Studio Code 編輯器新建一個文件，並且保存為 .html 或 .htm 擴展名的文件。然後，在新建的 HTML 文件中輸入 HTML，這時 Visual Studio Code 編輯器會彈出提示框。

如下圖所示展示了輸入之後的提示框：

根據 Visual Studio Code 編輯器的提示，選擇【html : 5】這個選項，就創建好了一個 HTML 的基本結構。

如下圖所示展示了創建之後的 HTML 模板內容：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>

說明：【html : 5】選項表示使用 HTML5 版本的模板。

1.2 HTML 模板簡要說明

創建了 HTML5 版本的基本結構，接下來我們以從上到下的順序，對這個基本結構中比較核心的內容進行簡單地初步瞭解。

1.2.1 <!DOCTYPE> 聲明

<!DOCTYPE html>

在 HTML5 基本結構的第一行，這塊內容被稱為 HTML 聲明。HTML 聲明的作用是瀏覽器運行該 HTML 頁面時，告知瀏覽器當前 HTML 頁面的版本。

1.2.2 HTML 基本結構

<html lang="en">

    <head></head>
  
    <body></body>

</html>

除了第一行的 HTML 聲明之外，其餘內容才算是 HTML 的基本結構。接下來我們進行分別說明：

<html> 元素：表示當前 HTML 頁面的根元素，用來包含所有其他 HTML 元素。
<head> 元素：表示當前 HTML 頁面的頭部，用來定義當前 HTML 頁面的基本信息，例如標題、關鍵字、作者等內容。
<body> 元素：表示當前 HTML 頁面的主體，用來定義最終顯示在瀏覽器視窗的內容。

2. <!DOCTYPE> 聲明

HTML 頁面的第一行一般都是編寫 HTML 聲明。HTML 聲明的作用就是當瀏覽器運行該 HTML 頁面時來告知瀏覽器當前 HTML 頁面的版本，這樣瀏覽器會準確地進行解析並展示其內容。

HTML 聲明必須要編寫在 HTML 頁面的第一行，一般都是在 <html> 元素之前。並且 HTML 聲明之前不能存在空行或者空格，不然會導致 HTML 聲明失效。

瀏覽器發展至今，其功能也非常的強大。所以，如果 HTML 頁面沒有定義 <!DOCTYPE> 聲明的話，瀏覽器也可以正確地解析該 HTML 頁面併進行顯示。但是，還是建議在編寫 HTML 頁面時定義 <!DOCTYPE> 聲明。

再有，我們需要註意 HTML5 版本和 HTML 4.01 版本的聲明是不同的。

如下示例代碼所示展示了 HTML5 版本的聲明：

<!DOCTYPE html>

HTML 4.01 版本的聲明分別存在三個版本。
- HTML 4.01 Strict
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
該聲明是嚴格型約束，該 DTD 文件包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font），也不允許框架集（Framesets）。
- HTML 4.01 Transitional
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
該聲明是過渡型約束，該 DTD 文件包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font），但不允許框架集（Framesets）。
- HTML 4.01 Transitional
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
```
該聲明是框架集約束，該 DTD 等同於 HTML 4.01 Transitional，但允許框架集內容。

通過兩個版本的 HTML 聲明內容，我們也可以看出 HTML5 版本的聲明內容簡化了不少。不僅沒有了版本信息，也不需要約束文件。

說明：約束文件指的是如上述 strict.dtd、loose.dtd 或者 frameset.dtd 文件。HTML 的約束文件是用來定義 HTML 的元素以及編寫規範。

3. HTML 元素

除了 HTML 聲明之外，其他內容都是 HTML 元素。首先，需要搞清楚元素（Element）和標簽（Tag）之間的區別，如下圖所示：

元素（Element）：是用來包含文字、圖片或者音視頻的內容，一般是由標簽和內容組成。
標簽（Tag）：是元素的組成部分，一般分為開始標簽和結束標簽。

3.1 HTML 元素

HTML 元素是 HTML 的重要組成部分之一，如下圖所示展示了 HTML 元素的語法結構：

HTML 元素可以分為閉合元素和空元素兩種類型：

閉合元素：具有開始標簽和結束標簽，而且開始標簽和結束標簽是成對出現的。如下示例代碼展示了閉合元素：

<div>文本內容</div>

空元素：只有開始標簽，而沒有結束標簽。如下示例代碼展示了空元素：

<input type="text">

註意：在編寫 HTML 元素時，如果是閉合元素不要忘記結束標簽，如果是空元素不要編寫結束標簽。目前的開發編輯器會有相應的提示功能。

由於 HTML 是大小寫不敏感的，所以 HTML 元素的元素名寫成大寫或小寫都是允許的，例如 <div>、<Div> 和 <DIV> 是一樣的含義。

但是 W3C 組織早在 HTML4 版本時，建議元素名使用小寫形式。後來出現的 XHTML 是強制元素名必須使用小寫形式。所以，元素名的編寫還是儘量使用小寫形式，而且現在的開發編輯器的提供功能也都是小寫形式的。

註意：<html> 元素是比較特殊的元素，稱為根元素。在一個 HTML 頁面中只能存在一個 <html> 元素，即使編寫了多個 <html> 元素，運行 HTML 頁面時瀏覽器也會自動忽略。

3.2 HTML 標簽

HTML 標簽實際上是 HTML 元素的組成部分之一，分為開始標簽和結束標簽。

開始標簽（Opening Tag）：表示某個元素是從這裡開始的。
結束標簽（Closing Tag）：表示某個元素是到這裡結束的。

無論是開始標簽還是結束標簽都具有的結構：

左尖角號
元素名
右尖角號

如下圖所示展示了標簽的結構：

而結束標簽相比開始標簽多了個結束符（/）。如下圖所示展示了結束標簽的結構：

3.3 HTML 元素的屬性

屬性是 HTML 元素的重要組成部分，用來定義某個元素的信息。例如為 <div> 元素定義 ID 屬性，就是定義了唯一標識。

屬性定義在元素的開始標簽中，這樣無論是閉合元素還是空元素都可以正常使用屬性。屬性的語法結構是鍵值對形式的。如下圖所示展示了屬性的語法結構：

屬性名（attribute name）：其數量和作用都是 HTML 給定的。
屬性值（attribute value）：屬性對應的值，建議使用一對雙引號進行包裹。

註意：不同的屬性，對應不同類型的值。

與元素的情況類似，屬性的編寫 W3C 組織也是建議使用小寫形式。目前開發編輯器的提示功能也都是提供小寫形式的。

同一個元素是允許編寫多個不同的屬性的，但在同一個元素中不能同時定義多個相同的屬性。再有，HTML 元素的屬性可以劃分為以下 4 種：

標準（通用）屬性：HTML 元素幾乎都具有的屬性，例如 id、name、style 和 class 屬性等。
專有（私有）屬性：HTML 中某些元素特有的屬性，例如 <form> 元素的 action 屬性等。
事件屬性：用來為 HTML 元素註冊 DOM 事件的屬性，例如 onclick 屬性等。
自定義屬性：第三方框架中為了完成某個特定功能而定義的屬性，例如 Vue 框架的 v-if 屬性等。

4. HTML 頭部

HTML 頭部具體是指 <head> 元素以及該元素所包含的所有元素，其作用是用來定義當前 HTML 頁面的基本信息，例如 HTML 頁面的標題、編寫格式、作者、關鍵字以及描述等內容。

4.1 `<head>` 元素

<head> 元素是 HTML 頁面基本結構中的組成部分，其作用是定義 HTML 頁面的基本信息。可定義在 <head> 元素內的元素有如下：

<title> 元素：定義 HTML 頁面的標題，顯示在瀏覽器的標題或標簽頁上。如下示例代碼所示展示了 <title> 元素的用法：

<title>Document</title>

<base> 元素：定義 HTML 頁面中所有相對 URL 的根 URL。如下示例代碼所示展示了 <base> 元素的用法：

<base target="_blank" href="http://www.example.com/">

註意：一個 HTML 頁面只能定義一個 <base> 元素。如果一個 HTML 頁面定義了多個 <base> 元素的話，則只有第一個 <base> 元素有效。

<link> 元素：定義 HTML 頁面引入的外部資源，比較常見的是引入外部 CSS 文件或圖標文件等。

如下示例代碼所示展示了通過 <link> 元素引入外部 CSS 文件：

<link href="link-element-example.css" rel="stylesheet">

如下示例代碼所示展示了通過 <link> 元素引入外部圖標文件：

<link rel="icon" href="favicon.ico">

<style> 元素：定義 HTML 頁面的 CSS 樣式，一般稱為內嵌樣式表。如下示例代碼所示展示了通過 <style> 元素定義內嵌樣式表：

<style type="text/css">
    body {
    color:red;
    }
</style>

<meta> 元素：定義 HTML 頁面的元數據信息，例如編碼格式、作者、關鍵字等。如下示例代碼所示展示了通過 <meta> 元素的用法：

<meta charset="UTF-8">

<script> 元素：定義 HTML 頁面的可執行的腳本，一般多為 JavaScript 腳本。如下示例代碼所示展示了通過 <script> 元素定義 JavaScript 腳本代碼：

<script type="text/javascript">
    console.log('列印一個測試信息.');
</script>

<noscript> 元素：定義當 HTML 頁面的腳本代碼不被支持或者瀏覽器關閉了腳本執行時的替代內容。如下示例代碼所示展示了 <noscript> 元素的用法：

<noscript>
    <a href="http://www.example.com/">這是一個鏈接</a>
</noscript>

<command> 元素：定義 HTML 頁面允許用戶可以調用的命令。該元素已被廢棄！

4.2 `<meta>` 元素

<meta> 元素是用來定義不能由 <base>、<link>、<script>、<style> 和 <title> 元素定義的元數據信息。並且 <meta> 元素是個空元素。

<meta> 元素常用的用法如下所示：

為搜索引擎定義關鍵詞：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

為網頁定義描述內容：

<meta name="description" content="Free Web tutorials on HTML and CSS">

定義網頁作者：

<meta name="author" content="KingJ">

每30秒中刷新當前頁：

<meta http-equiv="refresh" content="30">

HTML5 版本定義編碼格式：

<meta charset="UTF-8">

定義 HTML 頁面的視口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

提示：除了以上羅列的常見用法之外，<meta> 元素還有很多其他用法，具體的用法在對應的章節進行詳細講解。

5. HTML 註釋

與很多開發語言類似，HTML 語言提供了編寫註釋的語法內容。在瀏覽器運行 HTML 頁面時，瀏覽器會自動忽略註釋裡面的內容，用戶是看不到 HTML 頁面中有關註釋的內容的。

當一段內容被  包裹起來時，那麼這段內容就是一個註釋內容了。如下圖所示展示了 HTML 註釋的語法結構：

註釋可以用來更好地描述某一段 HTML 代碼的含義或作用。無論是自己一段時間之後回顧（review）代碼，還是別人處理這段代碼，註釋都是起到了很大作用的。

說明：編寫註釋也是程式員在開發工作中的一個優良習慣，希望你可以學習並保持這一優良習慣。

6. 擴展閱讀

6.1 Visual Studio Code 下載與安裝

Visual Studio Code 編輯器是 Microsoft 公司在 2015 年 4 月 30 日 Build 開發者大會上推出的一款運行於 Mac OS X、Windows 和 Linux 之上的，針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器。

我們可以通過訪問 Visual Studio Code 編輯器的官網來瞭解，如下圖所示展示了 Visual Studio Code 官網的部分界面：

Visual Studio Code 編輯器的官網會自動識別我們當前的操作系統，並提供對應的安裝包下載。我們需要做的就是下載對應版本的安裝包到本地電腦，再進行安裝即可。

提示：這裡有關具體的下載和安裝步驟就不做詳細說明瞭，因為非常的簡單。

6.2 Visual Studio Code 設置中文界面

一般情況下，安裝好的 Visual Studio Code 編輯器的界面就是中文的。但也不妨有特殊情況出現，如果你在安裝完 Visual Studio Code 打開後發現界面是英文（或者是任何其他語言）界面可以通過擴展安裝中文語言插件來解決。具體可以按照如下步驟進行操作：

提示：以下操作請在你的電腦可以正常聯網的情況下進行操作。

a. 打開 Visual Studio Code 編輯器的擴展界面

打開 Visual Studio Code 編輯器之後，我們可以看到在最左邊是有 5 個菜單的。其中第 5 個菜單（圖標）表示是擴展，如下圖所示展示了擴展菜單所在的位置：

b. 搜索中文語言插件包

在擴展界面的搜索框中，輸入【Chinese】關鍵字來搜索中文語言插件包。搜索結果中的第一個結果一般就是我們要找的中文語言插件包，如下圖所示展示了搜索結果：

在搜索中第一個結果點擊【Install】按鈕，來安裝對應的插件包即可。

c. 重啟 Visual Studio Code 編輯器

安裝成功之後 Visual Studio Code 編輯器會彈出讓你重啟編輯器的提示框，如下圖所示展示安裝插件成功之後的提示框：

這時點擊提示框中的【Restart Now】按鈕，來重啟 Visual Studio Code 編輯器。重啟之後，Visual Studio Code 編輯器的界面就成功地改為了中文。如下圖所示展示了中文操作界面的 Visual Studio Code 編輯器：

6.3 Visual Studio Code 新建文件

Visual Studio Code 編輯器新建文件有兩種方式進行操作：

a. 通過菜單完成新建操作

點擊 Visual Studio Code 編輯器頂部菜單中的【文件】，在彈出的菜單中選擇【新建文件】選項，完成新建文件的操作。

如下圖所示展示了新建文件的菜單位置：

b. 通過快捷鍵完成新建操作

如果你的操作系統是 Windows 的話，可以通過【Ctrl+N】快捷鍵直接創建一個新的文件。如果你的操作系統是 Mac OS 的話，可以通過【Command+N】快捷鍵直接創建一個新的文件。

註意：新建的文件在沒有保存的情況下，是沒有任何擴展名的。也就是說，新建的文件不屬於任何文件類型。

6.4 Visual Studio Code 保存文件

Visual Studio Code 編輯器保存文件有兩種方式進行操作：

a. 通過菜單完成保存操作

點擊 Visual Studio Code 編輯器頂部菜單中的【文件】，在彈出的菜單中選擇【保存】選項，完成保存文件的操作。

如下圖所示展示了保存文件的菜單位置：

b. 通過快捷鍵完成保存操作

如果你的操作系統是 Windows 的話，可以通過【Ctrl+S】快捷鍵完成保存文件的操作。如果你的操作系統是 Mac OS 的話，可以通過【Command+S】快捷鍵完成保存文件的操作。

註意：保存文件的時候一定要指定文件的擴展名。如果不指定文件的擴展名，該文件將不屬於任何文件類型，並且會影響該文件的內容編寫。

7. 總結

本小節從 HTML 基本結構開始講解，然後根據 HTML 基本結構進行分別講解，其中包括 <!DOCTYPE> 聲明、HTML 元素、HTML 頭部以及 HTML 註釋等內容。其中：

<!DOCTYPE> 聲明：重點在於其作用是什麼、用法與註意事項，以及 HTML 4.01 和 HTML 5 兩個版本的寫法。
HTML 元素：重點在於 HTML 元素的語法結構、分類和分類的特點，以及屬性的相關內容。
HTML 頭部：重點在於 HTML 頭部的作用、包含哪些元素及作用，以及常見的 <meta> 元素的用法。

預告：下一節，我們介紹 CSS 的基本信息，其中包括 CSS 概念、CSS 的發展歷程，以及 CSS 版本的發展歷程等內容。

作者二維碼.png