2.1 HTML語法

與任何語言一樣，HTML具有規則，這個規則就叫做語法。

1. HTML 語法

HTML是 HyperText Markup Language的縮寫(超文本標記語言)。

• HyperText 意味着它使用了互聯網的HTTP部分。
• 標記是指你所寫的代碼被註釋爲關鍵字的意思。
• 語言是指人和計算機都能讀懂的語言。

和任何語言一樣，HTML也有一套規則。這些規則相對簡單。它歸結起來就是定義邊界，知道某事從哪裏開始，哪裏結束。

下面是一個HTML的示例段落:

<p>如果說俄羅斯方塊教會了我什麼，那就是錯誤堆積起來，成績就會消失。</p>

結果：

如果說俄羅斯方塊教會了我什麼，那就是錯誤堆積起來，成就就會消失。

你所看到的角括號< 和 > 是 HTML 標籤。它們定義了事物的起點和終點。

它們中的每一個都有特定的含義。在這種情況下，p代表段落。

它們通常是成對出現的：

• 開頭標記 <p> 定義了段落的開始。
• 結尾標籤</p>定義了它的結尾。

開頭標記和關閉標記之間的唯一區別是標記名稱前面的斜線/。

當你把一個開頭標記、一個結束標記以及中間的所有內容結合起來，你就得到了一個HTML元素。整個行是一個HTML元素，它使用了HTML標籤<p>和</p>。

如果你在瀏覽器中查看這個示例，你會發現HTML標籤不會被瀏覽器顯示。它們只會被瀏覽器讀取，以知道你寫了什麼類型的內容。

2. 在哪裏寫HTML

你可能遇到過一些簡單的文本文件，那些有.txt擴展名的文本文件。

要使這樣的文本文件成爲一個HTML文檔（而不是文本文檔），你需要使用.html擴展名。

打開你的文本編輯器，然後複製粘貼以下內容。

<p>這是我的第一個網頁！</p>

將此文件保存爲my-first-webpage.html，用瀏覽器打開後，你就會看到。

這是我的第一個網頁!

注意：

• 使用像Notepad++這樣的文本編輯器來創建HTML文檔。
• 使用像火狐瀏覽器一樣的網頁瀏覽器打開HTML文檔

3. 屬性 Attributes

屬性的作用就像綁定在HTML元素上的額外信息。它們被寫在一個HTML標記中。因此，它們也不會被瀏覽器顯示出來。

例如， href屬性用於定義鏈接的目標（使用 anchor 錨標記）。

<a href="https://www.mozilla.com/firefox">下載火狐瀏覽器</a>

結果

下載Firefox

有16個HTML屬性可以用在任何HTML元素上。所有這些屬性都是可選的。

你主要會使用class（用於CSS）和title（也就是懸停項目時出現的工具提示）。

有些HTML元素有強制性的屬性。例如，當插入圖片時，你必須使用 src（source）屬性提供圖片的位置。

<img src="#" alt="圖片的描述">

考慮到<img>元素的目的是顯示一個圖片，所以要求圖片的路徑是合理的。

4. 註釋 Comments

如果你在代碼中寫了一些東西而不破壞瀏覽器如何顯示你的頁面，你可以寫註釋。它們會被瀏覽器忽略，只對我們這些編寫代碼的人有用。

註釋以<!------開頭，以---->結尾。

<!---這句話將被瀏覽器忽略--->
<p>Hello World!</p>

結果：

Hello World!

5. 自閉式元素 Self-enclosing elements

有些HTML元素只有一個開場標記。

<br> <!----斷行--->
<img src="https://placehold.it/50x50" alt="Description"> <!--圖片--> <!
<input type="text"> <!-- 文本輸入-->

由於它們沒有封閉標籤，因此不能包含任何東西，自閉式元素通常帶有一些屬性，爲它們提供額外的信息。