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

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

HTML 元素（Elements）

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

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

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

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

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

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

巢狀（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>, ）：

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

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

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

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

以下是 <html> 的功用：

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

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

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

記得加上結束標籤啦!

空 HTML 元素（Empty HTML Elements）

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

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

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

HTML 不區分大小寫

如標題所示。

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

HTML 屬性（Attributes）

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

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

name：屬性名稱。

value：屬性值。

列點認識屬性：

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

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

屬性的基本格式

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

1	<元素名稱屬性名稱="屬性值">

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

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

範例如下：

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

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

屬性的分類

全域屬性（Global Attributes）：該屬性適用於所有 HTML 元素，提供通用的功能。
個別屬性：元素具有自己的屬性。
事件屬性（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

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

<!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>

註： 是 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 範例：

<!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 範例（常用在圖片上）：

<!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 屬性範例：

<!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 上：

<!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>

就會出現以下畫面：

也可以新增字幕：

<!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>

放音樂範例：

<!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>

個別屬性的清單、表格：

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

範例：

<!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>

成果：

被 <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 可在不同瀏覽裝置裡載入不同內容（網址）。

範例：

<!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>

畫面長這樣：

因為設定 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：

<!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>

checkbox（checked）：

<!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>

value、輸入框應用：

<!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>

disable 屬性，停用某元素：

<!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>

readonly，唯讀屬性：

<!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>

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

<!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>

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

<!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>

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

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

<!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>

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

<!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>

rows，指定顯示的行數：

<!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>

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

<!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>

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

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

<!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>

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

<!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>

selected，清單選項：

<!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>

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

<!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>

datetime，設定日期或時間：

<!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>

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

<!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 格式錯誤也能繳交。

step，設定數字的間距：

<!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。

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

<!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>

mutiple，允許選擇多個項目：

<!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>