HTML 教程 / HTML类

HTML 类

class属性是HTML中最常用的属性之一，用于为元素指定一个或多个类名，实现CSS样式复用和JavaScript操作。

什么是 class 属性？

class属性用于分类HTML元素，使得相同样式的元素可以归为同一类。多个元素可以共享相同的类名，一个元素也可以拥有多个类名。

class vs id
  • class：可重复使用，一个页面可以有多个同名类
  • id：必须唯一，一个页面只能有一个同名id

基本用法

为元素添加class属性，值为类名：

<div class="container">内容</div>
<p class="important">重要段落</p>

多个类名

一个元素可以有多个类名，用空格分隔：

<p class="important note highlight">这个段落有三个类</p>

CSS 类选择器

使用 .类名 来选择所有具有该类的元素：

.highlight {
    background-color: yellow;
    padding: 10px;
}

.important {
    color: red;
    font-weight: bold;
}

多类选择器

可以同时指定多个类（没有空格表示同时具有这些类）：

.important.highlight {
    background-color: yellow;
    color: red;
}

上面选择器会选择同时具有 important 和 highlight 类的元素。

实际应用示例

下面是一个常见的网页布局示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container { max-width: 800px; margin: 0 auto; }
        .header { background: #333; color: white; padding: 20px; }
        .content { padding: 20px; }
        .card { 
            border: 1px solid #ddd; 
            padding: 15px; 
            margin: 10px 0;
            border-radius: 5px;
        }
        .btn {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            cursor: pointer;
        }
        .btn-primary { background: #3498db; }
        .btn-danger { background: #e74c3c; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header"><h1>我的网站</h1></div>
        <div class="content">
            <div class="card">
                <h2>文章标题</h2>
                <p>这是文章内容...</p>
                <button class="btn btn-primary">查看详情</button>
            </div>
            <div class="card">
                <button class="btn btn-danger">删除</button>
            </div>
        </div>
    </div>
</body>
</html>

交互式示例

在下面的代码编辑器中，尝试修改类名或CSS样式：

💻 在线代码编辑器
👁️ 预览效果

最佳实践

建议
  • 使用有意义的类名，如 .navigation、.sidebar、.article-content，而不是 .box1、.red-text
  • 类名使用小写字母和连字符（kebab-case），如 .main-content
  • 避免过度使用类，保持HTML简洁
  • 利用CSS继承，减少重复的样式定义
  • 使用BEM或其他命名规范来管理复杂项目的类名