HTML5新增属性 五种全局属性的介绍

HTML5 是 HTML 的最新版本，相比之前的版本，HTML5 引入了一些新特性，其中包括五种全局属性。下面我们将介绍这些属性及其用途。

1. id 全局属性

id 全局属性用于给 HTML 元素指定唯一标识符。它通常用于 JavaScript 操作元素、为 CSS 样式指定样式以及锚点的跳转。该属性的值必须是唯一的，不能与其他元素的 id 值重复。

  // 使用 id 属性给元素指定唯一标识符
  <div id="example">
    <p>这是一个示例</p>
  </div>

  // 用 JavaScript 获取元素
  const divEle = document.getElementById("example");

  // 给元素添加样式
  #example {
    background-color: #ccc;
  }

  // 定义锚点
  <a href="#example">跳转到示例</a>

2. class 全局属性

class 全局属性用于为 HTML 元素指定一个或多个类名。类名可以用于为元素指定样式，也可以用于在 JavaScript 中操作元素。同一个元素可以拥有多个类名，多个类名之间用空格隔开。

  // 使用 class 属性为元素指定类名
  <div class="container example">
    <p>这是一个示例</p>
  </div>

  // 用 CSS 为元素添加样式
  .container {
    width: 960px;
    margin: 0 auto;
  }

  .example {
    background-color: #ccc;
  }

  // 用 JavaScript 获取元素
  const divEle = document.querySelector(".container.example");

3. data-* 全局属性

data-* 全局属性用于在 HTML 元素中存储自定义数据。这些数据可以在 JavaScript 中使用，可以用于传递数据或配置信息。属性名称必须以 data- 开头，其中 * 可以替换为任意名称。

  // 使用 data-* 属性存储数据
  <div data-id="123" data-username="johndo">
    <p>这是一个示例</p>
  </div>

  // 用 JavaScript 获取属性值
  const divEle = document.querySelector("div");
  const id = divEle.dataset.id;
  const username = divEle.dataset.username;

4. hidden 全局属性

hidden 全局属性用于隐藏 HTML 元素，它不会影响页面的布局。设置 hidden 属性后，元素将被隐藏，它的 CSS display 属性将被设置为 none。

  // 使用 hidden 属性隐藏元素
  <div hidden>
    <p>这是一个示例</p>
  </div>

5. contenteditable 全局属性

contenteditable 全局属性用于将 HTML 元素设置为可编辑状态，它的取值可以是 true/false 或空字符串。当设置为 true 时，元素将可被编辑，用户可以在元素内部输入或粘贴文本。

  // 使用 contenteditable 属性将元素设置为可编辑状态
  <div contenteditable="true">
    这是一个可编辑的示例
  </div>

上述介绍了 HTML5 中新增的五种全局属性，它们分别是 id、class、data-*、hidden 和 contenteditable。这些属性可以帮助开发人员更加便捷地操作元素，增强交互性和可读性。当使用上述属性时，我们需要注意属性值的正确性和语义化，保证 HTML 的结构清晰易懂。