---
# System prepended metadata

title: <a id='123'>HTML_Exercise</a>

---

# <a id='123'>HTML_Exercise</a>
<h2>HTML參考網站:<a href=https://www.runoob.com/html/html-editors.html><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQRjCP0-KRjpRa-5MtF7ePWhUzCZu03hHYeRA&usqp=CAU></a></h2>

<h2>HTML編輯器</h2>
>1.VS Code：https://code.visualstudio.com/  
>2.Sublime Text：http://www.sublimetext.com/  
>3.也可以用記事本。

<h2>標題</h2>  

通過`<h1>`到`<h6>`定義，大小不一樣。
```htmlmixed=
<h1>第一大的標題</h1>
<h2>第二大的標題</h2>
<h3>第三大的標題</h3>
<h4>第四大的標題</h4>
<h5>第五大的標題</h5>
<h6>第六大的標題</h6>
```
範例:  
> <h1>第一大的標題</h1>
> <h2>第二大的標題</h2>
> <h3>第三大的標題</h3>
> <h4>第四大的標題</h4>
> <h5>第五大的標題</h5>
> <h6>第六大的標題</h6>

<h2>段落</h2>  

通過`<p>`定義。
```htmlmixed=
<p>段落</p>
<p>下一個段落</p>
```
範例:  
> <p>段落</p>
> <p>下一個段落</p>

<h2>連結</h2>  

```htmlmixed=
<a href='https://www.google.com/'>連結到google網頁</a>
```
範例:  
> <a href='https://www.google.com/'>連結到google網頁</a>

<h2>圖像</h2>  

```htmlmixed=
<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2020/01/31/20200131-052418_U17017_M588719_cd2e.jpg?itok=s0SyFjTD" 
width="263" height="192" />
```
範例:  
<img src="https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2020/01/31/20200131-052418_U17017_M588719_cd2e.jpg?itok=s0SyFjTD" width="263" height="192" />  

<h2>換行</h2>  

```htmlmixed=
第一行<br/>第二行
```
範例:  
第一行<br/>第二行

<h2>水平線</h2>  

`<hr>`標籤可以用來分隔內容  
```htmlmixed=
<p>第一個段落</p>
<hr>
<p>第二個段落</p>
```
範例:  
<p>第一個段落</p>
<hr>
<p>第二個段落</p>

<h2>注解</h2>  

```htmlmixed=
<!--注解放這裡-->
```

<h2>格式化標籤</h2>  

|標籤|範例|
|----|----|
|`<b>`|<b>粗體文字|
|`<i>`|<i>斜體文字|
|`<strong>`|<strong>加重語氣|
|`<em>`|<em>重點文字|
|`<small>`|<small>較小的字|
|`<sup>`|這是<sup>上標字|
|`<sub>`|這是<sub>下標字|
|`<ins>`|<ins>底線|
|`<del>`|<del>刪除線|

```htmlmixed=
<b>粗體文字
<i>斜體文字
<strong>加重語氣
<em>重點文字
<small>較小的字
這是<sup>上標字
這是<sub>下標字
<ins>底線
<del>刪除線
```

## 電腦輸出標籤(需要再去查)  

|標籤|描述|
| ---- | ---- |
|`<code>`|定義電腦程式|
|`<kbd>`|定義鍵盤碼|
|`<samp>`|定義電腦程式樣本|
|`<var>`|定義變數|
|`<pre>`|定義預格式文本|

## 引文，引用標籤(需要再去查)
|標籤|描述|
|----|----|
|`<addr>`|定義縮寫|
|`<address>`|定義地址|
|`<bdo>`|定義文字方向|
|`<blockquote>`|定義長的引用|
|`<q>`|定義短的引用|
|`<cite>`|定義引用|
|`<dfn>`|定義一個定義項目|

## 連結id
在頁面上的某個位置設定標籤
```htmlmixed=
<a id="tips">標籤位置</a>
```
點擊連結到標籤頁面
```htmlmixed=
<a href="#tips">帶到有標籤的頁面</a>
```
範例:  
<a href="#123">回到上層</a>

## `<head>`

`<title>`設定標題，一定要有。
```htmlmixed=
<title>標題</title>
```

`<base>`設定程式中所有連結的默認連結。
```htmlmixed=
<base href='https://hackmd.io/@haoli/html_exercise'>
<a href>這連結我沒有設網址</a>
```
<base href='https://hackmd.io/@haoli/html_exercise'>

範例:
<a href>這連結我沒有設網址</a>

# `<link>`
# 還不太清楚

# `<style>`
# 還不太清楚

# `<meta>`
# 還不太清楚

# `<script>`
# 還不太清楚

