HTML 元素属性

HTML 中所有的元素都具有属性 ( Attributes )，透过属性的设定，可以调整元素的行为或样式，这篇教学会介绍 HTML 元素的属性。

快速导览：

属性写法

全域属性 ( Global Attributes )

个别属性、个别属性 ( 清单、表格 )

个别属性 ( 多媒体、图片、影音 )、个别属性 ( 表单 )

事件属性

事件属性 ( 所有可见元素 )

事件属性 ( 多媒体、图片、影音 )

所有范例可使用 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 执行特定动作 ( 较常出现在表单相关元素 )。

属性	说明
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 教学

基本介绍

基础知识

网页信息元素

常用元素

文字样式元素

表格＆清单元素

表单元素

语意结构元素

影音＆图形元素

弹出视窗

网页嵌入应用