HTML 教程手册（新）: HTML 教程学习导读; HTML 简介; HTML 编辑器; +
HTML 基础标签

HTML 头部

HTML 元素

HTML注释; +
HTML 段落与文字

HTML 标题

HTML 段落

HTML 文本格式化

HTML 区块

HTML 字符实体; +
HTML 颜色

HTML 颜色名

HTML 颜色值; HTML 表格; HTML 列表; HTML 表单; HTML 链接; HTML 属性; HTML CSS; HTML 图像; HTML 布局; HTML 框架; HTML 脚本; HTML URL; HTML 速查列表; HTML 总结; HTML 标签列表(字母排序); HTML 标签列表（功能排序）; -
HTML 全局属性

accesskey 属性

class 属性

contenteditable 属性

contextmenu 属性

data-* 属性

draggable 属性

dropzone 属性

hidden 属性

id 属性

lang 属性

spellcheck 属性

style 属性

tabindex 属性

title 属性

translate 属性

dir 属性; +
HTML 事件

onafterprint 事件属性

onbeforeprint 事件属性

onload 事件属性

onresize 事件属性

onunload 事件属性

onblur 事件属性

onchange 事件属性

onfocus 事件属性

onselect 事件属性

onsubmit 事件属性

onkeydown 事件属性

onkeypress 事件属性

onkeyup 事件属性

onclick 事件属性

ondblclick 事件属性

onmousedown 事件属性

onmousemove 事件属性

onmouseout 事件属性

onmouseover 事件属性

onmouseup 事件属性

onshow 事件属性

ontoggle 事件属性; +
HTML 画布

shadowBlur 属性

shadowOffsetX 属性

shadowOffsetY 属性

createLinearGradient() 方法

createPattern() 方法

createRadialGradient() 方法

addColorStop() 方法

lineCap 属性

lineJoin 属性

lineWidth 属性

miterLimit 属性

rect() 方法

fillRect() 方法

strokeRect() 方法

clearRect() 方法

fill() 方法

stroke() 方法

beginPath() 方法

moveTo() 方法

closePath() 方法

lineTo() 方法

clip() 方法

quadraticCurveTo() 方法

bezierCurveTo() 方法

arc() 方法

arcTo() 方法

isPointInPath() 方法

scale() 方法

rotate() 方法

translate() 方法

transform() 方法

setTransform() 方法

font 属性

textAlign 属性

textBaseline 属性

fillText() 方法

strokeText() 方法

measureText() 方法

drawImage() 方法

width 属性

height 属性

data 属性

createImageData() 方法

getImageData() 方法

putImageData() 方法

globalAlpha 属性

globalCompositeOperation 属性

fillStyle 属性

strokeStyle 属性

shadowColor 属性; +
HTML 音频/视频

addTextTrack() 方法

canPlayType() 方法

load() 方法

play() 方法

pause() 方法

audioTracks 属性

autoplay 属性

buffered 属性

controller 属性

controls 属性

currentSrc 属性

currentTime 属性

defaultMuted 属性

defaultPlaybackRate 属性

duration 属性

ended 属性

error 属性

loop 属性

mediaGroup 属性

muted 属性

networkState 属性

paused 属性

playbackRate 属性

played 属性

preload 属性

readyState 属性

seekable 属性

seeking 属性

src 属性

startDate 属性

textTracks 属性

videoTracks 属性

volume 属性

abort 事件

canplay 事件

canplaythrough 事件

durationchange 事件

ended 事件

error 事件

loadeddata 事件

loadedmetadata 事件

loadstart 事件

pause 事件

play 事件

playing 事件

progress 事件

ratechange 事件

seeked 事件

seeking 事件

stalled 事件

suspend 事件

timeupdate 事件

volumechange 事件

waiting 事件; HTML 有效 DOCTYPES; HTML 颜色名; HTML 拾色器[即将发布]; HTML 颜色混搭[即将发布]; HTML 字符集; HTML ASCII; HTML ISO-8859-1; HTML 符号; HTML URL 编码; HTML 语言代码; HTTP 消息; HTTP 方法; Px、Em 换算工具; 键盘快捷键; 注释标签 ; 声明标签 <!DOCTYPE>; +
超链接<a>

charset 属性

coords 属性

download 属性

href 属性

hreflang 属性

media 属性

name 属性

rel 属性

rev 属性

shape 属性

target属性

type 属性; 缩写标签<abbr>; 首字母缩写<acronym>; 联系地址<address>; 嵌入Java Applet <applet>; +
图像映射区域<area>

alt 属性

coords 属性

href 属性

hreflang 属性

media 属性

nohref 属性

rel 属性

shape 属性

target 属性

type 属性; 文章内容<article>; 旁白标签<aside>; +
音频标签<audio>

autoplay 属性

controls 属性

loop 属性

muted 属性

preload 属性

src 属性; 加粗标签<b>; +
文档根URL<base>

href 属性

target 属性; +
默认字体<basefont>

color 属性

face 属性

size 属性; 双向隔离<bdi>; +
双向文本覆盖<bdo>

dir 属性; 大文本标签<big>; +
块引用标签<blockquote>

cite 属性; +
文档主体<body>

alink 属性

background 属性

bgcolor 属性

link 属性

text 属性

vlink 属性; 换行标签 <br>; +
按钮标签<button>

autofocus 属性

disabled 属性

form 属性

formaction 属性

formenctype 属性

formmethod 属性

formnovalidate 属性

formtarget 属性

name 属性

type 属性

value 属性; +
画布标签<canvas>

height 属性

width 属性; +
表格标题<caption>

align 属性; 文本居中<center>; 作品标题<cite>; 内联代码<code>; +
表格列标签<col>

align 属性

char 属性

charoff 属性

span 属性

valign 属性

width 属性; +
表格整列<colgroup>

align 属性

char 属性

charoff 属性

span 属性

valign 属性

width 属性; +
命令标签<command>

checked 属性

disabled 属性

icon 属性

label 属性

radiogroup 属性

type 属性; 选项列表<datalist>; 列表条目<dd>; +
删除文本<del>

cite 属性

datetime 属性; +
详细信息<details>

open 属性; 定义标签<dfn>; +
对话框<dialog>

open 属性; +
目录列表<dir>

compact 属性; +
块标签<div>

align 属性; 列表标签<dl>; 列表名称<dt>; 强调文本<em>; +
容器标签<embed>

height 属性

src 属性

type 属性

width 属性; +
字段集标签<fieldset>

disabled 属性

form 属性

name 属性; 图标题<figcaption>; 可附标题内容<figure>; +
字体标签<font>

color 属性

face 属性

size 属性; 页脚标签<footer>; +
表单标签<form>

accept 属性

accept-charset 属性

action 属性

autocomplete 属性

enctype 属性

method 属性

name 属性

novalidate 属性

target 属性; +
框架标签<frame>

frameborder 属性

longdesc 属性

marginheight 属性

marginwidth 属性

name 属性

noresize 属性

scrolling 属性

src 属性; +
框架集<frameset>

cols 属性

rows 属性; 头部标签<head>; 页眉标签<header>; 标题分组<hgroup>; +
标题标签<h1> - <h6>

align 属性; +
分隔线<hr>

align 属性

noshade 属性

size 属性

width 属性; 斜体标签<i>; +
内联框架<iframe>

align 属性

frameborder 属性

height 属性

longdesc 属性

marginheight 属性

marginwidth 属性

name 属性

sandbox 属性

scrolling 属性

seamless 属性

src 属性

srcdoc 属性

width 属性; +
图像标签<img>

align 属性

alt 属性

border 属性

height 属性

hspace 属性

ismap 属性

longdesc 属性

src 属性

usemap 属性

vspace 属性

width 属性; +
输入标签<input>

accept 属性

align 属性

alt 属性

autocomplete 属性

autofocus 属性

checked 属性

disabled 属性

form 属性

formaction 属性

formenctype 属性

formmethod 属性; 插入文档文本<ins>; 键盘文本<kbd>; 表单密钥<keygen>; 标记标签<label>; 为fieldset定义标题<legend>; 列表项目<li>; 外部链接<link>; 图像映射<map>; 标记文本<mark>; 菜单标签<menu>; 元数据<meta>; 弹出式菜单<menuitem>; 度量衡<meter>; 导航链接<nav>; 替代框架文本<noframes>; 替代脚本内容<noscript>; 嵌入对象<object>; 有序列表<ol>; 相关选项组合<optgroup>; 下拉列表项目<option>; 计算结果输出<output>; 段落标签<p>; 格式化文本<pre>; 对象参数<param>; HTML 文档<html>; 任务进程<progress>; 内联引用<q>; 替代ruby显示内容<rp>; 字符解释<rt>; ruby 注释<ruby>; 标识错误文本<s>; 样本文本<samp>; 脚本标签<script>; 通用区域<section>; 下拉列表<select>; 小型文本<small>; +
媒体资源<source>

media 属性[即将发布]

src 属性[即将发布]

type 属性[即将发布]; 行内元素<span>; 删除线<strike>; 重要文本<strong>; +
样式信息<style>

media 属性[即将发布]

scoped 属性[即将发布]

type 属性[即将发布]; 下标文本<sub>; 可见标题<summary>; 上标文本<sup>; +
表格标签<table>

align 属性

bgcolor 属性[即将发布]

border 属性[即将发布]

cellpadding 属性[即将发布]

cellspacing 属性[即将发布]

frame 属性[即将发布]

rules 属性[即将发布]

summary 属性[即将发布]

width 属性[即将发布]; +
表格主体<tbody>

align 属性

char 属性

charoff 属性

valign 属性; +
表格列标签<td>

abbr 属性

align 属性

axis 属性

bgcolor 属性

char 属性

charoff 属性

colspan 属性

headers 属性

height 属性

nowrap 属性

rowspan 属性

scope 属性

valign 属性

width 属性; +
文本输入<textarea>

form 属性

maxlength 属性

name 属性

placeholder 属性

readonly 属性

required 属性

rows 属性

wrap 属性

autofocus 属性

cols 属性

disabled 属性; +
表格页脚<tfoot>

align 属性

char 属性

charoff 属性

valign 属性; +
表头单元格<th>

abbr 属性

align 属性

axis 属性

bgcolor 属性

char 属性

charoff 属性

colspan 属性

headers 属性

height 属性

nowrap 属性

rowspan 属性

scope 属性

valign 属性

width 属性; +
表头内容<thead>

align 属性

char 属性

charoff 属性

valign 属性; +
时间标签<time>

datetime 属性; 文档标题<title>; +
表格行标签<tr>

align 属性

bgcolor 属性

char 属性

charoff 属性

valign 属性; +
外部文本轨道<track>

default 属性

kind 属性

label 属性

src 属性

srclang 属性; 打字机文本<tt>; 下划线<u>; +
无序列表<ul>

compact 属性

type 属性; 变量标签<var>; +
视频标签<video>

autoplay 属性

controls 属性

height 属性

loop 属性

muted 属性

poster 属性

preload 属性

src 属性

width 属性; 换行符<wbr>

data-* 属性

data-* 属性用于存储私有页面后应用的自定义数据。

灭绝小师太更新时间：2019-03-28 11:35:18

具体内容
相关视频
相关知识
最新评论

HTML data-* 属性

定义和用法

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串

注意：自定义属性前缀 "data-" 会被客户端忽略。

浏览器支持

所有主流浏览器都支持 data-* 属性。

HTML 4.01 与 HTML5之间的差异

data-* 属性是 HTML5 新增的。

语法

<element data-*="somevalue">

属性值

值	描述
somevalue	指定属性值 (一个字符串)

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script>
function showDetails(animal)
{
	var animalType = animal.getAttribute("data-animal-type");
	alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

推荐手册

data-* 属性

实例