---
# System prepended metadata

title: 【HTML 筆記】元素、屬性【part 2】
tags: [HTML, 網頁程式設計, 網頁]

---

【HTML 筆記】元素、屬性【part 2】
===

[TOC]

Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。

HTML 元素（Elements）
---

HTML 是透過一系列的元素來結構化網頁內容的語言。

每個元素由標籤（tags）所定義，也可能包含了屬性（attributes）來提供額外的功能或訊息。

一個 HTML 元素通常由以下部分所組成：

1. 開始標籤（Opening Tag）：以 `<標籤名>` 的形式表示，如 `<p>`。
2. 內容（Content）：標籤之間的文字、圖片或其他元素，如「`<p>這是一段文字</p>`」。
3. 結束標籤（Closing Tag）：以 `</標籤名>` 的形式表示，如 `</p>`。
    * `<p>這是一段文字</p>` 表示一個段落元素。 
4. 屬性（Attributes）：提供元素的額外訊息，寫在開始標籤內，如 `<p class="intro">`。
    * 屬性通常以 `名稱="值"` 的格式出現，例如 `id="main"` 或 `href="https://example.com"`。

有些元素是空元素（self-closing），不用結束標籤，如 `<img>` 或 `<br>`。

開始標籤也稱起始標籤，結束標籤也稱閉合標籤。

### 巢狀（nested） HTML 元素

> HTML elements can be nested (this means that elements can contain other elements).

HTML 元素可被嵌套（這表示元素可以包含其他元素）。

> All HTML documents consist of nested HTML elements.

所有的 HTML 文件均由巢狀的 HTML 元素所組成。

如下範例就包含了四個 HTML 元素（`<html>`, `<body>`, `<h1>`, `<p>`）：

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

From W3School：https://www.w3schools.com/html/html_elements.asp

然後解釋一下 `<html>` 元素：

`<html>` 標籤是整個 HTML 文檔的根元素（root element），定義了一個 HTML 文檔的開始和結束，所有其他 HTML 元素都必須嵌套在 `<html>` 標籤內。

`<html>` 就像是整個網頁結構的最外層、必要的容器，包含了 `<head>`、`<body>` 等等標籤。

以下是 `<html>` 的功用：

1. 標示 HTML 文檔：`<html>` 告訴瀏覽器這是 HTML 文檔，讓瀏覽器以 HTML 的方式解析內容。
2. 結構化內容：`<html>` 替文檔提供一個統一的起點，所有其他元素（如`<h1>`、`<p>`、`<img>`等）都必須在 `<html>` 裡面。
3. 可含屬性在內：`<html>` 可包含屬性來定義文檔的語言或其他特性。

### 再次強調：不要忘記加結束標籤

如果不加，瀏覽器還是會幫你加上去，然後一樣可以顯示內容，但建議還是加一下。

`<p>記得加上結束標籤啦!</p>`

### 空 HTML 元素（Empty HTML Elements）

沒內容的 HTML 元素就是空元素。空元素會在開始標籤中關閉。

在空元素中加入 `/` 是關閉空元素的正確使用方式：`<br/>`。

註：`<br>` 標籤定義換行字元（'\n'），而且為沒有結束標籤的空元素。

### HTML 不區分大小寫

如標題所示。

`<P>` or `<p>` 都有相同功用，但 W3C（全球資訊網協會）建議在 HTML 中使用小寫，並要求在更嚴格的文件類型（如 XHTML）中使用小寫。

HTML 屬性（Attributes）
---

屬性（Attributes）是用來為元素（Elements）提供額外資訊或功能的部分。

通常以（`name="value"`）的形式出現在開始標籤中，用來定義元素的特性、行為或外觀。

name：屬性名稱。

value：屬性值。

列點認識屬性：

* 所有 HTML 元素都可以具有屬性
* 屬性提供有關元素的附加訊息
* 屬性始終在開始標籤中指定
* 屬性通常以名稱/值對的形式出現，例如：`name="value"`

from W3Schools：https://www.w3schools.com/html/html_attributes.asp

### 屬性的基本格式

以下這是在開始標籤中寫的：

```html
<元素名稱 屬性名稱="屬性值">
```

屬性名稱：定義屬性的功能，例如 `id`、`class`、`src` 等。

屬性值：就是值。通常用雙引號（" "）或單引號（' '）括起來，根據 HTML5 規範，雙引號較常見，但用單引號也可以。

範例如下：

```html
<img src="example.jpg" alt="圖片">
```

`src`、`alt` 都是屬於屬性的一部分，而 `example.jpg`、`圖片` 都是他們個別的值。

### 屬性的分類

1. 全域屬性（Global Attributes）：該屬性適用於所有 HTML 元素，提供通用的功能。
2. 個別屬性：元素具有自己的屬性。
3. 事件屬性（Event Attributes）：用於觸發 JavaScript 事件。

**全域屬性表**：

| 屬性 | 說明 |
| -------- | -------- |
| accesskey | 設定聚焦元素的快捷鍵。 |
| class | 指定一個或多個樣式類別，多個類別使用空白分隔。 |
| contenteditable | 指定元素的內容是否可編輯，可設定 true ( 可編輯 ) 或 false ( 預設，不可編輯 )。 |
| data-* | 自定義數據屬性，星號可替換成自訂的名稱。 |
| dir | 元素中內容的文字顯示方向，可設定 ltr ( 左到右 )、rtl ( 右到左 ) 或 auto ( 預設 )。 |
| draggable | 設定元素是否可拖動，可設定 true ( 可拖動 ) 或 false ( 預設，不可拖動 )。 |
| hidden | 設定元素鎖定或不鎖定，主要提供給 CSS 或 JS 判斷使用。 |
| id | 設定元素的 id，一個元素只會有一個 id，同一個 id 在一份 HTML 裡只會出現一次，若出現多次以最後一次為主。 |
| lang | 設定元素內容的語言，例如 en。 |
| spellcheck | 檢查元素的拼寫和語法，可設定 true ( 檢查 ) 或 false ( 預設，不檢查 )。 |
| style | 設定元素的樣式，寫法使用 CSS 語法。 |
| tabindex | 設定元素的按下 tab 時的跳格順序。 |
| title | 設定元素的標題。 |
| translate | 設定元素內容是否可以被自動翻譯，可設定 true ( 預設，可翻譯 ) 或 false ( 不翻譯 )。 |

來自：https://steam.oxxostudio.tw/category/html/info/attributes.html

以下範例舉一些常用的屬性作例子：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <!-- id, class, style, title, data-* 屬性的範例 -->
    <div 
        id="uniqueBox" 
        class="container highlight" 
        style="background-color: lightblue; padding: 20px;" 
        title="這是一個提示文字" 
        data-info="自訂資料" 
        data-number="123">
        <p>這是一個帶有全域屬性的範例元素。</p>
    </div>
</body>
</html>
```

註：`<!-- id, class, style, title, data-* 屬性的範例 -->` 是 HTML 的註解。

**個別屬性表**：

| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| href | a、area、base、link | 超連結的網址。 |
| alt | area、img、input | 元素失效時的替代文字。 |
| height | canvas、embed、iframe、img、input、object、video | 元素高度。 |
| width | canvas、embed、iframe、img、input、object、video | 元素寬度。 |
| target | a、area、base、form | 點擊元素開啟時的方式。 |
| src | audio、embed、iframe、img、input、script、source、track、video | 元素內容來源 ( 網址 )。 |
| async | script | 該 JavaScript 內容為非同步執行。 |
| rel | a、area、form、link | 元素內容和頁面的關係。 |
| language | script | 定義該元素中所使用的腳本語言。 |
| media | a、area、link、source、style | 設定媒體資源。 |
| type | a、button、embed、input、link、menu、object、script、source、style | 元素種類。 |

來自：https://steam.oxxostudio.tw/category/html/info/attributes.html

href 範例：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <a href="https://luketsengtw.github.io" target="_blank" rel="noopener" type="text/html">前往我的部落格</a>
</body>
</html>
```

`target="_blank"` 表示在新分頁開啟連結。

`rel="noopener"` 為「relationship（關係）」的縮寫，用來敘述連結的目標（目標資源）與當前文件之間的關係。`noopener` 的作用是防止新開的頁面能夠透過 `window.opener`（JS 語法） 回頭控制原始頁面，主要可以防止惡意網站去控制原頁面，可防範 phishing（釣魚）攻擊、跨站腳本（XSS）攻擊。

`type="text/html"` type 指的是連結所對應資源的 MIME 類型（媒體類型）。`text/html` 表示目標資源是一個 HTML 文件，也就是常見的網頁格式。

alt 範例（常用在圖片上）：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <img src="天靈蓋.jpg" alt="鹿乃子乃子的天靈蓋" width="300" height="200">
</body>
</html>
```

alt（alternative text，替代文字）是 HTML 中專門用於提供圖片或媒體元素「備援說明文字」的重要屬性。

如果圖片無法載入的時候，系統就會自動顯示 alt 的內容，讓 user 知道這原本是啥。

另外設定 alt 可以有效優化 SEO（Search engine optimization）排名。

area 屬性範例：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <map name="exampleMap">
        <area shape="rect" coords="34,44,270,350" href="https://example.com/info" alt="資訊區域">
    </map>
    <img src="天靈蓋.jpg" alt="網站圖片" width="300" height="200" usemap="#exampleMap">
</body>
</html>
```

這個作用就是在圖片上點擊之後，會跳到另一個連結去，就是上面 HTML 文檔的 `https://example.com/info`。

:::info
`<map>` 標籤是 HTML 中用來定義 影像地圖（Image Map） 的元素，搭配 `<area>` 標籤，可讓圖像上的特定區域成為可點擊的超連結區塊。
:::

放影片在 HTML 上：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <video src="園遊會.mp4" width="640" height="360" controls></video>
</body>
</html>
```

就會出現以下畫面：

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

也可以新增字幕：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <video controls width="300">
        <source src="園遊會.mp4" type="video/mp4">
        <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
    </video>
</body>
</html>

```

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

放音樂範例：

```html=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
</head>
<body>
    <audio src="妳聽得到.wav" controls></audio>
</body>
</html>
```

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

**個別屬性的清單、表格**：

| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| start | ol | 編號清單元素的起始編號。 |
| reversed | ol | 使用後會讓編號清單元素反向呈現。 |
| rowspan | td、th | 表格元素合併列。 |
| colspan | td、th | 表格元素合併欄位。 |

範例：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>HTML 屬性範例</title>
    <style>
        table {
            border-collapse: collapse;
            width: 60%;
        }
        th, td {
            border: 1px solid #333;
            padding: 8px;
            text-align: center;
        }
        ol {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h2>有序清單（Ordered List）</h2>
    
    <p>使用 <code>start</code> 屬性（從編號 5 開始）：</p>
    <ol start="5">
        <li>項目五</li>
        <li>項目六</li>
        <li>項目七</li>
    </ol>

    <p>使用 <code>reversed</code> 屬性（反向編號）：</p>
    <ol reversed>
        <li>最後一項</li>
        <li>倒數第二項</li>
        <li>倒數第三項</li>
    </ol>

    <h2>表格合併欄列（rowspan / colspan）</h2>

    <table>
        <tr>
            <th rowspan="2">姓名</th>
            <th colspan="2">成績</th>
        </tr>
        <tr>
            <th>國文</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>Luke</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Ann</td>
            <td>79</td>
            <td>85</td>
        </tr>
    </table>

</body>
</html>
```

成果：

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

被 `<head>` 包含的那段 `<style>` 用到一些 css 語法，主要是拿來渲染這個表格的格線用的，暫時先不用理解。

**個別屬性（多媒體、圖片、影音）** 表：

| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| autoplay | audio、video | 使用後，多媒體元素自動播放。 |
| controls | audio、video | 使用後，多媒體元素出現播放控制按鈕。 |
| loop | audio、video | 使用後，多媒體元素播放完畢會自動循環播放。 |
| poster | video | 等待影片下載時（使用者尚未按下播放按鈕）要顯示的圖片（網址）。 |
| preload | audio、video | 使用後，會在載入網頁前先載入多媒體內容。 |
| muted | audio、video | 使用後多媒體元素播放時會靜音。 |
| ismap | img | 設定圖片是影像地圖的一部分。 |
| srcset | img、source | 搭配 media 可在不同瀏覽裝置裡載入不同內容（網址）。 |

範例：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>HTML 多媒體與圖像屬性範例</title>
</head>
<body>
  <h1>多媒體元素屬性範例</h1>

  <!-- autoplay、controls、loop、preload、muted 屬性 -->
  <h2>音訊示範 (audio)</h2>
  <audio controls autoplay loop preload="auto" muted>
    <source src="妳聽得到.wav" type="audio/mpeg">
    您的瀏覽器不支援 audio 元素。
  </audio>

  <h2>影片示範 (video)</h2>
  <video controls autoplay loop preload="auto" muted poster="天靈蓋.jpg" width="400">
    <source src="1718848236_Sample_1.mp4" type="video/mp4">
    您的瀏覽器不支援 video 元素。
  </video>

  <hr>

  <h1>圖像元素屬性示範</h1>

  <!-- ismap 屬性：需搭配 <a> 並設定 href -->
  <h2>影像地圖示範 (img with ismap)</h2>
  <p>點圖片會直接導向某連結：</p>
  <a href="https://youtube.com">
    <img src="youtube.png" alt="地圖" ismap>
  </a>

</body>
</html>

```

畫面長這樣：

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

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

因為設定 preload = "auto"，所以音訊跟影片會自動播放。

而影像地圖部分，則是可自訂連結，看點圖片會通往哪裡，像是以上範例就是點 Youtube 圖像會導向至 Youtube 的連結。

**個別屬性（表單）表**：

| 屬性 | 元素 | 說明 |
| -------- | -------- | -------- |
| action | form | 表單的執行程式位置。 |
| checked | input | 設定是否勾選。 |
| value | button、input、li、option、meter、progress、param | 元素的值。 |
| disabled | button、fieldset、input、optgroup、option、select、textarea | 設定後停用元素。 |
| readonly | input、textarea | 元素內容只能讀取。 |
| required | input、select、textarea | 必填欄位提示。 |
| max | input、meter、progress | 可調整元素的最大值。 |
| min | input、meter | 可調整元素的最小值。 |
| size | input、select | 輸入元素呈現多少字元長度。 |
| maxlength | input、textarea | 可輸入元素的最大字元數目。 |
| rows | textarea | 指定多行輸入元素一次顯示幾行。 |
| method | form | 提交表單時使用的方法，可設定 GET（預設）或 POST。 |
| autofocus | button、input、select、textarea | 設定後自動成為焦點。 |
| placeholder | input、textarea | 元素沒有內容時要出現的預設內容。 |
| selected | option | 使用後選取指定選項。 |
| accept | input 為 file | 指定開啟的檔案格式。 |
| datetime | del、ins、time | 設定時間元素的時間日期。 |
| form | button、fieldset、input、label、meter、object、output、select、textarea | 元素對應的表單。 |
| novalidate | form | 設定提交指定格式時無法通過驗證。 |
| step | input 為 number | 數字間距。 |
| list | input | 提供預定義選項讓使用者參考，需要搭配 datalist 元素。 |
| multiple | input、select | 使用後可以進行多個項目選取。 |
| name | button、fieldset、form、iframe、input、map、meta、object、output、param、select、textarea | 元素名字，通常是在表單相關元素會使用。 |
| pattern | input | 使用正規表達式檢查內容是否符合格式。 |

表格來源：https://steam.oxxostudio.tw/category/html/info/attributes.html

範例：

action：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <form action="/submit-form">
        <input type="text" name="data">
        <button type="submit">提交</button>
    </form>
</body>
</html>
```

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

checkbox（checked）：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="checkbox" checked> 我同意條款
</body>
</html>
```

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

value、輸入框應用：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" value="預設文字">
</body>
</html>
```

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

disable 屬性，停用某元素：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" disabled value="無法編輯">
</body>
</html>
```

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

readonly，唯讀屬性：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" readonly value="只能讀取">
</body>
</html>
```

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

required，表示使用者於該欄位必填：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" required>
</body>
</html>
```

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

max，使用者最多只能填到某數字，如 100：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="number" max="100">
</body>
</html>
```

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

min 的範例就不做了，跟 max 一樣道理。

size，設定輸入框的顯示字元長度：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" size="20">
</body>
</html>
```

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

maxlength，限制輸入的最大字元數：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" maxlength="10">
</body>
</html>
```

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

rows，指定顯示的行數：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <textarea rows="5"></textarea>
</body>
</html>
```

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

method，用於 form 元素，指定表單提交的方法（GET 或 POST）。

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <form method="post">
        <input type="text" name="data">
        <button type="submit">提交</button>
    </form>
</body>
</html>
```

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

以上程式碼的表單資料會以 POST 方法提交。

autofocus，頁面載入時會自動聚焦到該文字框，也就是先幫你省略左鍵點框內的事件。

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" autofocus>
</body>
</html>
```

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

placeholder，用於提示文字，輸入時會消失：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" placeholder="請輸入姓名">
</body>
</html>
```

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

selected，清單選項：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <select>
        <option>選項1</option>
        <option selected>選項2</option>
    </select>
</body>
</html>
```

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

accept，指定只允許上傳的檔案類型：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="file" accept=".jpg,.png">
</body>
</html>
```

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

datetime，設定日期或時間：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <time datetime="2023-10-01T12:00:00">2023年10月1日 12:00</time>
</body>
</html>
```

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

novalidate，提交時不進行表單驗證：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <form novalidate>
        <input type="email">
        <button type="submit">提交</button>
    </form>
</body>
</html>
```

註：就算 email 格式錯誤也能繳交。

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

step，設定數字的間距：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="number" step="0.1">
</body>
</html>
```

這意思就是按上下箭頭不會像之前預設都是遞增 1，而是 0.1。

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

list，搭配 datalist 提供預設選項：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <input type="text" list="fruits">
    <datalist id="fruits">
        <option value="蘋果">
        <option value="香蕉">
    </datalist>
</body>
</html>
```

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

mutiple，允許選擇多個項目：

```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 個別屬性表單範例</title>
</head>
<body>
    <select multiple>
        <option>選項1</option>
        <option>選項2</option>
    </select>
</body>
</html>
```

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

由於篇幅原因，故到此結束～下一個 part 將繼續撰寫事件屬性的部分。

參考資料
---

[HTML 元素屬性 - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/info/attributes.html)

[HTML Attributes](https://www.w3schools.com/html/html_attributes.asp)

[HTML Elements](https://www.w3schools.com/html/html_elements.asp)

[HTML 属性 | 菜鸟教程](https://www.runoob.com/html/html-attributes.html)

[HTML 元素 | 菜鸟教程](https://www.runoob.com/html/html-elements.html)