# HTML 參考網址
- [w3schools](https://www.w3schools.com/html/default.asp)

:::success
學習完後可去練習的地方練習我們設計的題目，可以試試看會不會，基本上 HTML 看 w3schools 就很夠了，應該啦!
:::

# HTML Basic

- HTML Elements（HTML 元素）

HTML 元素是構成網頁的基本單位。每個元素由一個起始標籤、一個結束標籤（有些元素除外，如圖像和斷行）和夾在這兩個標籤之間的內容組成。

<!-- 一個簡單的段落元素 -->
<p>這是一個段落。</p>

<!-- 一個包含超鏈接的段落元素 -->
<p>訪問 <a href="https://www.example.com">Example 網站</a></p>

- HTML Attributes（HTML 屬性）

<!-- 圖像元素帶有兩個屬性：src 和 alt -->
<img src="image.jpg" alt="描述圖像內容" \>
<br \>

<!-- 超鏈接元素帶有一個屬性：href -->
<a href="https://www.example.com">訪問 Example 網站</a>

**`<img>`** 元素使用 **`src`** 屬性來定義圖像的路徑，**`alt`** 屬性來提供圖像的替代文本。**`<a>`** 元素使用 **`href`** 屬性來定義鏈接的目的地。

# HTML Elements
:::warning
這裡是較常用的 Element: Text、Form、Image、Table、List，底下整理他的功能以及屬性，可以先將每一個讀過。
:::

## Text
- HTML headings h1 ~ h6

  <h1>這裡是文字內容</h1>
  <h2>這裡是文字內容</h2>
  <h3>這裡是文字內容</h3>
  <h4>這裡是文字內容</h4>
  <h5>這裡是文字內容</h5>
  <h6>這裡是文字內容</h6>

:::info
**功能:**
- 通常用在標題，總共會有 6 種層級，會有不同的字體大小
- 然後接下來這句話很重要: **"Use HTML headings for headings only. Don't use headings to make text BIG or bold."**，沒錯不要用他來表示字體大小，他只是層級關係。
- 

**屬性:**
- 沒有特別的屬性要填寫
:::
- p

它會自動在段落的前後添加一些邊距（空白），以便於閱讀。

    <p>這是一個段落。</p>
    <p>這是另一個段落。</p>

- pre標籤用於顯示預格式化的文本。常被用於顯示代碼或其他需要按照精確格式顯示的文本。

    <pre>
    第一行文本
        第二行文本，前面有縮進
    第三行文本
    </pre>


## **Text Formating**

- `<b>` - <b>Bold text</b>
- `<strong>` - <strong>Important text</strong>
- `<i>` - <i>Italic text</i>
- `<em>` - <em>Emphasized text</em>
- `<mark>` - <mark>Marked text</mark>
- `small>` - <small>Smaller text</small>
- `<del>` - <del>Deleted text</del>
- `<ins>` - <ins>Inserted text</ins>
- `<sub>` - _{Subscript text}
- `<sup>` - ^{Superscript text}

## Form (常用)

- input 標籤用於創建 HTML 表單中的輸入元素。
- type 屬性定義輸入元素的類型，如文本框、按鈕等，以下舉例幾種。
- text
defines a single-line text input field

            <form>
              <label for="fname">First name:</label><br>
              <input type="text" id="fname" name="fname"><br>
              <label for="lname">Last name:</label><br>
              <input type="text" id="lname" name="lname">
            </form>


- password
defines a password field

            <form>
              <label for="username">Username:</label><br>
              <input type="text" id="username" name="username"><br>
              <label for="pwd">Password:</label><br>
              <input type="password" id="pwd" name="pwd">
            </form>


- radio
defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices

                <form>
                  <input type="radio" id="html" name="fav_language" value="HTML">
                  <label for="html">HTML</label><br>
                  <input type="radio" id="css" name="fav_language" value="CSS">
                  <label for="css">CSS</label><br>
                  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
                  <label for="javascript">JavaScript</label>
                </form>


- email
is used for input fields that should contain an e-mail address
根據瀏覽器支援情況，email地址在提交時可以自動驗證是否合法 eg.是否含".com"。

                <form>
                  <label for="email">Enter your email:</label>
                  <input type="email" id="email" name="email">
                </form>

- select：defines a drop-down list

            <label for="cars">Choose a car:</label>
                <select id="cars" name="cars">
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="fiat">Fiat</option>
                  <option value="audi">Audi</option>
                </select>


- textarea：用於創建多行文本輸入框。

            <form>
                <textarea name="message" rows="4" cols="50" placeholder="在這裡輸入訊息"></textarea>
            </form>


- attribute
- action：用來指定一個位址(URL)，告訴瀏覽器當 user按送出後表單的內容要送去哪

        <form action="/action_page.php">
          ...
          form content
          ...
        </form>

- target：用來指定瀏覽器要在何處顯示表單送出後伺服器回應的結果
- _self：顯示在表單所在的當前視窗
- _blank：顯示在新視窗
- _parant：顯示在上一層的視窗
- _top：顯示在最頂層的視窗
- framename

        <form action="/action_page.php" target="_blank">

- method：用來指定表單內容傳輸時用的HTTP協議，最常用的是get或post
- get： 會將表單資料放在URL網址參數列上面送出，通常用在資料量較小或非敏感的資料
- post：會將表單資料放在HTTP傳輸封包body中送出。通常用在表單資料量比較大或隱私性考量的資料

:::warning
- id、name、for 的用途以及區別
:::

## **Link**

- 使用 **`<a>`** 標籤來創建鏈接。
- **`href`** 屬性指定鏈接的目的地。

<a href="https://infinirc.com">訪問我的網站</a>


## **Image**

- 使用 **`<img>`** 標籤來嵌入圖像。
- **`src`** 屬性指定圖像的路徑，**`alt`** 屬性提供圖像的替代文本。

<img src="image.jpg" alt="描述圖像內容">


## Table
:::info
!

用< table >包起整個表格
< tr >Defines a **row** in a table
< td >Defines a **cell** in a table
:::
#### Table border
:::warning
在head裡加上style
執行結果:
加上 border-collapse: collapse;會合併成只有一條線:

可以讓格子內有背景色
eg.加上background-color: #96D4D4

---

讓邊框變圓
border-radius: 10px;
數字是圓弧程度

:::

#### size
:::warning
將table設定成全螢幕寬
< table style="width:100%">

設定直行要多寬

設定橫排要多高
把Jill那橫排設高為50px
:::

#### header
:::warning
header的預設置中
加上:
**th {
text-align: left;
}**
可以改成靠左或靠右

讓header橫跨兩行
**< tr >
< th colspan="2">Name</th>
< th >Age< /th >
< /tr >**

Table Caption(表格標題)，使用 < caption >。
:::
padding
:::info
內容與邊框的距離
也可以設定上下左右的距離

:::

space
:::info
裡面的框與外面(table)的眶距離

設成50
:::

#### Table Colspan & Rowspan
:::danger
合併行、列

< th colspan="2">Name< /th >(橫向合併)

< th rowspan="2">Phone< /th >(縱向合併)

:::
#### style
:::info
偶數行有顏色:
**tr:nth-child(even) {
background-color: #D6EEEE;
}**

可依照自己喜好去調整
:::
## List

**無序列表範例**:

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

**有序列表範例**:

<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

無序列表使用圓點作為項目符號，而有序列表使用數字。

### unordered list
:::success
An unordered list starts with the ＜ｕｌ＞　tag. Each list item starts with the ＜ｌｉ＞ tag.

預設是黑點

在＜ｕｌ＞內加上ｓｔｙｌｅ可以更換樣式
**<ｕｌ style="list-style-type:circle;">**

設成方形就把circle的地方改成square

甚麼都不要就改成none

:::
### order list
:::success
An ordered list starts with the < ol > tag. Each list item starts with the < li > tag.
預設是數字排序
要改的話就在< ol >內加上type="要改的樣式"

例如改成用小寫字母排序
執行結果

:::
### HTML Description Lists
:::success
有包含描述的清單
The < dl > tag defines the description list
the < dt > tag defines the term (name)
the < dd > tag describes each term


:::

# HTML Block and Inline Elements
:::warning
這裡是區分 Block 和 Inline 的概念，將常用的 Block 和 Inline 元素做區分。
:::

## Block

- block從新的一行開始，可以包含其他區塊級元素和行內級元素。
- 不論內容長度都會占滿整個頁面寬度(隨網頁大小不同而不同)
- eg. `<p>、<div>`

## Inline
- inline會插入目前內容的最後，不一定從新的一行開始
- 只會占用內容長度的大小(不隨網頁大小改變而不同)
- eg. `<span>`


例如:
＜ｐ＞文字＜ｓｐａｎ＞Ｈｅｌｌｏ　Ｗｏｒｌｄ＜／ｓｐａｎ＞文字＜／ｐ＞
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

# HTML Semantic Elements
這個可以看一看，但是我的 code 沒有特別在管，就看看知道就好，之後可以用

eg.< article > 元素包含了一篇文章的完整內容，包括標題和段落。這有助於瀏覽器和其他工具更好地理解並處理這一部分內容。

# HTML Head

## page title
:::info
寫在<head>內
用＜ｔｉｔｌｅ＞＜／ｔｉｔｌｅ＞包起來
＜title>HTML Tutorial＜/title＞

:::

## favicon
:::info
favicon是網站的小圖標
favicon 通常是一個小圖片文件，常見的格式包括 .ico（Windows icon 格式）、.png 或 .gif。
* 
:::

## css include
:::info
CSS 可以以三種方式添加到 HTML 文件中：
１．Inline- 透過在 HTML 元素內使用 style 屬性。

２．Internal - 透過在 <head> 區塊中使用 ＜ｓｔｙｌｅ＞ 元素。

３．External- 透過使用 <link> 元素連結到外部的 CSS 文件。
:::