---
# System prepended metadata

title: HTML 基本元素
tags: [基本元素, HTML]

---

{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}

###### tags: `HTML` `基本元素`

# HTML 基本元素

## 「元素」介紹

HTML的基本單位是「元素」

![](https://i.imgur.com/d6pE7Fq.png)

如上圖所示，一個元素要有**起始標籤**和**結尾標籤**，標籤需要使用角括號(`<>`)包圍，並在其中放入標籤名稱，結尾標籤需要加上斜線(`/`)

### 範例

```css
<p>Hello, World!</p>
```

```css
<p>
    Hello, World!
</p>
```

> 註：有些HTML元素並沒有結尾標籤，例如：
> * `<img>`
> * `<br>`
> * `<hr>`
>
> 範例：
> ```css
> <img src="圖片連結" alt="圖片載入不出來時的文字">
> ```

## HTML 結構解析

```htmlembedded=
<!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>
```

### `<!DOCTYPE html>`
是用來聲明此網頁是使用HTML5的規範 這個一定要有 而且通常會放在開頭

### `<html>`
這是這個文件的根元素 網頁的所以內容都在裡面 所以注意不要寫到外面

### `<head>`
用來定義網頁的元訊息 通常是些不會顯示在網頁本體的東西

### `<body>`
這是網頁的可見內容 寫什麼他就顯示什麼

## HTML 基本標籤

### `<p>`段落標籤

用來描述一段文字段落，預設會在段落間幫你做換行和留邊距

範例：
```css=
<p>Hello, World</p>

<p>
    這是段落標籤
</p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
![](https://i.imgur.com/Goh0KGy.png)
    
</div>


### `<i>`斜體字

範例：
```css=
<i>這是一段測試的句子</i>

<p>
    今天天氣晴，<i>我想要吃蛋餅</i>
</p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/0xQEQH1.png)
    
</div>

### `<b>`粗體字

範例：
```css!
<p>
    <b>價殼層電子對互斥理論</b>（英語：<b>V</b>alence <b>S</b>hell <b>E</b>lectron <b>P</b>air <b>R</b>epulsion，簡稱為<b>VSEPR</b>），是一個用來預測單個共價分子形態的化學模型。理論通過計算中心原子的價層電子數和配位數來<b>預測</b>分子的<b>幾何構型</b>，並構建一個合理的<b>路易斯結構式</b>來表示分子中所有<b>鍵</b>和<b>孤對電子</b>的位置。
</p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/09Xyj7X.png)

</div>

### `<u>`底線

範例：
```css=
<u>這一段文字有底線</u>

<p>
    哥哥正忙著寄送喜<u>貼</u>給親友，邀請大家來參加他的婚禮。
<p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">

![](https://i.imgur.com/ZRdyk7j.png)

</div>

### `<h1>` ~ `<h6>`標題標籤

用於定義標題的大小和級別

範例：
```css=
<h1>h1測試</h1>
<h2>h2測試</h2>
<h3>h3測試</h3>
<h4>h4測試</h4>
<h5>h5測試</h5>
<h6>h6測試</h6>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
![](https://i.imgur.com/8B2H3VS.png)

</div>

### `<br>`斷行

換行，此為空元素，不需要結尾標籤

範例：
```css=
邃宇兮 黑翳逐<br>
山野兮 窘步<br>
出！/ 幽宮兮 餘既伏<br>
君常違兮 國隳蕪 / 烏有兮 歸處<br>
蓄讎怨增欷 / 零落兮 困洿瀆<br>
惶惶兮 索陵遲惡途 / 奈何乎！
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
![](https://i.imgur.com/W6rImna.png)

</div>

### `<hr>`水平分隔線

此為空元素，不需要結尾標籤

範例：
```css=
<p>段落A</p>
<hr>
<p>段落B</p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
![](https://i.imgur.com/OtVqEZc.png)

</div>

## 註解

在HTML中，可以將註解包在`<!--` 和 `-->`之間

### 範例：

```htmlembedded=
<!-- <p>這是一些示範用的句子1</p>
<p>這是一些示範用的句子2</p> -->
<p>這是一些示範用的句子3</p>
```

<div style="background-color: #000000; color: #FFFFFF;border-radius: 1rem 1rem 0rem 0rem; padding: 0.7rem 1.75rem 0.7rem 1.75rem; font-size: 2rem">
    範例結果
</div>
<div style="border: 1px solid #000000; border-radius: 1rem; padding: 1.75rem; border-radius: 0rem 0rem 1rem 1rem">
    
![](https://i.imgur.com/MhnBWjK.png)

</div>

### VS Code中的快捷鍵：

在VS Code中，想對一行文字做註解或取消註解可以使用快捷鍵`Ctrl + /`

![](https://i.imgur.com/odn2NEz.gif)

:::info
重點整理：
段落標籤`<p>`
斜體字`<i>`
底線`<u>`
標題標籤`<h1>` ~ `<h6>`
斷行`<br>`
水平分隔線`<hr>`
:::


:::info
點此前往簡報 https://hackmd.io/@dzif24x25/S1hSfLQbh
:::