# HTML 基本結構

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MH4jptjAFXCFLBH-vvx%2F-MH4k3GE_hXawL33i_o0%2Fimage.png?alt=media\&token=44ad0d7f-82e6-48b4-b784-fbcb40022e01)

##  HTML 元素的組成

### 1. 標籤

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MH4xenhjs_iNcat7M34%2F-MH4xwqId0ZcM1vpBo-p%2Fimage.png?alt=media\&token=bd486ed6-ad7c-4b85-aac8-68460e3da482)

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

### 2. 元素

![](https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-MH4xenhjs_iNcat7M34%2F-MH4y86AyDvdkgaKvIgH%2Fimage.png?alt=media\&token=c0d2508e-a468-4455-8489-8f9a7483dbd6)

屬性能提供更多的資訊，屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。包含：

* 在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格）
* 屬性名稱後面接著等於符號「=」
* 屬性包在起始標籤裡面，如範例所示