-
-
-
-Made with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).
-
-## License
-
-Licensed under the MIT License.
diff --git a/docs/assets/Fetching_a_page.png b/assets/Fetching_a_page.png
similarity index 100%
rename from docs/assets/Fetching_a_page.png
rename to assets/Fetching_a_page.png
diff --git a/docs/assets/chrome.svg b/assets/chrome.svg
similarity index 100%
rename from docs/assets/chrome.svg
rename to assets/chrome.svg
diff --git a/docs/assets/chrome_first_example.png b/assets/chrome_first_example.png
similarity index 100%
rename from docs/assets/chrome_first_example.png
rename to assets/chrome_first_example.png
diff --git a/docs/assets/edge.svg b/assets/edge.svg
similarity index 100%
rename from docs/assets/edge.svg
rename to assets/edge.svg
diff --git a/docs/assets/editors-001.png b/assets/editors-001.png
similarity index 100%
rename from docs/assets/editors-001.png
rename to assets/editors-001.png
diff --git a/docs/assets/editors-002.png b/assets/editors-002.png
similarity index 100%
rename from docs/assets/editors-002.png
rename to assets/editors-002.png
diff --git a/docs/assets/editors-003.png b/assets/editors-003.png
similarity index 100%
rename from docs/assets/editors-003.png
rename to assets/editors-003.png
diff --git a/docs/assets/editors-004.png b/assets/editors-004.png
similarity index 100%
rename from docs/assets/editors-004.png
rename to assets/editors-004.png
diff --git a/docs/assets/editors-005.png b/assets/editors-005.png
similarity index 100%
rename from docs/assets/editors-005.png
rename to assets/editors-005.png
diff --git a/docs/assets/editors-006.png b/assets/editors-006.png
similarity index 100%
rename from docs/assets/editors-006.png
rename to assets/editors-006.png
diff --git a/docs/assets/example.png b/assets/example.png
similarity index 100%
rename from docs/assets/example.png
rename to assets/example.png
diff --git a/docs/assets/firefox.svg b/assets/firefox.svg
similarity index 100%
rename from docs/assets/firefox.svg
rename to assets/firefox.svg
diff --git a/docs/assets/horse.mp3 b/assets/horse.mp3
similarity index 100%
rename from docs/assets/horse.mp3
rename to assets/horse.mp3
diff --git a/docs/assets/horse.ogg b/assets/horse.ogg
similarity index 100%
rename from docs/assets/horse.ogg
rename to assets/horse.ogg
diff --git a/docs/assets/img_arc.gif b/assets/img_arc.gif
similarity index 100%
rename from docs/assets/img_arc.gif
rename to assets/img_arc.gif
diff --git a/docs/assets/img_beziercurve.gif b/assets/img_beziercurve.gif
similarity index 100%
rename from docs/assets/img_beziercurve.gif
rename to assets/img_beziercurve.gif
diff --git a/docs/assets/img_canvas_arcto.png b/assets/img_canvas_arcto.png
similarity index 100%
rename from docs/assets/img_canvas_arcto.png
rename to assets/img_canvas_arcto.png
diff --git a/docs/assets/img_miterlimitFig.gif b/assets/img_miterlimitFig.gif
similarity index 100%
rename from docs/assets/img_miterlimitFig.gif
rename to assets/img_miterlimitFig.gif
diff --git a/docs/assets/img_quadraticcurve.gif b/assets/img_quadraticcurve.gif
similarity index 100%
rename from docs/assets/img_quadraticcurve.gif
rename to assets/img_quadraticcurve.gif
diff --git a/docs/assets/img_textbaseline.gif b/assets/img_textbaseline.gif
similarity index 100%
rename from docs/assets/img_textbaseline.gif
rename to assets/img_textbaseline.gif
diff --git a/docs/assets/img_translate.gif b/assets/img_translate.gif
similarity index 100%
rename from docs/assets/img_translate.gif
rename to assets/img_translate.gif
diff --git a/docs/assets/mov_bbb.mp4 b/assets/mov_bbb.mp4
similarity index 100%
rename from docs/assets/mov_bbb.mp4
rename to assets/mov_bbb.mp4
diff --git a/docs/assets/mov_bbb.ogm b/assets/mov_bbb.ogm
similarity index 100%
rename from docs/assets/mov_bbb.ogm
rename to assets/mov_bbb.ogm
diff --git a/docs/assets/no-support-html5.svg b/assets/no-support-html5.svg
similarity index 100%
rename from docs/assets/no-support-html5.svg
rename to assets/no-support-html5.svg
diff --git a/docs/assets/opera.svg b/assets/opera.svg
similarity index 100%
rename from docs/assets/opera.svg
rename to assets/opera.svg
diff --git a/docs/assets/responsive_viewport1.png b/assets/responsive_viewport1.png
similarity index 100%
rename from docs/assets/responsive_viewport1.png
rename to assets/responsive_viewport1.png
diff --git a/docs/assets/responsive_viewport2.png b/assets/responsive_viewport2.png
similarity index 100%
rename from docs/assets/responsive_viewport2.png
rename to assets/responsive_viewport2.png
diff --git a/docs/assets/safari.svg b/assets/safari.svg
similarity index 100%
rename from docs/assets/safari.svg
rename to assets/safari.svg
diff --git a/docs/assets/sublime_text.png b/assets/sublime_text.png
similarity index 100%
rename from docs/assets/sublime_text.png
rename to assets/sublime_text.png
diff --git a/docs/assets/visual_studio_code.png b/assets/visual_studio_code.png
similarity index 100%
rename from docs/assets/visual_studio_code.png
rename to assets/visual_studio_code.png
diff --git a/docs/assets/workplace.jpg b/assets/workplace.jpg
similarity index 100%
rename from docs/assets/workplace.jpg
rename to assets/workplace.jpg
diff --git a/attribute/accept-charset.html b/attribute/accept-charset.html
new file mode 100644
index 000000000..5dfbd13ca
--- /dev/null
+++ b/attribute/accept-charset.html
@@ -0,0 +1,307 @@
+
+
+
+
+
+
+ accept-charset 属性指定要用于表单提交的字符编码。
默认值为保留字符串“UNKNOWN”（表示编码等于包含 <form> 元素的文档的编码）。
+accept-charset 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +accept-charset | +
具有 accept-charset 属性的表单：
+<form action="/action_page.php" accept-charset="ISO-8859-1"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="submit" value="Submit"> +</form> ++ +
| Element | +
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
|---|---|---|---|---|---|
| accept-charset | +Yes | +Yes | +Yes | +Yes | +Yes | +
accept 属性指定服务器接受的文件类型（可以通过文件上传提交）。
+注意： accept 属性只能与 <input type="file"> 一起使用。
+提示： 不要将此属性用作验证工具。 文件上传应在服务器上进行验证。
+accept 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +accept | +
指定服务器只接受文件上传中的图片文件：
+<form action="/action_page.php"> + <input type="file" name="pic" accept="image/*"> + <input type="submit"> +</form> ++ +
支持图片文件选择的同时，还支持 .heic 文件选择。
<form action="/action_page.php"> + <input type="file" name="pic" accept="image/*, .heic"> + <input type="submit"> +</form> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| accept | +8.0 | +10.0 | +4.0 | +6.0 | +15.0 | +
accesskey 属性指定激活/聚焦元素的快捷键。
注意： 不同浏览器访问快捷键的方式不同：
+| 浏览器 | +Windows | +Linux | +Mac | +
|---|---|---|---|
| Internet Explorer | +[Alt] + accesskey | +N/A | ++ |
| Chrome | +[Alt] + accesskey | +[Alt] + accesskey | +[Control] [Alt] + accesskey | +
| Firefox | +[Alt] [Shift] + accesskey | +[Alt] [Shift] + accesskey | +[Control] [Alt] + accesskey | +
| Safari | +[Alt] + accesskey | +N/A | +[Control] [Alt] + accesskey | +
| Opera | +Opera 15 或更高版本: [Alt] + accesskey Opera 12.1 或更高版本: [Shift] [Esc] + accesskey |
+ + | + |
但是，在大多数浏览器中，快捷方式可以设置为另一种组合键。
+提示： 如果多个元素具有相同的访问密钥，则行为不同：
+accesskey 是 全局属性 的一部分，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +accesskey | +
具有指定访问键的两个超链接：
+<a href="https://github.com/jaywcjlove/html-tutorial" accesskey="h">HTML5</a><br> +<a href="https://github.com/jaywcjlove/c-tutorial" accesskey="c">C 语言</a> ++ +
| Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| accesskey | +Yes | +Yes | +Yes | +Yes | +Yes | +
action 属性指定提交表单时将表单数据发送到何处。
action 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +action | +
提交时，将表单数据发送到名为 /action_page.php 的文件（以处理输入）：
<form action="/action_page.php" method="get"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="submit" value="Submit"> +</form> ++ +
| Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| action | +Yes | +Yes | +Yes | +Yes | +Yes | +
如果用户由于某种原因无法查看图像（由于连接速度慢、src 属性中的错误或用户使用屏幕阅读器），则 alt 属性提供图像的替代信息。
+注意： <img> 元素需要 alt 属性。
+注意： 对于 <input> 元素，alt 属性只能与 <input type="image"> 一起使用。
+提示： 要为图像创建工具提示，请使用 title 属性！
+alt 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <area> | +alt | +
| <img> | +alt | +
| <input> | +alt | +
带有可点击区域的图像地图：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> +<map name="workmap"> + <area shape="rect" coords="34,44,270,350" alt="Computer" href="a.html"> + <area shape="rect" coords="290,172,333,250" alt="Phone" href="abbr.html"> + <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="address.html"> +</map> ++ +
图片找不到，指定 alt 内容替代文本的图像：
<img src="smiley.gif" alt="Smiley face">
+
+
+ 带有代表提交按钮的图像的 HTML 表单，图片不存在显示 alt 内容：
<form action="/action_page.php"> + First name: <input type="text" name="fname"><br> + <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> +</form> ++ +
alt 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| area | +Yes | +Yes | +Yes | +Yes | +Yes | +
| img | +Yes | +Yes | +Yes | +Yes | +Yes | +
| input | +Yes | +Yes | +Yes | +Yes | +Yes | +
async 属性是一个布尔属性。
如果存在，它指定脚本将在可用时立即异步执行。
+注意： async 属性仅适用于外部脚本（并且仅应在存在 src 属性时使用）。
注意： 有几种方法可以执行外部脚本：
+async 存在：脚本与页面的其余部分异步执行（脚本将在页面继续解析时执行）async 不存在且 defer 存在：脚本在页面完成解析后执行async 或 defer 都不存在：在浏览器继续解析页面之前立即获取并执行脚本async 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <script> | +async | +
一个将在可用时立即异步运行的脚本：
+<script src="demo_async.js" async></script>
+表中的数字指定了完全支持该属性的第一个浏览器版本。
+| Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| async | +Yes | +10.0 | +3.6 | +Yes | +Yes | +
autocomplete 属性指定表单或输入字段是否应该打开或关闭自动完成功能。
自动完成允许浏览器预测值。 当用户开始输入字段时，浏览器应根据之前输入的值显示填充字段的选项。
+提示： 可以为表单设置“开启”自动完成功能，为特定输入字段设置“关闭”功能，反之亦然。
+注意： autocomplete 属性适用于以下 <input> 类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、范围和颜色。
autocomplete 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +autocomplete | +
| <input> | +autocomplete | +
具有自动完成功能的表单：
+<form action="/action\_page.php" method="get" autocomplete="on"> + First name:<input type="text" name="fname"><br> + E-mail: <input type="email" name="email"><br> + <input type="submit"> +</form> ++ +
具有自动完成功能的 HTML 表单（一个输入字段关闭）：
+<form action="/action_page.php" autocomplete="on"> + First name:<input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + E-mail: <input type="email" name="email" autocomplete="off"><br> + <input type="submit"> +</form> ++ +
autocomplete 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| form | +Yes | +Yes | +4.0 | +5.2 | +15.0 | +
| input | +17.0 | +5.0 | +4.0 | +5.2 | +9.6 | +
autofocus 属性是一个布尔属性。
当存在时，它指定元素在页面加载时应该自动获得焦点。
+autofocus 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <button> | +autofocus | +
| <input> | +autofocus | +
| <select> | +autofocus | +
| <textarea> | +autofocus | +
带自动对焦的按钮：
+<button type="button" autofocus>Click Me!</button>
+
+
+ 让 “名” 输入字段在页面加载时自动获得焦点：
+<form action="/action_page.php"> + 名: <input type="text" name="fname" autofocus><br> + 姓: <input type="text" name="lname"><br> + <input type="submit"> +</form> ++ +
具有自动对焦的文本区域：
+<textarea autofocus> +我们提供所有 Web 开发技术的免费教程。 +</textarea> ++ +
autofocus 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| form | +5.0 | +10.0 | +4.0 | +5.0 | +9.6 | +
| input | +5.0 | +10.0 | +4.0 | +5.0 | +9.6 | +
| textarea | +Yes | +10.0 | +4.0 | +Yes | +Yes | +
autoplay 属性是一个布尔属性。
当存在时，音频/视频将立即自动开始播放而不会停止。
+autoplay 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <audio> | +autoplay | +
| <video> | +autoplay | +
将自动开始播放的音频文件：
+<audio controls autoplay> + <source src="horse.ogg" type="audio/ogg"> + <source src="horse.mp3" type="audio/mpeg"> + 您的浏览器不支持音频元素。 +</audio> ++ +
将自动开始播放的视频：
+<video width="320" autoplay> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
autoplay 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| audio | +4.0 | +9.0 | +3.5 | +4.0 | +10.5 | +
| video | +4.0 | +9.0 | +3.5 | +4.0 | +10.5 | +
当被 <meta> 元素使用时，charset 属性指定 HTML 文档的字符编码。
当被 <script> 元素使用时，charset 属性指定外部脚本文件中使用的字符编码。
HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，它涵盖了世界上几乎所有的字符和符号！
+charset 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <meta> | +charset | +
| <script> | +charset | +
指定 HTML 文档的字符编码：
+<head>
+ <meta charset="UTF-8">
+</head>
+带有 UTF-8 字符集的外部 JavaScript：
+<script src="myscripts.js" charset="UTF-8"></script>
+charset 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <meta> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <script> | +Yes | +Yes | +Yes | +Yes | +Yes | +
checked 属性是一个布尔属性。
如果存在，它指定在页面加载时应该预先选择（检查）一个 <input> 元素。
checked 属性可以与 <input type="checkbox"> 和 <input type="radio"> 一起使用。
checked 属性也可以在页面加载后使用 JavaScript 设置。
checked 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +checked | +
带有预选复选框的 HTML 表单：
+<form action="/action_page.php"> + <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> + <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br> + <input type="submit" value="Submit"> +</form> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| checked | +1.0 | +2.0 | +1.0 | +1.0 | +1.0 | +
cite 属性指定了一个文档的 URL，该文档解释了引用，或者为什么插入/更改了文本。
cite 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <blockquote> | +cite | +
| <del> | +cite | +
| <ins> | +cite | +
| <q> | +cite | +
从另一个来源引用的部分：
+<blockquote cite="https://github.com/jaywcjlove/html-tutorial"> + +HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 + +</blockquote> ++ +
已删除的文本，带有一个文档的 URL，该文档解释了该文本被删除的原因：
+<p> + <del cite="../tags/del.html">此文字已被删除</del> +</p> ++ +
一个插入的文本，带有一个文档的 URL，解释了为什么插入文本：
+<p> + 这是一个文本。 + <ins cite="../tags/ins.html">这是插入的文本。</ins> +</p> ++ +
指定报价的来源 URL：
+<p>超文本标记语言 +<q cite="https://github.com/jaywcjlove/html-tutorial"> + HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。 +</p> ++ +
cite 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| blockquote | +Yes | +Yes | +Yes | +Yes | +Yes | +
| del | +Yes | +Yes | +Yes | +Yes | +Yes | +
| ins | +Yes | +Yes | +Yes | +Yes | +Yes | +
| q | +Yes | +Yes | +Yes | +Yes | +Yes | +
class 属性为元素指定一个或多个类名。
class 属性主要用于指向样式表中的类。 但是，JavaScript 也可以使用它（通过 HTML DOM）来更改具有指定类的 HTML 元素。
class 属性是 全局属性 的一部分，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 所有 HTML 元素 | +class | +
在 HTML 文档中使用 class 属性：
+<html> +<head> + <style> + h1.intro { + color: blue; + } + + p.important { + color: green; + } + </style> +</head> +<body> + <h1 class="intro">标题 1</h1> + <p>一个段落。</p> + <p class="important">请注意，这是一个重要的段落。 :)</p> +</body> +</html> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| class | +Yes | +Yes | +Yes | +Yes | +Yes | +
cols 属性指定文本区域的可见宽度。
提示： textarea 的大小也可以通过 CSS 的 height 和 width 属性来设置。
+cols 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <textarea> | +cols | +
具有指定高度和宽度的文本区域：
+<textarea rows="4" cols="50"> +在 HTML Tutorial，您将学习如何制作网站。 他们提供所有 Web 开发技术的免费教程。 +</textarea> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| cols | +Yes | +Yes | +Yes | +Yes | +Yes | +
colspan 属性定义了一个表格单元格应该跨越的列数。
colspan 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <td> | +colspan | +
| <th> | +colspan | +
一个包含跨两列的表格单元格的 HTML 表格：
+<style> + table, th, td { border: 1px solid black; border-collapse: collapse; } +</style> +<table> + <tr> + <th>Month</th> + <th>Savings</th> + </tr> + <tr> + <td>January</td> + <td>$100</td> + </tr> + <tr> + <td>February</td> + <td>$100</td> + </tr> + <tr> + <td colspan="2">Sum: $180</td> + </tr> +</table> ++ +
一个包含跨两列的标题单元格的 HTML 表格：
+<style> + table, th, td { border: 1px solid black; border-collapse: collapse; } +</style> +<table> + <tr> + <th colspan="2">Monthly Savings</th> + </tr> + <tr> + <td>January</td> + <td>$100</td> + </tr> + <tr> + <td>February</td> + <td>$80</td> + </tr> +</table> ++ +
colspan 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <td> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <th> | +Yes | +Yes | +Yes | +Yes | +Yes | +
content 属性给出了与 http-equiv 或 name 属性相关的值。
content 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <meta> | +content | +
描述 HTML 文档中的元数据：
+<head>
+ <meta name="description" content="Free Web tutorials">
+ <meta name="keywords" content="HTML,CSS,XML,JavaScript">
+</head>
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| content | +Yes | +Yes | +Yes | +Yes | +Yes | +
contenteditable 属性指定元素的内容是否可编辑。
注意： 当一个元素没有设置 contenteditable 属性时，该元素会从其父元素继承它。
contenteditable 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 所有 HTML 元素 | +contenteditable | +
可编辑的段落：
+<p contenteditable="true" autofocus>这是一个可编辑的段落。</p>
+
+
+ 表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| contenteditable | +4.0 | +6.0 | +3.5 | +3.1 | +10.1 | +
controls 属性是一个布尔属性。
如果存在，它指定应显示音频/视频控件。
+控制应包括：
+controls 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <audio> | +controls | +
| <video> | +controls | +
带有浏览器默认控件的 <audio> 元素：
+<audio controls> + <source src="horse.ogg" type="audio/ogg"> + <source src="horse.mp3" type="audio/mpeg"> + 您的浏览器不支持音频元素。 +</audio> ++ +
带有浏览器默认控件的 <video> 元素：
+<video width="320" controls> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
controls 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| audio | +4.0 | +9.0 | +3.5 | +4.0 | +10.5 | +
| video | +4.0 | +9.0 | +3.5 | +4.0 | +10.5 | +
coords 属性指定图像地图中某个区域的坐标。
coords 属性与 shape 属性一起使用来指定区域的大小、形状和位置。
提示： 区域左上角的坐标为 0,0。
coords 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <area> | +coords | +
带有可点击区域的图像地图：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> +<map name="workmap"> + <area shape="rect" coords="34,44,270,350" alt="Computer" href="../tags/a.html"> + <area shape="rect" coords="290,172,333,250" alt="Phone" href="../tags/abbr.html"> + <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="../tags/address.html"> +</map> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| coords | +Yes | +Yes | +Yes | +Yes | +Yes | +
data-* 属性用于存储页面或应用程序私有的自定义数据。
data-* 属性使我们能够在所有 HTML 元素上嵌入自定义数据属性。
然后可以在页面的 JavaScript 中使用存储的（自定义）数据来创建更具吸引力的用户体验（无需任何 Ajax 调用或服务器端数据库查询）。
+data-* 属性由两部分组成：
注意： 以 “data-” 为前缀的自定义属性将被用户代理完全忽略。
+data-* 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +data-* | +
使用 data-\* 属性嵌入自定义数据：
<ul> + <li data-animal-type="bird">Owl</li> + <li data-animal-type="fish">Salmon</li> + <li data-animal-type="spider">Tarantula</li> +</ul> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| data-* | +4.0 | +5.5 | +2.0 | +3.1 | +9.6 | +
data 属性指定对象要使用的资源的 URL。
data 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <object> | +data | +
如何使用 <object> 元素嵌入 Flash 文件：
+<object width="400" height="400" data="helloworld.swf"></object>
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| data | +Yes | +Yes | +Yes | +Yes | +Yes | +
datetime 属性指定删除/插入文本的日期和时间。
当与 <time> 元素一起使用时，它表示 <time> 元素的日期和/或时间。
datetime 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <del> | +datetime | +
| <ins> | +datetime | +
| <time> | +datetime | +
删除的文本，带有删除文本的日期和时间：
+<p> + <del datetime="2015-11-15T22:55:03Z">此文字已被删除</del> +</p> ++ +
插入的文本，带有插入文本的日期和时间：
+<p> + 这是一个文本。 + <ins datetime="2015-09-15T22:55:03Z">这是插入的文本。</ins> +</p> ++ +
具有机器可读日期时间属性的时间元素：
+<p>我在 <time datetime="2017-02-14">情人节</time>有个约会。</p>
+
+
+ datetime 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| del | +Yes | +Yes | +Yes | +Yes | +Yes | +
| ins | +Yes | +Yes | +Yes | +Yes | +Yes | +
| time | +Yes | +Yes | +Yes | +Yes | +Yes | +
default 属性是一个布尔属性。
当存在时，它指定如果用户的偏好没有指示另一个轨道会更合适，则启用该轨道。
+注意： 每个 <media> 元素不能有多个具有 default 属性的 <track> 元素。
default 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <track> | +default | +
带有两个字幕轨道的视频。 “英文”字幕是默认的：
+<video width="320" height="240" controls>
+ <source src="forrest_gump.mp4" type="video/mp4">
+ <source src="forrest_gump.ogg" type="video/ogg">
+ <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
+ <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
+</video>
+表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| default | +18.0 | +10.0 | +31.0 | +6.0 | +15.0 | +
defer 属性是一个布尔属性。
如果存在，它指定在页面完成解析时执行脚本。
+注意： defer 属性仅适用于外部脚本（仅应在存在 src 属性时使用）。
注意： 有几种方法可以执行外部脚本：
+async 存在：脚本与页面的其余部分异步执行（脚本将在页面继续解析时执行）async 不存在且 defer 存在：脚本在页面完成解析后执行async 或 defer 都不存在：在浏览器继续解析页面之前立即获取并执行脚本The defer attribute can be used on the following element:
| 元素 Element | +属性 Attribute | +
|---|---|
| <script> | +defer | +
在页面加载之前不会运行的脚本：
+<script src="demo_defer.js" defer></script>
+表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| defer | +Yes | +10.0 | +3.6 | +Yes | +15.0 | +
dir 属性指定元素内容的文本方向。
dir 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +dir | +
具有从右到左方向的段落：
+<p dir="rtl"> + 从右到左写这个文本！ +</p> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| dir | +Yes | +Yes | +Yes | +Yes | +Yes | +
dirname 属性启用输入字段/文本区域的文本方向的提交
dirname 属性的值始终是输入字段/文本区域的名称，后跟“.dir”。
dirname 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +dirname | +
| <textarea> | +dirname | +
将提交字段文本方向的 HTML 表单：
+<form action="/action_page.php"> + First name: <input type="text" name="fname" dirname="fname.dir"> + <input type="submit" value="Submit"> +</form> ++ +
将提交字段文本方向的 HTML 表单：
+<form action="/action_page.php"> + Text: + <textarea name="explanation" dirname="explanation.dir"></textarea> + <input type="submit" value="Submit"> +</form> ++ +
dirname 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| input | +Yes | +No | +No | +Yes | +Yes | +
| textarea | +Yes | +No | +No | +Yes | +Yes | +
disabled 属性是一个布尔属性。
当存在时，它指定元素应该被禁用。
+禁用的元素不可用。
+可以设置 disabled 属性以阻止用户使用该元素，直到满足某些其他条件（例如选择复选框等）。 然后，JavaScript 可以删除禁用的值，并使元素再次可用。
disabled 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <button> | +disabled | +
| <fieldset> | +disabled | +
| <input> | +disabled | +
| <optgroup> | +disabled | +
| <option> | +disabled | +
| <select> | +disabled | +
| <textarea> | +disabled | +
禁用的按钮：
+<button type="button" disabled>Click Me!</button>
+
+
+ 禁用一组相关的表单元素：
+<fieldset disabled> + <legend>Personalia:</legend> + Name: <input type="text"><br> + Email: <input type="text"><br> + Date of birth: <input type="text"> +</fieldset> ++ +
带有禁用输入字段的 HTML 表单：
+<form action="/action_page.php"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname" disabled><br> + <input type="submit" value="Submit"> +</form> ++ +
禁用的选项组：
+<select> + <optgroup label="German Cars" disabled> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </optgroup> +</select> ++ +
带有一个禁用选项的下拉列表：
+<select> + <option value="volvo" disabled>Volvo</option> + <option value="saab">Saab</option> + <option value="vw">VW</option> + <option value="audi">Audi</option> +</select> ++ +
禁用的下拉列表：
+<select disabled> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> +</select> ++ +
禁用的文本 textarea：
+<textarea disabled> +在 HTML Tutorial，您将学习如何制作网站。 他们提供所有 Web 开发技术的免费教程。 +</textarea> ++ +
disabled 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <button> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <fieldset> | +Yes | +❌ 不支持 | +Yes | +7.0 | +Yes | +
| <input> | +1.0 | +6.0 | +1.0 | +1.0 | +1.0 | +
| <optgroup> | +1.0 | +8.0 | +Yes | +Yes | +Yes | +
| <option> | +1.0 | +8.0 | +1.0 | +Yes | +Yes | +
| <select> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <textarea> | +Yes | +Yes | +Yes | +Yes | +Yes | +
download 属性指定当用户单击超链接时将下载目标。
仅当设置了 href 属性时才使用此属性。
+download 属性的值将是下载文件的新名称。 对允许值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。
如果省略该值，则使用原始文件名。
+The download attribute can be used on the following elements:
| 元素 Element | +属性 Attribute | +
|---|---|
| <a> | +download | +
| <area> | +download | +
单击链接时下载文件（而不是导航到文件）：
+<a href="../assets/workplace.jpg" download>下载 workplace.jpg</a>
+
+
+ 单击时将下载的带有可点击区域的图像地图：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> +<map name="workmap"> + <area shape="rect" coords="34,44,270,350" alt="Computer" href="../tags/a.html" download="Computer"> + <area shape="rect" coords="290,172,333,250" alt="Phone" href="../tags/abbr.html" download="Phone"> + <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="../tags/address.html" download="Cup of coffee"> +</map> ++ +
download 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <a> | +14.0 | +13.0 | +20.0 | +❌ 不支持 | +15.0 | +
| <area> | +14.0 | +❌ 不支持 | +20.0 | +❌ 不支持 | +15.0 | +
draggable 属性指定元素是否可拖动。
提示： 默认情况下，链接和图像是可拖动的。
+提示： draggable 属性常用于拖放操作。 阅读我们的 HTML 拖放教程 了解更多信息。
draggable 属性是一个全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 所有 HTML 元素 | +draggable | +
可拖动的段落：
+<p draggable="true">这是一个可拖动的段落。</p>
+
+
+ 表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| draggable | +4.0 | +9.0 | +3.5 | +6.0 | +12.0 | +
enctype 属性指定表单数据在提交到服务器时应如何编码。
注意： 只有在 method="post" 时才能使用 enctype 属性。
enctype 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +enctype | +
发送编码为“multipart/form-data”的表单数据：
+<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="submit" value="Submit"> +</form> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| enctype | +Yes | +Yes | +Yes | +Yes | +Yes | +
当与 <label> 元素一起使用时，for 属性指定标签绑定到哪个表单元素。
当与 <output> 元素一起使用时，for 属性指定计算结果与计算中使用的元素之间的关系。
for 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <label> | +for | +
| <output> | +for | +
三个带标签的单选按钮：
+<form action="/action_page.php"> + <input type="radio" id="html" name="fav_language" value="HTML"> + <label for="html">HTML</label><br> + <input type="radio" id="css" name="fav_language" value="CSS"> + <label for="css">CSS</label><br> + <input type="radio" id="javascript" name="fav_language" value="JavaScript"> + <label for="javascript">JavaScript</label><br><br> + <input type="submit" value="Submit"> +</form> ++ +
执行计算并在 <output> 元素中显示结果：
+<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 + <input type="range" id="a" value="50">100 + +<input type="number" id="b" value="50"> + =<output name="x" for="a b"></output> +</form> ++ +
for 属性对每个元素都有以下浏览器支持：
| Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| label | +Yes | +Yes | +Yes | +Yes | +Yes | +
| output | +10.0 | +❌ 不支持 | +4.0 | +5.1 | +11.0 | +
form 属性指定元素所属的形式。
此属性的值必须等于同一文档中 <form> 元素的 id 属性。
form 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <button> | +form | +
| <fieldset> | +form | +
| <input> | +form | +
| <label> | +form | +
| <meter> | +form | +
| <object> | +form | +
| <output> | +form | +
| <select> | +form | +
| <textarea> | +form | +
位于表单外部的按钮（但仍然是表单的一部分）：
+<form action="/action_page.php" method="get" id="form1"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> +</form> + +<button type="submit" form="form1" value="Submit">Submit</button> ++ +
位于表单外部的 <fieldset> 元素（但仍然是表单的一部分）：
+<form action="/action_page.php" method="get" id="form1"> + 什么是你最喜欢的颜色？ <input type="text" name="fav_color"><br> + <input type="submit"> +</form> + +<fieldset form="form1"> + Name: <input type="text" name="username"><br> + Email: <input type="text" name="usermail"><br> +</fieldset> ++ +
位于 HTML 表单之外的输入字段（但仍然是表单的一部分）：
+<form action="/action_page.php" id="form1"> + First name: <input type="text" name="fname"><br> + <input type="submit" value="Submit"> +</form> + +Last name: <input type="text" name="lname" form="form1"> ++ +
位于表单外部的 <label> 元素（但仍然是表单的一部分）：
+<form action="/action_page.php" id="form1"> + <input type="radio" id="html" name="fav_language" value="HTML"><br> + <input type="radio" id="css" name="fav_language" value="CSS"> + <label for="css">CSS</label><br> + <input type="radio" id="javascript" name="fav_language" value="JavaScript"> + <label for="javascript">JavaScript</label><br><br> + <input type="submit" value="Submit"> +</form> + +<label for="html">HTML</label> ++ +
位于表单外部的 <meter> 元素（但仍然是表单的一部分）：
+<form action="/action_page.php" method="get" id="form1"> + First name: <input type="text" name="fname"><br> + <input type="submit" value="Submit"> +</form> + +<meter form="form1" name="x1" min="0" low="40" high="90" max="100" value="95"></meter> ++ +
位于表单外部的 <object> 元素（但仍然是表单的一部分）：
+<form action="/action_page.php" id="form1"> + First name: <input type="text" name="fname"><br> + <input type="submit" value="Submit"> +</form> + +<object data="helloworld.swf" height="400" width="400" form="form1" name="obj1"></object> ++ +
位于表单外部的 <output> 元素（但仍然是表单的一部分）：
+<form action="/action_page.php" id="numform" +oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 + <input type="range" id="a" name="a" value="50">100 + +<input type="number" id="b" name="b" value="50"> + <br><br> + <input type="submit"> +</form> + +<output form="numform" name="x" for="a b"></output> ++ +
位于表单外部的下拉列表（但仍然是表单的一部分）：
+<form action="/action_page.php" id="carform"> + Firstname:<input type="text" name="fname"> + <input type="submit"> +</form> + +<select name="carlist" form="carform"> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + <option value="opel">Opel</option> + <option value="audi">Audi</option> +</select> ++ +
位于表单外部的文本区域（但仍然是表单的一部分）：
+<form action="/action_page.php" id="usrform"> + Name: <input type="text" name="usrname"> + <input type="submit"> +</form> + +<textarea name="comment" form="usrform">Enter text here...</textarea> ++ +
form 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| button | +10.0 | +❌ 不支持 | +4.0 | +5.1 | +9.5 | +
| fieldset | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| input | +9.0 | +❌ 不支持 | +4.0 | +5.1 | +10.6 | +
| label | +Yes | +Yes | +Yes | +Yes | +Yes | +
| meter | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| object | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| output | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
| select | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
| textarea | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
formaction 属性指定提交表单时将表单数据发送到何处。 此属性覆盖表单的 action 属性。
formaction 属性仅用于具有 type="submit" 的输入/按钮。
formaction 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <button> | +formaction | +
| <input> | +formaction | +
带有两个提交按钮的表单。 第一个提交按钮将表单数据提交到“action_page.php”，第二个提交到“action_page2.php”：
+<form action="/action_page.php" method="get"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <button type="submit">Submit</button><br> + <button type="submit" formaction="/action_page2.php">Submit to another page</button> +</form> ++ +
具有两个提交按钮的 HTML 表单，具有不同的操作：
+<form action="/action_page.php"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="submit" value="Submit"><br> + <input type="submit" formaction="/action_page2.php" value="Submit to another page"> +</form> ++ +
formaction 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <button> | +9.0 | +10.0 | +4.0 | +5.1 | +10.6 | +
| <input> | +9.0 | +10.0 | +4.0 | +5.1 | +10.6 | +
指定激活/聚焦元素的快捷键。
+具有指定访问键的两个超链接：
+<a href="https://github.com/jaywcjlove/html-tutorial" accesskey="h">HTML</a><br> +<a href="https://github.com/jaywcjlove/html-tutorial" accesskey="c">CSS</a> ++ +
accesskey 属性指定激活/聚焦元素的快捷键。
accesskey 属性值必须是单个字符（字母或数字）。
警告 ⚠️
+
+ 使用 accesskeys 很困难，因为它们可能与浏览器中的其他密钥标准冲突。
+ 为了避免这个问题，大多数浏览器只有在同时按下 Alt 键时才会使用 accesskeys。
+
关注点
+使访问密钥适应所有国际语言是很困难的。 accesskey 值可能不会出现在所有键盘上。 由于这些问题，建议不要使用访问 accesskey。
| + |
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
+ 
+ |
+
|---|---|---|---|---|---|
| <accesskey> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element accesskey="character">
+| 值 Value | +描述 Description | +
|---|---|
| character | +规定激活（使元素获得焦点）元素的便捷按键。 | +
主要用于指向样式表中的类。
+在 HTML 文档中使用 class 属性：
+<html> +<head> +<style> +h1.intro { + color: blue; +} + +p.important { + color: green; +} +</style> +</head> +<body> + +<h1 class="intro">Header 1</h1> +<p>A paragraph.</p> +<p class="important">Note that this is an important paragraph. :)</p> + +</body> +</html> ++ +
class 属性为元素指定一个或多个类名。
class 属性主要用于指向样式表中的类。 但是，JavaScript 也可以使用它（通过 HTML DOM）来更改具有指定类的 HTML 元素。
| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <class> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element class="classname">
+| 值 Value | +描述 Description | +
|---|---|
| classname | +为元素指定一个或多个类名。 要指定多个类，请用空格分隔类名，例如 <span class="left important">。 这允许您为一个 HTML元素组合多个 CSS 类。命名规则： 1. 必须以字母 A-Z 或 a-z 开头 2. 后面可以跟：字母 (A-Za-z)、数字 (0-9)、连字符 ("-") 和下划线 ("_") |
+
向一个 HTML 元素添加多个类：
+<!DOCTYPE html> +<html> +<head> + <style> + h1.intro { color: blue; text-align: center; } + .important { background-color: yellow; } + </style> +</head> +<body> + +<h1 class="intro important">Header 1</h1> +<p>A paragraph.</p> + +</body> +</html> ++ +
使用 JavaScript 为第一个带有 class="example"（索引 0）的元素添加黄色(yellow)背景色。
<div class="example">Hello World!<div> +<script> +var x = document.getElementsByClassName("example"); +x[0].style.backgroundColor = "yellow"; +</script> ++ +
使用 JavaScript 将 mystyle 类添加到 id="myDIV" 的元素中：
document.getElementById("myDIV").classList.add("mystyle");
+<style>.mystyle {color: red;}</style> +<div id="myDIV">Hello World!<div> +<script> +document.getElementById("myDIV").classList.add("mystyle"); +</script> ++ +
指定元素的内容是否可编辑。
+一段可编辑的段落：
+<p contenteditable="true">这是一个可编辑的段落。</p>
+
+
+ contenteditable 属性指定元素的内容是否可编辑。
⚠️ 注意：当元素上没有设置 contenteditable 属性时，该元素将从其父元素继承它。
| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <contenteditable> | +4.0 | +6.0 | +3.5 | +3.1 | +10.1 | +
<element contenteditable="true|false">
+| 值 Value | +描述 Description | +
|---|---|
| true | +指定元素是可编辑的 | +
| false | +指定元素不可编辑 | +
用于存储页面或应用程序私有的自定义数据。
+使用 data-* 属性来嵌入自定义数据：
+<ul> + <li data-animal-type="鸟类">喜鹊</li> + <li data-animal-type="鱼类">金枪鱼</li> + <li data-animal-type="蜘蛛">蝇虎</li> +</ul> ++ +
data-* 属性用于存储页面或应用程序私有的自定义数据。
data-* 属性使我们能够在所有 HTML 元素上嵌入自定义数据属性。
然后可以在页面的 JavaScript 中使用存储的（自定义）数据来创建更具吸引力的用户体验（无需任何 Ajax 调用或服务器端数据库查询）。
+data-* 属性由两部分组成：
data- 之后至少有一个字符长⚠️ 注意：以 data- 为前缀的自定义属性将被用户代理完全忽略。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <data-*> | +4.0 | +5.5 | +2.0 | +3.1 | +9.6 | +
<element data-*="somevalue">
+| 值 Value | +描述 Description | +
|---|---|
| somevalue | +指定属性的值（作为字符串） | +
dir 属性指定元素内容的文本方向。
具有从右到左方向的段落：
+<p dir="rtl">Write this text right-to-left!</p>
+
+
+ dir 属性指定元素内容的文本方向。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <dir> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element dir="ltr|rtl|auto">
+| 值 Value | +描述 Description | +
|---|---|
| ltr | +默认。 从左到右的文本方向 | +
| rtl | +从右到左的文本方向 | +
| auto | +让浏览器根据内容判断文本方向（仅在文本方向未知时推荐） | +
属性指定元素是否可拖动。
+可拖动的段落：
+<p draggable="true">这是一个可拖动的段落</p>
+
+
+ draggable 属性指定元素是否可拖动。
+提示： 默认情况下，链接和图像是可拖动的。
+提示： draggable 属性常用于拖放操作。 阅读我们的 HTML 拖放教程以了解更多信息。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <draggable> | +4.0 | +9.0 | +3.5 | +6.0 | +12.0 | +
<element draggable="true|false|auto">
+| 值 Value | +描述 Description | +
|---|---|
| true | +指定元素是可拖动的 | +
| false | +指定元素不可拖动 | +
| auto | +使用浏览器的默认行为 | +
hidden 属性指定一个元素尚不相关或不再相关。
+隐藏段落：
+👇👇👇👇👇 下面段落被隐藏了，点击显示源码，查看实例 +<p hidden>This paragraph should be hidden.</p> ++ +
hidden 属性是一个布尔属性。
当存在时，它指定一个元素尚不相关或不再相关。
+浏览器不应显示指定了 hidden 属性的元素。
hidden 属性也可以用来防止用户看到一个元素，直到满足其他一些条件（比如选择一个复选框等）。 然后，JavaScript 可以删除 hidden 属性，并使元素可见。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <hidden> | +6.0 | +11.0 | +4.0 | +5.1 | +11.1 | +
<element hidden>
+id 属性使用 id 属性通过 JavaScript 操作文本：
<h2 id="myHeader">Hello World!</h2> +<button onclick="displayResult()">Change text</button> +<script> +function displayResult() { + document.getElementById("myHeader").innerHTML = "Have a nice day!"; +} +</script> ++ +
id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。
id 属性最常用于指向样式表中的样式，并通过 JavaScript（通过 HTML DOM）来操作具有特定 id 的元素。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <id> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element id="id">
+| 值 Value | +描述 Description | +
|---|---|
| id | +指定元素的唯一 ID。 命名规则： 1. 必须包含至少一个字符 2. 不得包含任何空格字符 |
+
lang 属性一段文本中的一些 法语 文本：
<p lang="fr">Ceci est un paragraphe.</p>
+
+
+ lang 属性指定元素内容的语言。
常见的例子是英语的 en，西班牙语的 es，法语的 fr 等等。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <lang> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element lang="language_code">
+| 值 Value | +描述 Description | +
|---|---|
| language_code | +指定元素内容的语言代码。语言代码参考 | +
spellcheck 属性是否要检查元素的拼写和语法。
+带有拼写检查的可编辑段落：
+<p contenteditable="true" spellcheck="true">这是一个段落，不检查英文单词拼写。</p> +<input spellcheck="false" placeholder="不检查英文单词拼写"> +<input spellcheck="true" placeholder="检查英文单词拼写"> ++ +
spellcheck 属性指定是否要检查元素的拼写和语法。
可以对以下内容进行拼写检查：
+<input>元素中的文本值（不是密码）<textarea> 元素中的文本表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <spellcheck> | +9.0 | +10.0 | +2.0 | +5.1 | +10.5 | +
<element spellcheck="true|false">
+| 值 Value | +描述 Description | +
|---|---|
| true | +该元素将检查其拼写和语法 | +
| false | +不检查元素 | +
style 属性是否要检查元素的拼写和语法。
+在 HTML 文档中使用 style 属性：
<h1 style="color:blue;text-align:center;">This is a header</h1> +<p style="color:green;">This is a paragraph.</p> ++ +
style 属性指定元素的内联样式。
style 属性将覆盖全局设置的任何样式，例如 <style> 标签或外部样式表中指定的样式。
style 属性可以在任何 HTML 元素上使用（它将在任何 HTML 元素上验证。但是，它不一定有用）。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <style> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element style="style_definitions">
+| 值 Value | +描述 Description | +
|---|---|
| style_definitions | +一个或多个用分号分隔的 CSS 属性和值（例如 style="color:blue;text-align:center"） |
+
tabindex 属性指定元素的 tab 键顺序（当“tab”键用于导航）
+带有指定 tab 键顺序的链接：
+<a href="hhttps://github.com/jaywcjlove/html-tutorial" tabindex="2">html-tutorial</a> +<a href="http://www.google.com/" tabindex="1">Google</a> +<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a> ++ +
tabindex 属性指定元素的 tab 键顺序（当“tab”按钮用于导航时）。
tabindex 属性可用于任何 HTML 元素（它将验证任何 HTML 元素。但是，它不一定有用）。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <tabindex> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element tabindex="number">
+| 值 Value | +描述 Description | +
|---|---|
| number | +规定元素的 tab 键控制次序（1 是第一个）。 |
+
title 属性指定有关元素的额外信息。
+在 HTML 文档中使用 title 属性：
<abbr title="People's Republic of China">PRC</abbr> was founded in 1949. +<p title="Free Web tutorials">HTML Tutorial</p> ++ +
title 属性指定有关元素的额外信息。
当鼠标移到元素上时，该信息通常显示为工具提示文本。
+title 属性可用于任何 HTML 元素（它将在任何 HTML 元素上验证。但是，它不一定有用）。
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <title> | +Yes | +Yes | +Yes | +Yes | +Yes | +
<element title="text">
+| 值 Value | +描述 Description | +
|---|---|
| text | +元素的工具提示文本 | +
translate 属性指定有关元素的额外信息。
+指定不应翻译某些元素：
+<p translate="no">不要翻译这个！</p> +<p>这可以翻译成任何语言。</p> ++ +
translate 属性指定是否应该翻译元素的内容。
+测试：点击谷歌翻译图片（在页面顶部的搜索按钮旁边）切换到另一种语言，看看下面的“冰淇淋”这个词会发生什么：
+这里我们使用 translate="no": 冰淇淋。
+表中的数字指定了完全支持该属性的第一个浏览器版本。
+| + |
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <title> | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
<element translate="yes|no">
+| 值 Value | +描述 Description | +
|---|---|
| yes | +指定应该翻译元素的内容 | +
| no | +指定元素的内容不能被翻译 | +
headers 属性指定一个或多个与表格单元格相关的标题单元格。
headers 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <td> | +headers | +
| <th> | +headers | +
<style> + table, th, td { border: 1px solid black; } +</style> +<table> + <tr> + <th>姓名</th> + <th>邮箱</th> + <th>电话</th> + </tr> + <tr> + <td>周杰伦</td> + <td>zhou@example.com</td> + <td>123-45-678</td> + </tr> +</table> ++ +
指定每个标题单元格相关的 <th> 元素：
+<style> + table, th, td { border: 1px solid black; } +</style> +<table> + <tr> + <th id="name" colspan="2">姓名</th> + </tr> + <tr> + <th headers="name">名</th> + <th headers="name">姓</th> + </tr> +</table> ++ +
headers 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <td> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <th> | +Yes | +Yes | +Yes | +Yes | +Yes | +
height 属性指定元素的高度，以像素为单位。
height 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <canvas> | +height | +
| <embed> | +height | +
| <iframe> | +height | +
| <img> | +height | +
| <input> | +height | +
| <object> | +height | +
| <video> | +height | +
一个高度和宽度为 200 像素的 <canvas> 元素：
+<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
+
+
+ 一个高度和宽度为 200 像素的 Flash 动画：
+<embed src="helloworld.swf" width="200" height="200">
+
+
+ 指定高度和宽度为 200 像素的 <iframe>：
+<iframe src="./header.html" width="200" height="200"> +</iframe> ++ +
一个高度和宽度为 42 像素的图像：
+<img src="../assets/chrome.svg" alt="Smiley face" height="42" width="42">
+
+
+ 定义一个图像作为提交按钮，具有高度和宽度属性：
+<form action="/action_page.php"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="image" src="../assets/chrome.svg" alt="Submit" width="48" height="48"> +</form> ++ +
一个高度和宽度为 400 像素的 Flash 动画:
+<object data="helloworld.swf" height="400" width="400"></object>
+具有指定高度和宽度的视频播放器：
+<video width="320" controls> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
height 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <canvas> | +4.0 | +9.0 | +2.0 | +3.1 | +9.0 | +
| <embed> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <iframe> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <img> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <input> | +1.0 | +Yes | +16.0 | +Yes | +1.0 | +
| <object> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <video> | +Yes | +Yes | +Yes | +Yes | +Yes | +
hidden 属性是一个布尔属性。
当存在时，它指定一个元素尚不相关或不再相关。
+浏览器不应显示指定了 hidden 属性的元素。
hidden 属性也可以用来阻止用户看到一个元素，直到满足其他一些条件（比如选择一个复选框等）。 然后，JavaScript 可以删除 hidden 属性，并使元素可见。
hidden 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +hidden | +
隐藏段落：
+<p hidden>这一段应该被隐藏。</p> +上面一段文本被隐藏了。 ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| hidden | +6.0 | +11.0 | +4.0 | +5.1 | +11.1 | +
high 属性指定仪表的值被认为是高值的范围。
high 属性值必须小于 max 属性值，也必须大于 low 和 min 属性值。
high 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <meter> | +high | +
具有当前值和最小、最大、高和低段的仪表：
+<meter min="0" low="40" high="90" max="100" value="65"></meter>
+
+
+ | 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| high | +8.0 | +❌ 不支持 | +6.0 | +6.0 | +11.0 | +
对于 <a> 和 <area> 元素，href 属性指定链接指向的页面的 URL。
对于 <base> 元素，href 属性指定页面上所有相对 URL 的基本 URL。
对于 <link> 元素，href 属性指定外部资源（通常是样式表文件）的位置（URL）。
href 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <a> | +href | +
| <area> | +href | +
| <base> | +href | +
| <link> | +href | +
href 属性指定 <a> 链接的目的地：
+<a href="https://github.com/jaywcjlove/html-tutorial">访问 HTML Tutorial 仓库</a>
+
+
+ 带有可点击 <area> 的图像地图：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> +<map name="workmap"> + <area shape="rect" coords="34,44,270,350" alt="Computer" href="../tags/a.html"> + <area shape="rect" coords="290,172,333,250" alt="Phone" href="../tags/abbr.html"> + <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="../tags/address.html"> +</map> ++ +
为页面上的所有相对 URL 指定一个 <base> 基本 URL：
+<head>
+ <base href="https://www.w3schools.com/images/">
+</head>
+链接 <link> 到外部样式表：
+<link rel="stylesheet" type="text/css" href="theme.css">
+href 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <a> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <area> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <base> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <link> | +Yes | +Yes | +Yes | +Yes | +Yes | +
hreflang 属性指定链接文档的语言。
注意： 此属性仅供参考。
+hreflang 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <a> | +hreflang | +
| <area> | +hreflang | +
| <link> | +hreflang | +
hreflang 属性指定链接中文档的语言：
<a target="_blank" hreflang="en" href="https://github.com/jaywcjlove">HTML Tutorial</a>
+
+
+ 带有可点击区域的图像地图：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> +<map name="workmap"> + <area hreflang="en" shape="rect" coords="34,44,270,350" alt="Computer" href="../tags/a.html"> + <area hreflang="en" shape="rect" coords="290,172,333,250" alt="Phone" href="../tags/abbr.html"> + <area hreflang="en" shape="circle" coords="337,300,44" alt="Cup of coffee" href="../tags/address.html"> +</map> ++ +
这里，hreflang 属性表示链接的文档是英文的：
+<link href="../tags/link.html" rel="parent" rev="subsection" hreflang="en">
+hreflang 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <a> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <area> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <link> | +Yes | +Yes | +Yes | +Yes | +Yes | +
http-equiv 属性为 content 属性的信息/值提供了 HTTP 标头。
http-equiv 属性可用于模拟 HTTP 响应标头。
http-equiv 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <meta> | +http-equiv | +
每 30 秒刷新一次文档：
+<head>
+ <meta http-equiv="refresh" content="30">
+</head>
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| http-equiv | +Yes | +Yes | +Yes | +Yes | +Yes | +
id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。
id 属性最常用于指向样式表中的样式，并通过 JavaScript（通过 HTML DOM）来操作具有特定 id 的元素。
id 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +id | +
使用 id 属性通过 JavaScript 操作文本：
+<html> +<body> + <h1 id="myHeader">Hello World!</h1> + <button onclick="displayResult()">Change text</button> + <script> + function displayResult() { + document.getElementById("myHeader").innerHTML = "Have a nice day!"; + } + </script> +</body> +</html> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| id | +Yes | +Yes | +Yes | +Yes | +Yes | +
ismap 属性是一个布尔属性。
当存在时，它指定图像是服务器端图像映射的一部分（图像映射是具有可点击区域的图像）。
+单击服务器端图像地图时，单击坐标将作为 URL 查询字符串发送到服务器。
+注意： 只有当 <img> 元素是具有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。
ismap 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <img> | +ismap | +
服务器端图像映射：
+<a href="/action_page.php"> + <img src="../assets/editors-001.png" alt="穿夹克的女孩t" ismap height="300"> +</a> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| ismap | +Yes | +Yes | +Yes | +Yes | +Yes | +
kind 属性指定文本轨道的类型。
kind 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <track> | +kind | +
带有两个字幕轨道的视频：
+<video width="320" controls> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> + <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> +</video> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| kind | +18.0 | +10.0 | +31.0 | +6.0 | +15.0 | +
label 属性指定文本轨道的标题。
当列出可用的文本轨道时，浏览器会使用文本轨道的标题。
+label 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <track> | +label | +
具有两个字幕轨道的视频，均具有定义的标签：
+<video width="320" controls> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> + <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> +</video> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| label | +18.0 | +10.0 | +31.0 | +6.0 | +15.0 | +
lang 属性指定元素内容的语言。
常见的例子是英语的 en，西班牙语的 es，法语的 fr 等等。
lang 属性是一个 全局属性，可用于任何 HTML 元素。
| 元素 Element | +属性 Attribute | +
|---|---|
| 全部 HTML 元素 | +lang | +
一段中的一些法语文本：
+<p lang="fr">Ceci est un paragraphe.</p>
+
+
+ | 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| lang | +Yes | +Yes | +Yes | +Yes | +Yes | +
list 属性指的是 <datalist> 元素，其中包含 <input> 元素的预定义选项。
list 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +list | +
在 <datalist> 中具有预定义值的 <input> 元素：
<input list="browsers"> + +<datalist id="browsers"> + <option value="Internet Explorer"> + <option value="Firefox"> + <option value="Google Chrome"> + <option value="Opera"> + <option value="Safari"> +</datalist> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| list | +20.0 | +10.0 | +4.0 | +❌ 不支持 | +9.6 | +
+
+
+
loop 属性是一个布尔属性。
当存在时，它指定音频将在每次完成时重新开始。
+loop 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <audio> | +loop | +
| <video> | +loop | +
一首歌曲将重新开始，每次完成时：
+<audio controls loop> + <source type="audio/ogg" src="horse.ogg"> + <source type="audio/mpeg" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"> + 您的浏览器不支持音频元素。 +</audio> ++ +
每次完成后都会重新开始的视频：
+<video width="320" controls loop> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
loop 属性对每个元素都有以下浏览器支持：
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <audio> loop | +4.0 | +9.0 | +3.5 | +4.0 | +10.5 | +
| <video> loop | +4.0 | +9.0 | +11.0 | +4.0 | +10.5 | +
low 属性指定仪表的值被认为是低值的范围。
low 属性值必须大于 min 属性值，也必须小于 high 和 max 属性值。
low 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <meter> | +low | +
具有当前值和最小、最大、高和低段的仪表：
+<meter min="0" low="40" high="90" max="100" value="95"></meter>
+
+
+ 表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| low | +8.0 | +❌ 不支持 | +6.0 | +6.0 | +11.0 | +
max 属性指定元素的最大值。
当被 <progress> 元素使用时，max 属性指定任务总共需要多少工作。
max 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +max | +
| <meter> | +max | +
| <progress> | +max | +
使用 min 和 max 属性：
+<form action="/action_page.php"> + Enter a date before 1980-01-01: + <input type="date" name="bday" max="1979-12-31"><br/> + Enter a date after 2000-01-01: + <input type="date" name="bday" min="2000-01-02"><br/> + Quantity (between 1 and 5): + <input type="number" name="quantity" min="1" max="5"><br/> + <input type="submit"> +</form> ++ +
具有当前值和最小min、最大、高和低段的仪表：
+<meter min="0" low="40" high="90" max="100" value="95"></meter>
+
+
+ 正在下载：
+<progress value="22" max="100"></progress>
+
+
+ max 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <input> | +5.0 | +10.0 | +16.0 | +5.1 | +10.6 | +
| <meter> | +8.0 | +❌ 不支持 | +6.0 | +6.0 | +11.0 | +
| <progress> | +8.0 | +10.0 | +16.0 | +6.0 | +11.0 | +
maxlength 属性指定元素中允许的最大字符数。
maxlength 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +maxlength | +
| <textarea> | +maxlength | +
最大长度为 10 个字符的 <input> 元素：
+<form action="/action_page.php"> + Username: <input type="text" name="usrname" maxlength="10"><br> + <input type="submit" value="Submit"> +</form> ++ +
最大长度为 50 个字符的文本区域：
+<textarea maxlength="50"> +在这里输入文本... +</textarea> ++ +
maxlength 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <input> | +1.0 | +2.0 | +1.0 | +1.0 | +1.0 | +
| <textarea> | +Yes | +10.0 | +4.0 | +Yes | +15.0 | +
media 属性指定链接文档针对什么媒体/设备进行优化。
此属性用于指定目标 URL 是为特殊设备（如 iPhone）、语音或印刷媒体设计的。
+该属性可以接受多个值。
+media 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <a> | +media | +
| <area> | +media | +
| <link> | +media | +
| <source> | +media | +
| <style> | +media | +
带有媒体属性的链接：
+<a href="../tags/a_media.html?output=print" +media="print and (resolution:300dpi)"> +打开媒体属性页面进行打印。</a> ++ +
带有可点击区域的图像地图：
+<img src="https://user-images.githubusercontent.com/1680273/165700877-949e520a-c085-40ce-abd4-2996da31f33b.png" width="145" height="126" alt="Planets" +usemap="#planetmap"> + +<map name="planetmap"> + <area shape="rect" coords="0,0,82,126" + media="screen and (min-color-index:256)" href="../tags/a.html" alt="Sun"> + <area shape="circle" coords="90,58,3" + media="screen and (min-color-index:256)" href="../tags/address.html" alt="Mercury"> + <area shape="circle" coords="124,58,8" + media="screen and (min-color-index:256)" href="../tags/applet.html" alt="Venus"> +</map> ++ +
两种不同媒体类型（屏幕和印刷）的两种不同样式表：
+<head>
+ <link rel="stylesheet" type="text/css" href="theme.css">
+ <link rel="stylesheet" type="text/css" href="print.css" media="print">
+</head>
+媒体属性的使用：
+<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
+指定用于打印的样式：
+<style media="print">
+ h1 { color:#000000; }
+ p { color:#000000; }
+ body { background-color:#FFFFFF; }
+</style>
+media 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <a> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <area> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <link> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <source> | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| <style> | +Yes | +Yes | +Yes | +Yes | +Yes | +
method 属性指定如何发送表单数据（表单数据被发送到 action 属性中指定的页面）。
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP 发布事务（使用 method="post"）发送。
关于 GET 的注意事项：
+关于 POST 的注意事项：
+method 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +method | +
使用“get”方法提交表单：
+<form action="/action_page.php" method="get"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="submit" value="Submit"> +</form> ++ +
| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| method | +Yes | +Yes | +Yes | +Yes | +Yes | +
min 属性指定元素元素的最小值。
当与 <meter> 元素一起使用时，min 属性指定仪表的下限。
min 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +min | +
| <meter> | +min | +
<form action="/action_page.php"> + Enter a date before 1980-01-01: + <input type="date" name="bday" max="1979-12-31"><br> + Enter a date after 2000-01-01: + <input type="date" name="bday" min="2000-01-02"><br> + Quantity (between 1 and 5): + <input type="number" name="quantity" min="1" max="5"><br> + + <input type="submit"> + +</form> ++ +
<meter min="0" low="40" high="90" max="100" value="95"></meter>
+
+
+ min 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| input | +5.0 | +10.0 | +16.0 | +5.1 | +10.6 | +
| meter | +5.0 | +10.0 | +16.0 | +5.1 | +10.6 | +
multiple 属性是一个布尔属性。
当存在时，它指定允许用户输入/选择多个值。
+multiple 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <input> | +multiple | +
| <select> | +multiple | +
接受多个值的文件上传字段：
+<form action="/action_page.php"> + Select images: <input type="file" name="img" multiple><br> + <input type="submit"> +</form> ++ +
允许多项选择的下拉列表：
+<select multiple> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + <option value="opel">Opel</option> + <option value="audi">Audi</option> +</select> ++ +
multiple 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <input> | +6.0 | +10.0 | +3.6 | +5.0 | +11.0 | +
| <select> | +Yes | +Yes | +Yes | +Yes | +Yes | +
muted 属性是一个布尔属性。
当存在时，它指定视频的音频输出应该被静音。
+muted 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <video> | +muted | +
静音视频：
+<video width="320" controls muted> + <source + type="video/mp4" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <source + type="video/webm" + src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| muted | +4.0 | +10.0 | +11.0 | +7.1 | +10.5 | +
name 属性指定 HTML 元素的名称。
这个 name 属性可用于引用 JavaScript 中的元素。
对于 <form> 元素，name 属性在提交数据时用作参考。
对于 <iframe> 元素，name 属性可用于定位表单提交。
对于 <map> 元素，name 属性与 <img> 的usemap 属性相关联，并在图像和地图之间创建关系。
对于 <meta> 元素，name 属性指定了 content 属性的信息/值的名称。
对于 <param> 元素，name 属性与 value 属性一起使用，以指定使用 <object> 标签指定的插件的参数。
The name attribute can be used on the following elements:
| 元素 Element | +属性 Attribute | +
|---|---|
| <button> | +name | +
| <fieldset> | +name | +
| <form> | +name | +
| <iframe> | +name | +
| <input> | +name | +
| <map> | +name | +
| <meta> | +name | +
| <object> | +name | +
| <output> | +name | +
| <param> | +name | +
| <select> | +name | +
| <textarea> | +name | +
两个具有相同名称的按钮，在单击时提交不同的值：
+<form action="/action_page.php" method="get"> + Choose your favorite subject: + <button name="subject" type="submit" value="HTML">HTML</button> + <button name="subject" type="submit" value="CSS">CSS</button> +</form> ++ +
具有 name 属性的 <fieldset>：
+<fieldset name="personalia"> + Name: <input type="text"><br> + Email: <input type="text"><br> +</fieldset> ++ +
具有 name 属性的 HTML 表单：
+<form action="/action_page.php" method="get" name="myForm"> + First name: <input type="text" name="fname"><br> + Last name: <input type="text" name="lname"><br> + <input type="button" onclick="formSubmit()" value="Send form data!"> +</form> ++ +
用作链接目标的 <iframe>：
+<iframe src="./max.html" name="iframe_a"></iframe> +<br/> +<a href="../tags/iframe.html" target="iframe_a">点击在 iframe 中打开</a> ++ +
具有三个输入字段的 HTML 表单； 两个文本字段和一个提交按钮：
+<form action="/action_page.php"> + Name: <input type="text" name="fullname"><br> + Email: <input type="text" name="email"><br> + <input type="submit" value="Submit"> +</form> ++ +
带有可点击区域的图像 <map>：
+<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> + +<map name="workmap"> + <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> + <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> + <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> +</map> ++ +
使用 name 属性来定义 HTML 文档的描述、关键字和作者：
+<head>
+ <meta name="description" content="Free Web tutorials">
+ <meta name="keywords" content="HTML,CSS,JavaScript">
+ <meta name="author" content="Hege Refsnes">
+</head>
+具有 name 属性的 <object> 元素：
+<object + data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" + height="200" + name="obj1"> +</object> ++ +
执行计算并在 <output> 元素中显示结果：
+<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 + <input type="range" id="a" value="50">100 + +<input type="number" id="b" value="50"> + =<output name="x" for="a b"></output> +</form> ++ +
将“autoplay”参数设置为“true”，这样声音就会在页面加载后立即开始播放：
+<object data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"> + <param name="autoplay" value="true"> +</object> ++ +
带有名称属性的下拉列表：
+<select name="cars"> + <option value="volvo">Volvo</option> + <option value="saab">Saab</option> + <option value="opel">Opel</option> + <option value="audi">Audi</option> +</select> ++ +
具有名称属性的文本区域：
+<form action="/action_page.php"> + <textarea name="comment">在这里输入文本...</textarea> + <input type="submit"> +</form> ++ +
multiple 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| button | +Yes | +Yes | +Yes | +Yes | +Yes | +
| fieldset | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
| form | +Yes | +Yes | +Yes | +Yes | +Yes | +
| iframe | +Yes | +Yes | +Yes | +Yes | +Yes | +
| input | +1.0 | +2.0 | +1.0 | +1.0 | +1.0 | +
| map | +Yes | +Yes | +Yes | +Yes | +Yes | +
| meta | +Yes | +Yes | +Yes | +Yes | +Yes | +
| object | +Yes | +Yes | +Yes | +Yes | +Yes | +
| output | +10.0 | +❌ 不支持 | +4.0 | +5.1 | +11.0 | +
| param | +Yes | +Yes | +Yes | +Yes | +Yes | +
| select | +Yes | +Yes | +Yes | +Yes | +Yes | +
| textarea | +Yes | +Yes | +Yes | +Yes | +Yes | +
novalidate 属性是一个布尔属性。
当存在时，它指定表单数据（输入）在提交时不应该被验证。
+novalidate 属性可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <form> | +novalidate | +
指示表单在提交时不被验证：
+<form action="/action_page.php" novalidate> + E-mail: <input type="email" name="user_email"> + <input type="submit"> +</form> ++ +
表中的数字指定了完全支持该属性的第一个浏览器版本。
+| 属性 Attribute | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| novalidate | +10.0 | +10.0 | +4.0 | +❌ 不支持 | +10.6 | +
onabort 属性定义了在媒体文件加载中止时要运行的脚本。
此事件在媒体数据下载被中止时发生，而不是因为错误。
+onabort 属性是 Event Attributes 的一部分，可用于以下元素：
| 元素 Element | +属性 Attribute | +
|---|---|
| <audio> | +onabort | +
| <embed> | +onabort | +
| <img> | +onabort | +
| <object> | +onabort | +
| <video> | +onabort | +
警告视频的加载已中止：
+<video id="myVideo" onabort="alert('Video load aborted')">
+onabort 属性对每个元素都有以下浏览器支持：
| 元素 Element | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| <audio> | +Yes | +9.0 | +Yes | +Yes | +Yes | +
| <embed> | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
| <img> | +Yes | +Yes | +Yes | +Yes | +Yes | +
| <object> | +Yes | +❌ 不支持 | +Yes | +Yes | +Yes | +
| <video> | +Yes | +9.0 | +Yes | +Yes | +Yes | +
注意： Windows 7 上的 Internet Explorer 11 不支持音频/视频的中止事件。
+ + +当页面开始打印或打印对话框已关闭时执行 JavaScript：
+<body onafterprint="myFunction()"> +尝试打印此文档<br> +提示：键盘快捷键，例如 Ctrl+P 设置要打印的页面。<br> +注意： Safari 和 Opera 不支持 onafterprint 事件。<br> +注意：在 IE 中，onafterprint 事件发生在打印对话框之前，而不是之后。 +<script> +function myFunction() { + alert("This document is now being printed"); +} +</script> +</body> ++ +
onafterprint 属性在页面开始打印或打印对话框已关闭时触发。
提示： onafterprint 属性通常与 onbeforeprint 属性一起使用。
+| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onafterprint | +63 | +Yes | +Yes | +❌ 不支持 | +❌ 不支持 | +
注意： 在 IE/Edge 中，onafterprint 属性出现在打印对话框之前，而不是之后。
+<element onafterprint="script">
+| 值 Value | +描述 Description | +
|---|---|
| script | +要在 onafterprint 上运行的脚本 | +
| 支持的HTML标签: | +<body> | +
|---|
onbeforeprint 属性在页面即将被打印时触发（在打印对话框出现之前）。
提示： onbeforeprint 属性通常与 onafterprint 属性一起使用。
onbeforeprint 属性是 事件属性 的一部分，可用于以下元素：
| 元素 | +事件 | +
|---|---|
| <body> | +onbeforeprint | +
在即将打印页面时执行 JavaScript：
+<body onbeforeprint="myFunction()"> + +<h1>尝试打印此文档</h1> +<p><b>提示:</b> 键盘快捷键，例如 Ctrl+P/Command+P 设置要打印的页面。</p> +<p><b>注意:</b> Safari 和 Opera 不支持 onbeforeprint 事件。</p> + +<script> +function myFunction() { + alert("You are about to print this document!"); +} +</script> +</body> ++ +
表中的数字指定了完全支持该事件的第一个浏览器版本。
+| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onbeforeprint | +63 | +Yes | +Yes | +❌ 不支持 | +❌ 不支持 | +
onbeforeunload 事件在文档即将被卸载时触发。
此事件允许您在确认对话框中显示一条消息，以通知用户他/她是要留下还是离开当前页面。
+确认框中显示的默认消息在不同的浏览器中有所不同。 但是，标准消息类似于“您确定要离开此页面吗？”。 您无法删除此消息。
+但是，您可以将自定义消息与默认消息一起编写。 请参阅此页面上的第一个示例。
+注意： 在 Firefox 中，只会显示默认消息（不是自定义消息（如果有））。
+onbeforeunload 属性是 Event Attributes 的一部分，可用于以下元素：
| 元素 | +事件 | +
|---|---|
| <body> | +onbeforeunload | +
当页面即将被卸载时执行 JavaScript：
+<body onbeforeunload="return myFunction()"> +<p>关闭此窗口，按 F5 或单击下面的链接以调用 onbeforeunload 事件。</p> + +<a href="https://jaywcjlove.github.io/html-tutorial">单击此处访问 https://jaywcjlove.github.io/html-tutorial</a> + +<script> + function myFunction() { + return "在这里写一些聪明的东西......"; + } +</script> +</body> ++ +
表中的数字指定了完全支持该事件的第一个浏览器版本。
+| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onbeforeunload | +Yes | +Yes | +Yes | +Yes | +15.0 | +
onblur 属性会在元素失去焦点时触发。
Onblur 最常与表单验证代码一起使用（例如，当用户离开表单字段时）。
+提示： onblur 属性与 onfocus 属性相反。
onblur 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +onblur | +
当用户离开时验证输入字段：
+输入你的名字： <input type="text" name="fname" id="fname" onblur="myFunction()"> +<p>当您离开输入字段时，会触发一个函数，将输入文本转换为大写。</p> + +<script> + function myFunction() { + var x = document.getElementById("fname"); + x.value = x.value.toUpperCase(); + } +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onblur | +Yes | +Yes | +Yes | +Yes | +Yes | +
oncanplay 属性定义了在浏览器可以开始播放指定媒体时运行的脚本（当它已经缓冲到足以开始播放时）。
oncanplay 属性是 事件属性 的一部分，可用于以下元素：
| 元素 | +事件 | +
|---|---|
| <audio> | +canplay | +
| <embed> | +canplay | +
| <object> | +canplay | +
| <video> | +canplay | +
当音频准备好开始播放时运行 myFunction：
<audio oncanplay="myFunction()">
+<script> + function myFunction() { + alert("可以开始播放音频"); + } +</script> +<audio controls oncanplay="myFunction()"> + <source type="audio/ogg" src="horse.ogg"> + <source src="../assets/horse.ogg" type="audio/ogg"> + <source src="../assets/horse.mp3" type="audio/mpeg"> + 您的浏览器不支持音频标签。 +</audio> ++ +
当视频准备好开始播放时运行 myFunction：
<video oncanplay="myFunction()">
+<script> + function myFunction() { + alert("可以开始播放视频了"); + } +</script> +<video width="320" controls oncanplay="myFunction()"> + <source type="video/mp4" src="../assets/mov_bbb.mp4"> + <source type="video/ogm" src="../assets/mov_bbb.ogm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
oncanplay 属性对每个元素都有以下浏览器支持：
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| audio | +Yes | +9.0 | +Yes | +Yes | +Yes | +
| embed | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| object | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +❌ 不支持 | +
| video | +Yes | +9.0 | +Yes | +Yes | +Yes | +
oncanplaythrough 事件发生在浏览器估计它可以播放指定的 audio/video 而无需停止缓冲时。
oncanplaythrough 属性是 事件属性 的一部分，可用于以下元素：
| 元素 | +事件 | +
|---|---|
| <audio> | +canplaythrough | +
| <video> | +canplaythrough | +
当音频准备好开始播放时运行 myFunction：
<audio oncanplaythrough="myFunction()">
+<script> + function myFunction() { + alert("可以开始播放音频"); + } +</script> +<audio controls oncanplaythrough="myFunction()"> + <source type="audio/ogg" src="horse.ogg"> + <source src="../assets/horse.ogg" type="audio/ogg"> + <source src="../assets/horse.mp3" type="audio/mpeg"> + 您的浏览器不支持音频标签。 +</audio> ++ +
当视频准备好开始播放时运行 myFunction：
<video oncanplaythrough="myFunction()">
+<script> + function myFunction() { + alert("可以开始播放视频了"); + } +</script> +<video width="320" controls oncanplaythrough="myFunction()"> + <source type="video/mp4" src="../assets/mov_bbb.mp4"> + <source type="video/ogm" src="../assets/mov_bbb.ogm"> + 您的浏览器不支持 video 标签。 +</video> ++ +
oncanplaythrough 属性对每个元素都有以下浏览器支持：
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| audio | +Yes | +9.0 | +Yes | +Yes | +Yes | +
| video | +Yes | +9.0 | +Yes | +Yes | +Yes | +
onchange 属性会在元素的值发生更改时触发。
提示： 此事件类似于 oninput 事件。 不同之处在于，oninput 事件会在元素的值发生更改后立即发生，而 onchange 会在元素失去焦点时发生。 另一个区别是 onchange 事件也适用于 <select> 元素。
onchange 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +onchange | +
当用户更改 <select> 元素的选定选项时执行 JavaScript：
+<select onchange="myFunction()">
+<select id="mySelect" onchange="myFunction()"> + <option value="Audi">Audi + <option value="BMW">BMW + <option value="Mercedes">Mercedes + <option value="Volvo">Volvo +</select> +<p> + 当您选择一辆新车时，会触发一个函数，该函数会输出所选汽车的值。 +</p> +<p id="demo"></p> +<script> +function myFunction() { + var x = document.getElementById("mySelect").value; + document.getElementById("demo").innerHTML = "You selected: " + x; +} +</script> ++ +
当用户更改输入字段的内容时执行 JavaScript：
+<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">
+<p> + 修改输入字段中的文本，然后在字段外单击以触发 onchange 事件。 +</p> +输入一些文字：<input type="text" name="txt" value="Hello" onchange="myFunction(this.value)"> +<p id="demo"></p> +<script> +function myFunction(val) { + console.log('~~~') + document.getElementById("demo").innerHTML = "输入值已更改。 新值是：" + val; +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onchange | +Yes | +Yes | +Yes | +Yes | +Yes | +
onclick 属性在鼠标点击元素时触发。
onclick 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +onclick | +
单击按钮时执行 JavaScript：
+<button onclick="myFunction()">点击我</button>
+<button onclick="myFunction()">点击我</button> + +<p id="demo"></p> + +<p>单击按钮时会触发一个函数。 该函数在 id="demo" 的 p 元素中输出一些文本。</p> + +<script> +function myFunction() { + document.getElementById("demo").innerHTML = "Hello World"; +} +</script> ++ +
单击 <p> 元素将其文本颜色更改为红色：
+<p id="demo" onclick="myFunction()">单击我以更改我的文本颜色。</p> + +<script> +function myFunction() { + document.getElementById("demo").style.color = "red"; +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| onclick | +Yes | +Yes | +Yes | +Yes | +Yes | +
oncontextmenu 属性在用户右键单击元素以打开上下文菜单时触发。
注意： 虽然所有浏览器都支持 oncontextmenu 事件，但目前只有 Firefox 支持 contextmenu 属性。
oncontextmenu 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +oncontextmenu | +
触发上下文菜单时执行 JavaScript：
+<div oncontextmenu="myFunction()" contextmenu="mymenu">
+<style> + div { + background: yellow; + border: 1px solid black; + padding: 10px; + } +</style> +<div oncontextmenu="myFunction()" contextmenu="mymenu"> +<p>在此框内右键单击以查看上下文菜单！</p> + +<menu type="context" id="mymenu"> + <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem> + <menu label="Share on..."> + <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> + <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> + </menu> + <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> +</menu> + +</div> + +<p><strong>注意：</strong> contextmenu <strong>属性</strong>仅适用于 Firefox！ </p> + +<script> +function myFunction() { + alert("You right-clicked inside the div!"); +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| oncontextmenu | +Yes | +Yes | +Yes | +Yes | +Yes | +
oncopy 属性在用户复制元素内容时触发。
提示： 当用户复制使用 <img> 元素创建的元素（例如图像）时，也会触发 oncopy 属性。
提示： oncopy 属性主要用于具有 type="text" 的 <input> 元素。
提示： 复制元素/元素内容的三种方式：
+oncopy 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +oncopy | +
在复制 <input> 元素的某些文本时执行 JavaScript：
+<input type="text" oncopy="myFunction()" value="尝试复制此文本">
+<input type="text" oncopy="myFunction()" value="尝试复制此文本"> + +<p id="demo"></p> + +<script> +function myFunction() { + document.getElementById("demo").innerHTML = "你复制了文字！" +} +</script> ++ +
在复制 <p> 元素的某些文本时执行 JavaScript：
+<p oncopy="myFunction()">尝试复制此文本</p>
+<p oncopy="myFunction()">尝试复制此文本</p> + +<script> +function myFunction() { + alert("你复制了文字！"); +} +</script> ++ +
复制图像时执行 JavaScript：
+<img src="xxx.gif" oncopy="myFunction()">
+<p>尝试复制下面的图像（右键单击图像并选择“复制图像”）。</p> + +<img src="../assets/editors-001.png" oncopy="myFunction()" alt="editors image" height="150"> + +<p><strong>笔记：</strong> 此示例在某些浏览器中可能无法按预期工作。</p> + +<script> +function myFunction() { + alert("你复制了图片！"); +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| oncopy | +Yes | +Yes | +Yes | +Yes | +Yes | +
注意： 在尝试复制图像时，oncopy 属性在某些浏览器中可能无法正常工作（参见上面的示例）。
+ + +oncuechange 属性定义了在 <track> 元素中提示更改时运行的脚本。
oncuechange 属性是 事件属性 的一部分，可用于以下元素：
| 元素 | +事件 | +
|---|---|
| <track> | +oncuechange | +
oncuechange 属性具有以下浏览器支持：
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| track | +Yes | +Yes | +❌ | +Yes | +Yes | +
oncut 属性在用户剪切元素内容时触发。
注意： 虽然所有 HTML 元素都支持 oncut 属性，但实际上不可能剪切例如 <p> 元素的内容，除非该元素设置了 contenteditable 属性为“true”（参见下面的“更多示例”）。
提示： 剪切元素内容的三种方式：
+oncut 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +oncut | +
在 <input> 元素中剪切一些文本时执行 JavaScript：
+<input type="text" oncut="myFunction()" value="尝试剪切此文本">
+<input type="text" oncut="myFunction()" value="尝试剪切此文本"> + +<p id="demo"></p> + +<script> +function myFunction() { + document.getElementById("demo").innerHTML = "你剪了文字！"; +} +</script> ++ +
在剪切 <p> 元素的某些文本时执行 JavaScript（注意 contenteditable 设置为 true）：
<p contenteditable="true" oncut="myFunction()">尝试剪切此文本</p>
+<p contenteditable="true" oncut="myFunction()">尝试剪切此文本</p> + +<script> +function myFunction() { + alert("你剪了文字！"); +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| oncut | +Yes | +Yes | +Yes | +Yes | +Yes | +
ondblclick 属性在鼠标双击元素时触发。
ondblclick 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +ondblclick | +
双击按钮时执行 JavaScript：
+<button ondblclick="myFunction()">双击我</button>
+<button ondblclick="myFunction()">双击我</button> + +<p id="demo"></p> + +<p>双击按钮时触发一个函数。 该函数在 id="demo" 的 p 元素中输出一些文本。</p> + +<script> +function myFunction() { + document.getElementById("demo").innerHTML = "Hello World"; +} +</script> ++ +
双击 <p> 元素将其文本颜色更改为红色：
+<p id="demo" ondblclick="myFunction()">双击我以更改我的文本颜色。</p>
+
+<script>
+function myFunction() {
+ document.getElementById("demo").style.color = "red";
+}
+</script>
+<p id="demo" ondblclick="myFunction()">双击我以更改我的文本颜色。</p> + +<script> +function myFunction() { + document.getElementById("demo").style.color = "red"; +} +</script> ++ +
| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| ondblclick | +Yes | +Yes | +Yes | +Yes | +Yes | +
拖动元素或文本选择时会触发 ondrag 属性。
要了解拖放，请阅读我们关于 HTML5 拖放 的 HTML 教程。
+提示： 链接和图片默认可拖动，不需要 draggable 属性。
在拖放操作的不同阶段使用并可能发生许多事件属性：
+在可拖动目标上触发的事件（源元素）：
+ondragstart - 当用户开始拖动元素时触发ondrag - 拖动元素时触发ondragend - 当用户完成拖动元素时触发在放置目标上触发的事件：
+ondragenter - 当被拖动的元素进入放置目标时触发ondragover - 当拖动的元素在放置目标上方时触发ondragleave - 当被拖动的元素离开放置目标时触发ondrop - 当被拖动的元素放在放置目标上时触发注意： 拖动元素时，ondrag 事件每 350 毫秒触发一次。
ondrag 属性是 事件属性 的一部分，可用于任何 HTML 元素。
| 元素 | +事件 | +
|---|---|
| 所有 HTML 元素 | +ondrag | +
在拖动 <p> 元素时执行 JavaScript：
+<p draggable="true" ondrag="myFunction(event)">Drag me!\</p>
+<style> + .droptarget { + float: left; + width: 100px; + height: 35px; + margin: 15px; + padding: 10px; + border: 1px solid #aaaaaa; + } +</style> +<p>在两个矩形之间来回拖动 p 元素：</p> + +<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> + <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">拖我一把！</p> +</div> +<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div> +<p style="clear:both;" id="demo"></p> +<script> + function dragStart(event) { + event.dataTransfer.setData("Text", event.target.id); + } + + function dragging(event) { + document.getElementById("demo").innerHTML = "p 元素被拖动"; + } + + function allowDrop(event) { + event.preventDefault(); + } + + function drop(event) { + event.preventDefault(); + var data = event.dataTransfer.getData("Text"); + event.target.appendChild(document.getElementById(data)); + document.getElementById("demo").innerHTML = "p 元素被删除"; + } +</script> ++ +
表中的数字指定了第一个完全支持事件属性的浏览器版本。
+| 事件属性 | +
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
|---|---|---|---|---|---|
| ondrag | +4.0 | +9.0 | +3.5 | +6.0 | +12.0 | +
-
-```
-
-### Img 示例
-
-图片找不到，指定 `alt` 内容替代文本的图像：
-
-```html idoc:preview:iframe
-
-```
-
-### Input 示例
-
-带有代表提交按钮的图像的 HTML 表单，图片不存在显示 `alt` 内容：
-
-```html idoc:preview:iframe
-
-```
-
-## 浏览器支持
-
-`alt` 属性对每个元素都有以下浏览器支持：
-
-| 元素 Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
-| ------- | --- | --- | --- | --- | --- |
-| area | Yes | Yes | Yes | Yes | Yes |
-| img | Yes | Yes | Yes | Yes | Yes |
-| input | Yes | Yes | Yes | Yes | Yes |
-
-
-
-[1]: ../assets/chrome.svg
-[2]: ../assets/edge.svg
-[3]: ../assets/firefox.svg
-[4]: ../assets/safari.svg
-[5]: ../assets/opera.svg
\ No newline at end of file
diff --git a/docs/attribute/async.md b/docs/attribute/async.md
deleted file mode 100644
index 99db3e929..000000000
--- a/docs/attribute/async.md
+++ /dev/null
@@ -1,49 +0,0 @@
-HTML async 属性
-===
-
-## 定义和用法
-
-`async` 属性是一个布尔属性。
-
-如果存在，它指定脚本将在可用时立即异步执行。
-
-**注意：** `async` 属性仅适用于外部脚本（并且仅应在存在 `src` 属性时使用）。
-
-**注意：** 有几种方法可以执行外部脚本：
-
-* 如果 `async` 存在：脚本与页面的其余部分异步执行（脚本将在页面继续解析时执行）
-* 如果 `async` 不存在且 [`defer`](../tags/script_defer.md) 存在：脚本在页面完成解析后执行
-* 如果 `async` 或 [`defer`](../tags/script_defer.md) 都不存在：在浏览器继续解析页面之前立即获取并执行脚本
-
-## 适用于
-
-`async` 属性可用于以下元素：
-
-| 元素 Element | 属性 Attribute |
-| ----- | ----- |
-| [\
-```
-
-## 浏览器支持
-
-表中的数字指定了完全支持该属性的第一个浏览器版本。
-
-| Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
-| ------- | --- | --- | --- | --- | --- |
-| async | Yes | 10.0 | 3.6 | Yes | Yes |
-
-
-
-[1]: ../assets/chrome.svg
-[2]: ../assets/edge.svg
-[3]: ../assets/firefox.svg
-[4]: ../assets/safari.svg
-[5]: ../assets/opera.svg
\ No newline at end of file
diff --git a/docs/attribute/autocomplete.md b/docs/attribute/autocomplete.md
deleted file mode 100644
index ddd4b1736..000000000
--- a/docs/attribute/autocomplete.md
+++ /dev/null
@@ -1,65 +0,0 @@
-HTML autocomplete 属性
-===
-
-## 定义和用法
-
-`autocomplete` 属性指定表单或输入字段是否应该打开或关闭自动完成功能。
-
-自动完成允许浏览器预测值。 当用户开始输入字段时，浏览器应根据之前输入的值显示填充字段的选项。
-
-**提示：** 可以为表单设置“开启”自动完成功能，为特定输入字段设置“关闭”功能，反之亦然。
-
-**注意：** `autocomplete` 属性适用于以下 [``](../tags/input.md) 类型：[文本](../tags/input_type_text.md)、[搜索](../tags/input_type_search.md)、[url](../tags/input_type_url.md)、[电话](../tags/input_type_tel.md)、[电子邮件](../tags/input_type_email.md)、[密码](../tags/input_type_password.md)、[日期选择器](../tags/input_type_date.md)、[范围](../tags/input_type_range.md)和[颜色](../tags/input_type_color.md)。
-
-## 适用于
-
-`autocomplete` 属性可用于以下元素：
-
-| 元素 Element | 属性 Attribute |
-| ----- | ----- |
-| [\
-```
-
-### Input 示例
-
-具有自动完成功能的 HTML 表单（一个输入字段关闭）：
-
-```html idoc:preview:iframe
-
-```
-
-## 浏览器支持
-
-`autocomplete` 属性对每个元素都有以下浏览器支持：
-
-| 元素 Element | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
-| ------- | --- | --- | --- | --- | --- |
-| [form](../tags/form.md) | Yes | Yes | 4.0 | 5.2 | 15.0 |
-| [input](../tags/input.md) | 17.0 | 5.0 | 4.0 | 5.2 | 9.6 |
-
-
-[1]: ../assets/chrome.svg
-[2]: ../assets/edge.svg
-[3]: ../assets/firefox.svg
-[4]: ../assets/safari.svg
-[5]: ../assets/opera.svg
\ No newline at end of file
diff --git a/docs/attribute/autofocus.md b/docs/attribute/autofocus.md
deleted file mode 100644
index 9f368b7c8..000000000
--- a/docs/attribute/autofocus.md
+++ /dev/null
@@ -1,70 +0,0 @@
-HTML autofocus 属性
-===
-
-## 定义和用法
-
-`autofocus` 属性是一个布尔属性。
-
-当存在时，它指定元素在页面加载时应该自动获得焦点。
-
-## 适用于
-
-`autofocus` 属性可用于以下元素：
-
-| 元素 Element | 属性 Attribute |
-| ----- | ----- |
-| [\