HTML5 - 属性

HTML5 - 全局属性

HTML 属性为 HTML 元素提供了附加信息。它们始终在开始标签中指定，通常以名称/值对的形式出现，例如 name="value"。

HTML5 定义了一套全局属性，这些属性对所有 HTML 元素通用且可以使用（尽管它们可能对某些元素没有效果）。

属性名称和值通常不区分大小写，但小写是推荐的约定，以保证一致性并与更严格的格式（如 XHTML）兼容。

<!-- 示例：'id' 和 'class' 是全局属性 -->
<div id="main-content" class="container featured">
  <p>This div uses global attributes.</p>
</div>

常见全局属性

以下是一些最常用的 HTML5 全局属性：

属性	描述
accesskey	指定一个键盘快捷键（通常与 Alt、Ctrl 或其他修饰键组合，取决于浏览器/操作系统）来激活或聚焦一个元素。值通常是单个字符。
class	指定一个或多个类名，以空格分隔。主要用于 CSS 样式和 JavaScript 选择。
contenteditable	指定元素内容是否可由用户编辑。值：true 或 false。
data-*	用于存储页面或应用的自定义私有数据（自定义数据属性）。属性名称必须以 data- 开头，且不包含大写字母。适用于将数据附加到元素上供 JavaScript 使用，而无需滥用其他属性。示例：data-user-id="123"。
dir	指定元素内容的文本方向。值：ltr (从左到右)，rtl (从右到左)，auto。
draggable	指定元素是否可使用 Drag and Drop API 拖动。值：true，false，auto (默认浏览器行为)。
hidden	一个布尔属性，表示该元素尚未或不再相关。浏览器通常不会渲染带有 hidden 属性的元素（类似于 CSS display: none;）。
id	指定元素在文档中的唯一标识符。用于 CSS 靶向、JavaScript 选择和链接（URL 中的片段标识符）。
lang	指定元素内容的主要语言。使用标准语言代码（例如，en，es，fr-CA）。
spellcheck	指定元素是否应进行拼写和语法检查。值：true 或 false。适用于可编辑内容。
style	指定元素的内联 CSS 样式。通常建议使用外部样式表（<link>）或嵌入样式（<style>）以获得更好的可维护性。
tabindex	指定元素的 Tab 键顺序。值：负整数（从 Tab 顺序中移除但仍可通过脚本聚焦），0（根据源码顺序包含在 Tab 顺序中），正整数（定义明确的 Tab 顺序 - 使用时需谨慎，可能损害可访问性）。
title	指定元素的额外信息。浏览器通常在鼠标悬停在元素上时将该值显示为工具提示。
translate	指定元素的内容在页面本地化时是否应被翻译。值：yes 或 no。

已废弃的表示属性

像 align、bgcolor、background、height、width（在非替换元素如 div 上）和 valign 等属性在 HTML5 中已废弃。它们的功能应通过 CSS 实现，以更好地分离关注点。

例如，不要使用 <p align="center">，而应使用 CSS：p { text-align: center; }。

自定义数据属性 (data-*)

HTML5 正式引入了自定义数据属性，作为一种在不违反标准的情况下直接将自定义数据嵌入 HTML 元素的方式。

自定义数据属性的规则：

• 必须以前缀 data- 开头。
• 在前缀后，只能包含小写字母、数字、连字符 (-)、点 (.)、冒号 (:) 或下划线 (_)。
• 不应包含任何大写 ASCII 字母。

使用示例

<article
  id="post-42"
  class="blog-entry"
  data-post-id="42"
  data-author-username="jane_doe"
  data-tags='["html5", "webdev", "tutorial"]' >

  <h2>Understanding data-* Attributes</h2>
  <p>...</p>
</article>

<script>
  const articleElement = document.getElementById('post-42');

  // 通过 dataset 属性访问数据属性
  console.log(articleElement.dataset.postId); // 输出: "42"
  console.log(articleElement.dataset.authorUsername); // 输出: "jane_doe"

  // 在 dataset 对象中，属性名称使用 camelCase 命名法
  const tags = JSON.parse(articleElement.dataset.tags);
  console.log(tags); // 输出: ["html5", "webdev", "tutorial"]

  // 你也可以使用 getAttribute
  console.log(articleElement.getAttribute('data-post-id')); // 输出: "42"
</script>

JavaScript 通过 element.dataset 属性提供了对这些属性的轻松访问，其中属性名称，如 data-author-username，在 dataset 对象中变为 dataset.authorUsername。

有关所有全局属性的完整列表和详细说明，请参阅 MDN Web 文档：(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)