【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)