( Day 5.2 ) HTML 元素屬性

2023 iThome 鐵人賽

DAY 5

Modern Web

跟著 OXXO 一起學 HTML系列第 8 篇

15th鐵人賽 html html教學

oxxo

2023-09-05 00:32:59

603 瀏覽

分享至

HTML 中所有的元素都具有屬性 ( Attributes )，透過屬性的設定，可以調整元素的行為或樣式，這篇教學會介紹 HTML 元素的屬性。

原文參考：HTML 元素屬性

所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作，或使用筆記本編輯，不用安裝任何軟體 ( 參考：使用 HTML 編輯器 )

屬性寫法

在 HTML 同一個元素的屬性之間，使用「空白」做為分隔，並使用「雙引號」撰寫內容，如果遇到屬性裡有「多個」內容，同樣使用「空白」進行分格 ( 例如 class 屬性 )，下方的例子是一個簡單的屬性寫法：

<h1 id="title">oxxo.studio</h1>
<p class="aa bb cc" lang="en" hidden>hello world</p>

全域屬性 ( Global Attributes )

全域屬性 ( Global Attributes ) 表示所有元素都具備的屬性，如果沒有設定屬性的值，屬性就都不會發生作用。

屬性	說明
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 ( 不翻譯 )。

下方為使用全域屬性的範例 ( 程式碼均放在 body 中 )：

<h1 id="oxxo">oxxo</h1>
<p>hello world</p>
<h2 class="a1 b1 c1" draggable="true">第一段</h2>
<p>我是內容</p>
<p dir="rtl">我也是內容</p>

HTML 教學 - 全域屬性 ( Global Attributes )

個別屬性

除了全域屬性，不同的元素也會具備各自獨特的屬性，下面列出常用的屬性和元素的對照表：

屬性	元素	說明
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	元素種類。

下方為一些個別屬性的範例 ( 程式碼均放在 body 中 )：

<a href="https://steam.oxxostudio.tw">開啟網頁 ( 原視窗 )</a>
<br/>
<a href="https://steam.oxxostudio.tw" target="_blank">開啟網頁 ( 另開新視窗 )</a>
<br/>
<p>原始圖片：</p>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
<p>調整長寬的原始圖片：</p>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" width="50" height="30">

HTML 教學 - 個別屬性

個別屬性 ( 清單、表格 )

HTML 的清單與表格，也有各自的屬性：

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

下方為清單和表格的屬性範例 ( 程式碼均放在 body 中 )：

<style>
  body{
    font-family:monospace;
    font-size:20px;
  }
  td{
    border:1px solid #000;
    padding:10px;
  }
</style>

<table>
  <tr>
    <td colspan="2">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

<ol start="50">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

HTML 教學 - 個別屬性 ( 清單、表格 )

個別屬性 ( 多媒體、圖片、影音 )

HTML 的影音多媒體，也有各自的屬性，主要是作為控制多媒體的播放使用：

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

下方的程式碼開啟後，會在網頁裡出現一個帶有控制按鈕、循環播放、自動播放和靜音的影片 ( 程式碼均放在 body 中 )。

<video src="video.mp4" controls muted loop autoplay>

HTML 教學 - 個別屬性 ( 多媒體、圖片、影音 )

個別屬性 ( 表單 )

HTML 的表單元素也有各自的屬性，而且部分表單元素，還會因為 type 屬性的不同，而有不同的行為與外觀長相。

屬性	元素	說明
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	使用正規表達式檢查內容是否符合格式。

下方的程式碼開啟後，會出現輸入文字框、設定數字框、開啟檔案按鈕以及下拉選單 ( 程式碼均放在 body 中 )。

輸入文字：<input placeholder="預設文字">
<br/>
設定數字：<input type="number">
<br/>
開啟檔案 ( 限 mp4 )：<input type="file" accept=".mp4">
<br/>
勾選檔案：
<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3 ( 預設 )</option>
</select>

HTML 教學 - 個別屬性 ( 表單 )

事件屬性

有些元素的屬性不單純只是設定值，而是可以進一步偵測發生某些事件的時候，去觸發對應的 JavaScript，這些屬性稱作「事件屬性」，下面列出常用的事件屬性：

屬性	元素	說明
onafterprint	body	網頁內容要被列印之後。
onbeforeprint	body	網頁內容要被列印之前。
onbeforeunload	body	網頁內容尚未載入之前。
onerror	audio、body、embed、img、object、script、style、video	元素內容錯誤發生時。
onhashchange	body	網頁網址的 hash tag 改變時。
onload	body、iframe、img、input、link、script、style	元素內容載入時。
onoffline	body	網頁斷線時。
ononline	body	網頁連線時。
onpageshow	body	當網頁顯示。
onresize	body	網頁大小改變時。
onsearch	input 為 search	搜尋發生時。
onunload	body	網頁內容尚未載入時。

下方的程式碼開啟後，當網頁載入完成，就會彈出 hello 的對話視窗，如果在網頁裡按下列印，就會彈出 ok 的對話視窗。

<body onload="alert('hello') onbeforeprint="alert('ok')">
  <h1>oxxo.studio</h1>
  <p>hello world</p>
</body>

事件屬性 ( 所有可見元素 )

HTML 裡所有的可見元素，都可以透過下列的屬性，在特定的狀況呼叫 JavaScript 執行特定動作 ( 較常出現在表單相關元素 )。

下方的程式碼開啟後網頁裡會有兩個 div，當滑鼠移到第一個時會變紅色，複製第二個的內容時第二個會變紅色。

<div onmouseover="this.style='color:red;'" onmouseout="this.style='color:black;'">滑鼠移上來會變色</div>
<div oncopy="this.style='color:red;'">複製內容會變色</div>

HTML 教學 - 會觸發 JavaScript 的屬性 ( 所有可見元素 )

事件屬性 ( 多媒體、圖片、影音 )

HTML 裡所有的多媒體影音元素，都可以透過下列的屬性，在特定的狀況呼叫 JavaScript 執行特定動作。

屬性	元素	說明
onabort	audio、embed、img、object、video	多媒體元素的加載被中斷時。
oncanplay	audio、embed、object、video	多媒體檔案能夠播放時。
ondurationchange	audio、video	多媒體元素內容長度改變時。
onemptied	audio、video	多媒體元素檔案突然不可用時。
onended	audio、video	多媒體元素檔案播放完成時。
onloadeddata	audio、video	多媒體元素內容載入完成時。
onloadstart	audio、video	多媒體元素內容開始載入時。
onstalled	audio、video	多媒體元素的內容載入錯誤時。
onvolumechange	audio、video	多媒體元素音量改變時。
onwaiting	audio、video	多媒體元素等待載入時。
onpause	audio、video	多媒體元素的內容暫停時。
onplay	audio、video	多媒體元素的內容開始播放時。
onplaying	audio、video	多媒體元素的內容正在播放時。
onratechange	audio、video	多媒體元素的內容比率改變時。

下方的程式碼開啟後，當按下播放按鈕，就會先彈出一個 hello 的對話視窗。

<video src="video.mp4" controls onplay="alert('hello')">

小結

雖然說這些 HTML 元素的屬性，在比較複雜的網頁裡，大多都會使用 JavasScript 來替代，但如果熟悉了這些屬性，也能在不太需要寫程式的狀況下，做出類似程式才有的功能呦～

跟著 OXXO 一起學 HTML系列第 8 篇