HTML Class Attribute
HTML Class Attribute （HTML 类属性:）
The HTML class attribute is used to specify one or more class names for an element. Commonly, the class attribute points to a class in a style sheet. The class name is case sensitive. （HTML类属性用于为元素指定一个或多个类名。通常，类属性指向样式表中的类。类名区分大小写。）
This attribute can also be used by JavaScript via the HTML DOM to make certain changes to HTML elements with a specified class name. （JavaScript还可以通过HTML DOM使用此属性对具有指定类名的HTML元素进行某些更改。）
In HTML5, you can use the class attribute for any HTML element. （在HTML5中，您可以为任何HTML元素使用class属性。）
In HTML 4.01, the class attribute cannot be used with the following elements: <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script>, and <title>.
Although there aren’t specific requirements for the name of classes, it’s better to use names describing the semantic purpose of the element, and not its presentation. The name should begin with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores (""), and hyphens ("-"). （虽然对类的名称没有具体要求，但最好使用描述元素语义目的的名称，而不是其呈现方式。名称应以字母a-z或A-Z开头，后面可以跟字母、数字（ 0-9 ）、下划线（ “” ）和连字符（ “-” ）。）
Syntax
Syntax （语法）
<tag class="classname"></tag>
Example of the HTML class attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is a some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is a some yellow paragraph.</p>
</body>
</html>
In CSS, if you want to select elements with a specific class, use a period (.) character followed by the class name. （在CSS中，如果要选择具有特定类的元素，请使用句点(.)字符，后跟类名。）
Example of the HTML class attribute used with CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>
HTML elements can also have more than one class name. Each of them must be separated by a space. （HTML元素也可以有多个类名。每个字符必须用空格分隔。）
Example of the HTML class attribute with multiple class names:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>
Different tags, such as <h2> and <p> can have the same class name and the same style.
Example of the HTML class attribute with the <h2> and <p> elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
</p>
</body>
</html>