html5指南-1.html5全局属性(html5 global attributes)深入理解

HTML5指南-1.HTML5全局属性深入理解

什么是HTML5全局属性？

HTML5全局属性是可以用于所有HTML标签的属性。这些属性具有统一的语法、功能和意义，具有很高的通用性，可以用于任何HTML元素。

属性	描述
accesskey	规定激活元素的快捷键
class	规定元素的一个或多个类名（引用样式表中的类）
contenteditable	规定元素内容是否可编辑
data-*	为存储页面或应用程序的私有数据提供自定义属性
dir	规定元素内容的文本方向
draggable	规定元素是否可拖动
hidden	规定元素是否隐藏
id	规定元素的唯一id
lang	规定元素内容的语言
role	规定元素的作用
tabindex	规定元素的tab键次序
title	规定元素相关的建议性的信息

HTML5全局属性的应用场景

1. hidden属性

hidden属性定义了一个元素是否隐藏。通常我们可以利用Javascript为页面添加交互行为，当用户点击某个按钮时，显示或隐藏特定的元素。在这种情况下，可以将目标元素隐藏，以便在用户执行相应的行动时显示出来。

<!-- 当点击按钮时显示或隐藏标题 -->
<button onclick="toggleTitle()">Toggle Title</button>
<h1 id="myTitle" hidden>This is the title</h1>

<script>
function toggleTitle() {
  var title = document.getElementById("myTitle");
  if (title.hidden == true) {
    title.hidden = false;
  } else {
    title.hidden = true;
  }
}
</script>

2. data-*属性

data-*属性是非常有用的，它们允许我们为元素添加自定义的数据属性。这些自定义属性可以用于将任意的数据附加到元素上，然后在Javascript中使用。通常我们可以将数据属性设置为元素的配置信息、状态、内部定义的数据等。

<table id="myTable" data-column="3" data-row="5">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

<script>
var table = document.getElementById("myTable");
var columnCount = table.getAttribute("data-column");
var rowCount = table.getAttribute("data-row");
// 可以用columnCount和rowCount进行其他操作
</script>

总结

HTML5全局属性提供了一种非常好的方式，使我们能够将通用的行为应用于页面中的任何元素。它们具有统一的语法、功能和意义，可以非常方便地扩展和定制HTML文档。上面的例子只是其中的几个应用场景，完整的全局属性列表和更多示例可以参考相关的文档。