F2E 前端工程文件

Appearance

HTML 的組成 ​

HTML 元素的組成有標籤及屬性。

標籤 ​

  • 起始標籤 （Opening tag）：先打角括弧，也就是大於、小於的符號 <、>，裡面再放入元素名稱，如下圖所示：<p>。（起始標籤代表這個元素從這裡開始）
  • 結束標籤 （Closing tag）：與起始標籤一樣，只是在元素名稱前面多了個前置斜線 /，也就是 </p>。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。（在寫 HTML 時，很容易忘了最後的結束標籤，提醒大家要多注意唷！）
  • 內容（Content）：這個元素的內容，以上面的例子來說，內容就是這句文字。
  • 元素（Element）：由起始標籤、結束標籤、內容所組成。

元素的組成

屬性（Attribute） ​

  • 在元素名稱和屬性之間有一個空格。（如果有多個屬性，屬性之間也需要有空格）
  • 屬性名稱後面接著等於符號 =。
  • 等於符號後面接續一組雙引號 ""。
  • 在雙引號中輸入所需的屬性值。
  • 屬性包在起始標籤裡面，如下圖所示。

屬性

巢狀元素 ​

前篇有介紹到 HTML 是一種階層式的樹狀結構。因此，我們將某個元素放進另一個元素中，這樣的呈現結果就叫做巢狀元素。

html
<p>Hello <em>HTML</em>!</p>

小提醒

巢狀標籤是一層接著一層的包覆，不同層的起始和結束標籤間不可以交錯包覆。

HTML 自訂屬性 ​

從 HTML5 開始，就開放了自訂義屬性，這麼做的目的是去綁定 DOM 與資料以及驗證資料。語法是 data-*，把 * 代換成自訂屬性名稱跟值，例如：data-name="Away"、data-num="0"。

html
<p data-name="Away" data-num="0">Hello</p>

HTML 英文字大小寫有差別嗎？ ​

其實都可以，但建議以全部小寫為主較容易識別，不要大、小寫參雜在一起。若自訂屬性是由兩個單字所組成，請以 - 進行區隔。如下:

html
<p data-num="2">Hello</p>

HTML 標籤可以換行嗎？ ​

屬性與屬性之間，多餘的空白會被瀏覽器忽略，因此，可依此特性來換行增進 HTML 的可解讀性與可維護性。

html
<img
  src="./images/anatomy-of-an-element.png"
  width="500"
  height="200"
  alt="HTML 的組成"
  title="HTML 的組成"
  class="img img-resp"
  data-type="img"
>

Copyright © 2025-Present