---
# System prepended metadata

title: HTML 筆記
tags: [HTML]

---

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

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

# HTML Basic

- HTML Elements（HTML 元素）

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

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

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

- HTML Attributes（HTML 屬性）

```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
  ```html
  <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."**，沒錯不要用他來表示字體大小，他只是層級關係。
  - ![image](https://hackmd.io/_uploads/HkV2UnWIT.png =100x)

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

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

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

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

    ```html
    <pre>
    第一行文本
        第二行文本，前面有縮進
    第三行文本
    </pre>
    ```
    ![%E6%88%AA%E5%9C%96_2024-01-24_%E4%B8%8A%E5%8D%8810.53.03](https://hackmd.io/_uploads/Bk9L6L0F6.png)



## **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>` - <sub>Subscript text</sub>
- `<sup>` - <sup>Superscript text</sup>

## Form (常用)

- input 標籤用於創建 HTML 表單中的輸入元素。
    - type 屬性定義輸入元素的類型，如文本框、按鈕等，以下舉例幾種。
        - text
            defines a single-line text input field
        
            ```html
            <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>
            ```
            ![image](https://hackmd.io/_uploads/ry9oSgD5p.png)

        - password
            defines a password field
            
            ```html
            <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>
            ```
            ![image](https://hackmd.io/_uploads/rkZWweD5T.png)

        - radio
            defines a radio button.
            Radio buttons let a user select ONLY ONE of a limited number of choices
            
            ```html
                <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>
            ```
            ![image](https://hackmd.io/_uploads/r1KKDlwqT.png)
            
        - email 
            is used for input fields that should contain an e-mail address
            根據瀏覽器支援情況，email地址在提交時可以自動驗證是否合法 eg.是否含".com"。
            
            ```html
                <form>
                  <label for="email">Enter your email:</label>
                  <input type="email" id="email" name="email">
                </form>
            ```
        - select：defines a drop-down list

            ```html
            <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>
            ```
            ![image](https://hackmd.io/_uploads/rkKdg-wqT.png)

    

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

            ```html
            <form>
                <textarea name="message" rows="4" cols="50" placeholder="在這裡輸入訊息"></textarea>
            </form>
            ```
            ![%E6%88%AA%E5%9C%96_2024-01-24_%E4%B8%8A%E5%8D%8810.53.26](https://hackmd.io/_uploads/ryRlKPCta.png)

- attribute
    - action：用來指定一個位址(URL)，告訴瀏覽器當 user按送出後表單的內容要送去哪
        ```html
        <form action="/action_page.php">
          ...
          form content
          ...
        </form>
        ```
        
    - target：用來指定瀏覽器要在何處顯示表單送出後伺服器回應的結果 
        - _self：顯示在表單所在的當前視窗
        - _blank：顯示在新視窗
        - _parant：顯示在上一層的視窗
        - _top：顯示在最頂層的視窗
        - framename 
        
        ```html
        <form action="/action_page.php" target="_blank">
        ```
        
    - method：用來指定表單內容傳輸時用的HTTP協議，最常用的是get或post
        - get： 會將表單資料放在URL網址參數列上面送出，通常用在資料量較小或非敏感的資料
        - post：會將表單資料放在HTTP傳輸封包body中送出。通常用在表單資料量比較大或隱私性考量的資料

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

    



## **Link**

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

```html
<a href="https://infinirc.com">訪問我的網站</a>
```
![%E6%88%AA%E5%9C%96_2024-01-24_%E4%B8%8A%E5%8D%8810.53.43](https://hackmd.io/_uploads/H1Wi6UAFp.png)

## **Image**

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

```html
<img src="image.jpg" alt="描述圖像內容">
```
![%E6%88%AA%E5%9C%96_2024-01-24_%E4%B8%8A%E5%8D%8810.54.00](https://hackmd.io/_uploads/ryah6LCKa.png)


## Table
:::info
![image](https://hackmd.io/_uploads/rJvDFzAtT.png)!

![image](https://hackmd.io/_uploads/ByxYtzCKa.png)
用< table >包起整個表格
< tr >Defines a **row** in a table
< td >Defines a **cell** in a table
:::
#### Table border
:::warning
在head裡加上style
![image](https://hackmd.io/_uploads/S1MSsGCYa.png)
執行結果:
![image](https://hackmd.io/_uploads/rk16P7AFp.png)
加上 border-collapse: collapse;會合併成只有一條線:
![image](https://hackmd.io/_uploads/HyJMOm0t6.png)

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



---

讓邊框變圓
 border-radius: 10px;
 數字是圓弧程度
![image](https://hackmd.io/_uploads/S1fJKXAta.png)

![image](https://hackmd.io/_uploads/rkJeKQ0tT.png)
:::

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

設定直行要多寬
![image](https://hackmd.io/_uploads/Sk7En7Rtp.png)

設定橫排要多高
![image](https://hackmd.io/_uploads/r1Fc2QAKa.png)
把Jill那橫排設高為50px
![image](https://hackmd.io/_uploads/rkem237CtT.png)
:::

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

讓header橫跨兩行
**< tr >
    < th colspan="2">Name</th>
    < th >Age< /th >
< /tr >**
![image](https://hackmd.io/_uploads/rJcNlERFa.png)

Table Caption(表格標題)，使用 < caption >。
:::
padding
:::info
內容與邊框的距離
也可以設定上下左右的距離
![image](https://hackmd.io/_uploads/ByOqZ40F6.png)

![image](https://hackmd.io/_uploads/S1khbVRF6.png)
:::

space
:::info
裡面的框與外面(table)的眶距離
![image](https://hackmd.io/_uploads/SybBzE0tp.png)
![image](https://hackmd.io/_uploads/S1hDfV0tT.png)

設成50
![image](https://hackmd.io/_uploads/HJeYzERtT.png)
![image](https://hackmd.io/_uploads/rJp5GNRFT.png)
:::

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

 < th colspan="2">Name< /th >(橫向合併)
 ![image](https://hackmd.io/_uploads/ryrrHNAKT.png)

< th rowspan="2">Phone< /th >(縱向合併)
![image](https://hackmd.io/_uploads/ryZnSVAYa.png)

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


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

**無序列表範例**:

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

**有序列表範例**:

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

無序列表使用圓點作為項目符號，而有序列表使用數字。
![%E6%88%AA%E5%9C%96_2024-01-24_%E4%B8%8A%E5%8D%8810.54.38](https://hackmd.io/_uploads/rJ62cD0t6.png)


### unordered list
:::success
An unordered list starts with the ＜ｕｌ＞　tag. Each list item starts with the ＜ｌｉ＞ tag.
![image](https://hackmd.io/_uploads/HyN9fM0Kp.png)


預設是黑點
![image](https://hackmd.io/_uploads/Hk3rbz0K6.png)

在＜ｕｌ＞內加上ｓｔｙｌｅ可以更換樣式
**<ｕｌ style="list-style-type:circle;">**
![image](https://hackmd.io/_uploads/H15AWzAK6.png)

設成方形就把circle的地方改成square
![image](https://hackmd.io/_uploads/B1V8zGCKT.png)


甚麼都不要就改成none
![image](https://hackmd.io/_uploads/HyduGGCtp.png)


:::
### order list
:::success
An ordered list starts with the < ol > tag. Each list item starts with the < li > tag.
![image](https://hackmd.io/_uploads/BkMkmGAtT.png)
預設是數字排序
要改的話就在< ol >內加上type="要改的樣式"
![image](https://hackmd.io/_uploads/SyHP7fCK6.png)

例如改成用小寫字母排序
![image](https://hackmd.io/_uploads/rJiamMRta.png)
執行結果
![image](https://hackmd.io/_uploads/ByTlEM0Yp.png)

:::
### HTML Description Lists
:::success
有包含描述的清單
The < dl > tag defines the description list
the < dt > tag defines the term (name)
the < dd > tag describes each term
![image](https://hackmd.io/_uploads/r1KqPfCKa.png)

![image](https://hackmd.io/_uploads/S1z2vM0F6.png)

:::



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

## Block

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

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

![image](https://hackmd.io/_uploads/ByTlK4SjJx.png)


例如:
＜ｐ＞文字＜ｓｐａｎ＞Ｈｅｌｌｏ　Ｗｏｒｌｄ＜／ｓｐａｎ＞文字＜／ｐ＞
<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＞

![image](https://hackmd.io/_uploads/HyiNeDItT.png)
:::

## favicon
:::info
favicon是網站的小圖標
favicon 通常是一個小圖片文件，常見的格式包括 .ico（Windows icon 格式）、.png 或 .gif。
* ![image](https://hackmd.io/_uploads/SyBkRpwFT.png)
:::

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

２．Internal - 透過在 <head> 區塊中使用 ＜ｓｔｙｌｅ＞ 元素。
    
３．External- 透過使用 <link> 元素連結到外部的 CSS 文件。
:::
    