在HTML中，id和class是元素最基本的两个属性。一般情况下，id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作。

一、id属性

id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div id="content">存在即合理</div>
    <p id="content">存在即合理</p>
</body>
</html>

浏览器预览效果如下图所示。

分析：

上面这段代码是不正确的，因为在同一个页面中，是不允许出现两个相同id的元素。不过呢，在不同页面中，是可以出现两个id相同的元素。

二、class属性

class，顾名思义，就是“类”，它与C++、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div class="content">存在即合理</div>
    <p class="content">存在即合理</p>
</body>
</html>

浏览器预览效果如下图所示。

分析：

上面这段代码是正确的，因为在同一个页面中，允许出现两个相同class的元素。这样可以使得我们对具有相同class的多个元素，定义相同的CSS样式。

对于id和class，我们可以这样理解：id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字就有可能是一样的。