# 重要標籤介紹
###### tags: `NKFW 網頁設計入門`
* 標題
* 段落
* 連結
* 圖片
* List
* Table
* 表單
* input
* label
* select
* textarea
* button
* Proeject1
* Proeject2
* Proeject3...

為了不讓內容過於鉅細靡遺失去自學精神，可以去掉某些標籤改成讓他們自己找資料，比方說表單的components

按照以上的順序，用h2當標題，並參考以下格式撰寫內容

## 格式

在此用無序標題撰寫關於此標籤的使用方法
* 使用要點一
* 使用要點二
* 使用要點三...

<tagname>inner html</tagname>
<!-- 在這裡要列出關於這個標籤的所有components -->
<!-- 比方說heading包含h1~h6 -->
<!-- 比方說form包含label、input...等 -->

在此處放一張圖片，顯示此標籤在網頁上的樣子(電腦截圖後，在此處按Ctrl+V就會將圖片上傳)

:::success
❓如果這個標籤使用上有值得思考的問題，就寫在此處
:::

:::warning
⚠️注意(觀念澄清)

在HTML標籤介紹比較少出現以上兩個情形，所以不會經常撰寫這種說明，但是在CSS的使用上就有很多值得注意的事情
:::

## 標題(範例)

* h1~h6分別顯示不同的字體大小，而h4以下的標題因為差不多大，所以比較少用，改用CSS控制。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>


## 連結(Anchor)

* href(Hypertext reference)後面的雙引號中放入所要連結的東西，可以是網頁(絕對位置或相對位置)、網頁的特定段落、信箱甚至是電話。

<a href="https://www.google.com/">Google Search</a>


:::success
❓試試看，如何讓圖片具有超連結效果
:::

## 圖片（image)

* width及height分別放入寬與高，用以控制圖片顯示大小。
* alt為圖片的替代文字，在圖片無法正常載入時顯示。

<img src="" width="" height="" alt="">

## Project 格式與內容

:::info
Project基本上會有幾種形式

* 應用前面教的內容製作出一個小成品
* 為了呼應自學的精神，可以讓他們去自己找某個標籤的資料然後加進Project裡面
* 其他：有想法都可以提出來討論，列入下次開會內容

以上經過教學組討論後將內容編寫上去
:::

## Project範例
:::info
Project內容的說明將會寫在此區塊
:::

可以放一張圖片顯示成品(先不要直接放程式碼，等到講解的時候再來公布解說)

## Project1：自我介紹
## Project2：