通用屬性

通用屬性是每個元件都可以用到的，但有少數例外，例如 APPLET 元件只用到核心屬性。通用屬性分成三類：

1. 核心屬性： ID， CLASS， STYLE， TITLE。
2. 國際化語言屬性： DIR， LANG。
3. 啟動程序的事件： ONCLICK， ONDBLCLICK, ONMOUSEDOWN， ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN， ONKEYUP。

此外還有其它屬性與事件。

核心屬性：ID，CLASS，STYLE，TITLE。

屬性說明
ID ID 為元件在文件中的識別名。同一文件的元件，其名稱不可相同。ID 的第一個字必須是 A-Z 或 a-z。第二個字與其後的字可是字母 (A-Za-z), 數字 (0-9), 連字號 『 - 』, 底線 『 _ 』, 冒號『 : 』, 及逗點 『 . 』。大小寫字母是不同。ID 有多種用途： （一）用在宣告風格表（style sheet）作為選擇元。 <style type='text/css'> #ID1 {background:blue;color:white} </style> <span id='ID1'>ID1 的顯示風格</span> 範例： <style type='text/css'> #ID1 {background:blue;color:white} </style> <span id='ID1'>ID1 的顯示風格</span> 執行結果： ID1 的顯示風格 （二）用在網頁中設定超連結的錨。 <a id='anc1'></a><a href='#anc1'>點我移位</a> 範例： <a id='anc1'></a><a href='#anc1'>點我移位</a> 執行結果： 點我移位 （三）配合 javascript 使用。可利用 javascript 的方法 getElementById() 取得元件的指標，然後可以讀取或修改元件。 <span id='me' style='display:none'> Hello world</span> <button onclick="alert(document.getElementById('me').innerHTML)"> 點擊我</button> 範例： <span id='me' style='display:none'> Hello world</span> <button onclick="alert(document.getElementById('me').innerHTML)"> 點擊我</button> 執行結果： Hello world
CLASS 將元件性質相似的元件，宣告相同的類別（CLASS）。可將類別作為風格表的選擇元，宣告多個屬性的值，例如顏色，背景，字型等等；如此同一類的元件，展現的方式相同。ID 與 CLASS 都能用在風格表；但在同一個文件中，一個 ID 名稱只能用在一個元件。可用 getElementsByTagName() 擷取。 <style type='text/css'> .boy {background:blue} .girl {background:red} </style> <span class='boy'>蕭敬騰</span> <span class='girl'>蔡依林</span> <span class='boy'>周杰倫</span> <span class='girl'>曾沛慈</span> 範例： <style type='text/css'> .boy {background:blue} .girl {background:red} </style> <span class='boy'>蕭敬騰</span> <span class='girl'>蔡依林</span> <span class='boy'>周杰倫</span> <span class='girl'>曾沛慈</span> 執行結果： 蕭敬騰 蔡依林 周杰倫 曾沛慈 CLASS 屬性中可以放多個風格表的類別。類別間用空白分開。 <style type='text/css'> .clsbig {font-size:160%} .clsred {color:red} </style> <span class='clsbig'>大字</span> <span class='clsred'>紅字</span> <span class='clsbig clsred'>大字與紅字</span> 範例： <style type='text/css'> .clsbig  {font-size:160%} .clsred  {color:red} </style> <span class='clsbig'>大字</span> <span class='clsred'>紅字</span> <span class='clsbig clsred'>大字與紅字</span> 執行結果： 大字 紅字 大字與紅字
STYLE 可在元件中宣告風格表。 <span style='color:red'>顏色</span> <span style='font-size:140%'>字型大小</span> 範例： <span style='color:red'>顏色</span> <span style='font-size:140%'>字型大小</span> 執行結果： 顏色 字型大小
TITLE 可存放元件的說明文字。 <span title="我住台灣（這就是 title 的內容）" style='background:blue'> 你住哪裡？請將滑鼠游標放在此</span> 範例： <span title="我住台灣（這就是 title 的內容）" style='background:blue'> 你住哪裡？請將滑鼠游標放在此</span> 執行結果： 你住哪裡？請將滑鼠游標放在此

國際化語言屬性：DIR，LANG。

屬性說明
DIR 改變文字預設的展現方向。有兩種值可以選擇： ltr：文字由左至右展現。 rtl：文字由右至左展現。 獨角碼（Unicode）也可以用來改變文字的方向： &#x202E; 文字由右至左展現。 &#x202D; 文字由左至右展現。 &#x202C; 停止改變文字方向，以預設方向展現文字。 SPAN：<span dir='rtl'>中華民國</span> vs <span dir='ltr'>中華民國</span><br /> BDO：<bdo dir='rtl'>中華民國</bdo> vs <bdo dir='ltr'>中華民國</bdo><br /> 使用獨角碼改變方向： &#x202D;hello my friend&#x202C; 對 &#x202E;hello my friend&#x202C; ； &#x202D;中華民國&#x202C; vs &#x202E;中華民國&#x202C; 範例： SPAN：<span dir='rtl'>中華民國</span> vs <span dir='ltr'>中華民國</span><br /> BDO：<bdo dir='rtl'>中華民國</bdo> vs <bdo dir='ltr'>中華民國</bdo><br /> 使用獨角碼改變方向： ‭hello my friend‬ 對 ‮hello my friend‬  ； ‭中華民國‬ vs ‮中華民國‬ 執行結果： SPAN：中華民國 vs 中華民國 BDO：中華民國 vs 中華民國 使用獨角碼改變方向： ‭hello my friend‬ 對 ‮hello my friend‬ ； ‭中華民國‬ vs ‮中華民國‬
LANG 用來宣告元件內容所用的自然語言。此元件用到的語言碼請參考：RFC1766 語言識別標籤。語言碼有一個主碼，必要時後接一個子碼。例如 zh 為中文，zh-TW 為台灣中文。

啟動程序的事件：

包括 ONCLICK，ONDBLCLICK, ONMOUSEDOWN，ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN，ONKEYUP 事件。不同的瀏覽器還會包括一些特別的程序啟動事件。這些外界事件可以啟動 javascript 程序。

屬性說明
ONCLICK 用滑鼠左鍵點擊時，會啟動程序。 <button onclick="alert('您好！')"> 點擊我</button> 範例： <button onclick="alert('您好！')"> 點擊我</button> 執行結果：
ONDBLCLICK 用滑鼠左鍵 雙 點擊時，會啟動程序。 <button ondblclick="alert('對！')"> 點我兩下</button> 範例： <button ondblclick="alert('對！')"> 點我兩下</button> 執行結果：
ONMOUSEDOWN 當滑鼠左鍵按下時，會啟動程序。 <button onmousedown="this.innerHTML=Math.random()"> 點我</button> 範例： <button onmousedown="this.innerHTML=Math.random()"> 點我</button> 執行結果：
ONMOUSEUP 當滑鼠左鍵按下後，又放開時，會啟動程序。 <button onmouseup="this.innerHTML=Math.random()"> 放開我</button> 範例： <button onmouseup="this.innerHTML=Math.random()"> 放開我</button> 執行結果：
ONMOUSEOVER 當滑鼠游標進入後，會啟動程序。 <button onmouseover="this.innerHTML=Math.random()"> 進來吧</button> 範例： <button onmouseover="this.innerHTML=Math.random()"> 進來吧</button> 執行結果：
ONMOUSEMOVE 當滑鼠游標進入後，又移動時，會啟動程序。 <button onmousemove="this.innerHTML=Math.random()"> 動動我</button> 範例： <button onmousemove="this.innerHTML=Math.random()"> 動動我</button> 執行結果：
ONMOUSEOUT 當滑鼠游標進入後，又離開時，會啟動程序。 <button onmouseout="this.innerHTML=Math.random()"> 離開我</button> 範例： <button onmouseout="this.innerHTML=Math.random()"> 離開我</button> 執行結果：
ONKEYPRESS 按下後，又放開時，會啟動程序。 先用滑鼠點選，再按鍵盤。<br /> <input onkeypress="alert('按好了！')" value='點鍵盤'> 範例： 先用滑鼠點選，再按鍵盤。<br /> <input onkeypress="alert('按好了！')"   value='點鍵盤'> 執行結果： 先用滑鼠點選，再按鍵盤。
ONKEYDOWN 當鍵盤按下後，會啟動程序。 <input onkeydown="alert('按了！')" value='按鍵盤'> 範例： <input onkeydown="alert('按了！')"   value='按鍵盤'> 執行結果：
ONKEYUP 當鍵盤按下後，又放開時，會啟動程序。 <input onkeyup="alert('放了！')" value='放開鍵'> 範例： <input onkeyup="alert('放了！')"   value='放開鍵'> 執行結果：