搜尋

HTML 元素屬性

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

快速導覽:

所有範例可使用 JS BinCodePenJSFiddle 進行線上實作,或使用筆記本編輯,不用安裝任何軟體 ( 參考:使用 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 執行特定動作 ( 較常出現在表單相關元素 )。

|屬性|說明| |--|--|--| |onblur|元素失焦時。| |oncopy|元素內容被複製時。| |oncut|元素內容被剪下時。| |onpaste|在元素上貼上內容。| |onclick|元素被點擊時。| |ondblclick|元素被滑鼠雙擊時。| |ondrag|元素拖動時。| |ondragend|元素拖動結束時。| |ondragenter|被拖動的元素進入時。| |ondragleave|被拖動的元素離開時。| |ondragover|被拖動的元素覆蓋時。| |ondragstart|元素拖動開始時。| |ondrop|拖動的元素放下時。| |onfocus|元素成為焦點時。| |oninput|在元素裡輸入內容時。| |oninvalid|元素內容為無效腳本時。| |onkeydown|在元素裡按下鍵盤按鍵。| |onkeypress|在元素裡將鍵盤按鍵按著不放。| |onkeyup|在元素裡放開鍵盤按鍵。| |onmousedown|在元素上按下滑鼠。| |onmousemove|在元素上移動滑鼠。| |onmouseout|滑鼠離開元素。| |onmouseover|滑鼠在元素上面。| |onmouseup|在元素上放開滑鼠。| |onmousewheel|在元素上滾動滑鼠滾輪。| |onscroll|元素的捲軸被捲動時。| |onwheel|在元素上滾動滑鼠滾輪。| |onselect|元素被選取時 ( 針對 input )。| |onreset|元素被重設時 ( 針對 form )。|

下方的程式碼開啟後網頁裡會有兩個 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 來替代,但如果熟悉了這些屬性,也能在不太需要寫程式的狀況下,做出類似程式才有的功能呦~

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作