HTML5 的全局属性 hidden 和 display:none 的关系

HTML5 的 hidden 属性是一个布尔属性，可以应用于任何元素。当设置为 true 时，元素会被隐藏，但它仍然存在于文档中。它类似于 CSS 的 display: none;，但有一些重要的区别：

1. hidden 属性可以通过 JavaScript 动态地设置或移除，从而控制元素的可见性。
2. hidden 属性不会改变文档的布局，而 display: none; 会。
3. 使用 hidden 属性的元素仍然可以通过 JavaScript 进行交互，而 display: none; 的元素不会响应任何用户交互。

示例代码：

HTML:

<div id="div1" hidden>这是被隐藏的div</div>
<div id="div2">这是可见的div</div>
<button onclick="toggleVisibility()">切换可见性</button>

JavaScript:

function toggleVisibility() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');
  
  // 切换 div1 的 hidden 属性
  if (div1.hasAttribute('hidden')) {
    div1.removeAttribute('hidden');
  } else {
    div1.setAttribute('hidden', '');
  }
  
  // 切换 div2 的 display 属性
  if (div2.style.display === 'none') {
    div2.style.display = 'block';
  } else {
    div2.style.display = 'none';
  }
}

在这个例子中，点击按钮会通过 JavaScript 切换两个 div 的可见性。一个使用 hidden 属性，另一个使用 display: none; 样式。