class

class 属性用来给标签添加一个类，方便 CSS 或 JS 选中这个标签。

<!-- CSS 代码 -->
<style>
  .div1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<!-- HTML 代码 -->
<div class="div1"></div>

一个标签可以有多个类。

<!-- CSS 代码 -->
<style>
  .div1 { width: 100px; }
  .div2 { height: 200px; }
  .div3 { background-color: green; }
</style>

<!-- HTML 代码 -->
<div class="div1 div2 div3"></div>

id

id 属性是标签在网页内的唯一标识符，同一个页面不能有两个相同的 id 属性。

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

js 可以直接通过 id 属性获取到某个元素：

<!-- HTML 代码 -->
<div id="xxx"></div>

<!-- JS 代码 -->
<script>
  xxx.style.width = '100px'
  xxx.style.height = '100px'
  xxx.style.border = '1px solid red'
</script>

但不建议直接通过 id 属性获取元素，这样有可能获取不到：

<!-- HTML 代码 -->
<div id="parent"></div>

<!-- JS 代码 -->
<script>
  parent.style.width = '100px'
  parent.style.height = '100px'
  parent.style.border = '1px solid red'
</script>

以上代码，为 parent 元素设置宽、高、边框会失败。因为 parent 是 window 的属性，直接通过 id 属性获取该元素，获取到的其实是 window 的 parent 属性。

由以上可知，如果想通过 id 属性直接获取到某个元素，那么该元素的 id 属性值就不可以使用window 的属性值。因为这些是全局属性，不可能通过一个标签把它覆盖掉。

提示：在控制台输入 window.，可以知道 window 有哪些属性。

style

style 属性用来设置标签的 CSS 样式。

<div style="width: 100px; height: 100px; background-color: red;"></div>

问：同时使用 style、CSS、JS 控制一个元素的样式，哪一个会生效？

答：JS 设置的样式会生效。
点我查看示例

contenteditable

contenteditable 属性允许用户修改网页内容。

<!-- 内容可编辑 -->
<p contenteditable="true">
  段落内容段落内容段落内容
</p>

<!-- 内容不可编辑 -->
<p contenteditable="false">
  段落内容段落内容段落内容
</p>

用 contenteditable 属性做一个简易编辑器：

原理：显示 style 标签中的内容，让用户可编辑 style 标签
缺点：只能修改已有的样式，不能新增样式
点我查看示例

hidden

hidden 是布尔属性，表示当前元素是否会被浏览器渲染。

<p>你看见了我</p>
<p hidden>你看不见我</p>

CSS 的可见性设置，高于 hidden 属性。

<style>
  p {
    display: block;
  }
</style>

<p hidden>你看得见我吗？</p>

以上代码，虽然给 p 元素设置了 hidden 属性，但是由于 CSS 的设置，p 元素在页面中仍然可见。

tabindex

浏览器允许使用 Tab 键，遍历网页元素。tabindex 属性可以指定 Tab 遍历的顺序。

tabindex 的取值：

负整数：不参与 tab 的遍历，通常取值为 -1
0：最后访问
正整数：按从小到大的顺序访问

<h2 tabindex="0">第零个标题</h2>
<h2 tabindex="1">第一个标题</h2>
<h2 tabindex="5">第二个标题</h2>
<h2 tabindex="2">第三个标题</h2>
<h2 tabindex="4">第四个标题</h2>
<h2 tabindex="3">第五个标题</h2>
<h2 tabindex="-1">最后一个标题</h2>

如果网页所有元素都没有设置 tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。

title

title 属性用来为元素添加说明。当鼠标悬浮在当前元素上时，会显示 title 的属性值。

<h1 title="这是一个标题">标题</h1>

HTML系列（3）：常用的全局属性