What is the difference between id and class attributes in HTML?-HTML Tutorial-php.cn

What is the difference between id and class attributes in HTML?

青灯夜游

Release： 2019-04-15 11:23:47

Original

15033 people have browsed it

In HTML we often use the id and class attributes. They have similar functions. So what is the difference between them? The following article will briefly compare the id and class attributes in HTML and introduce the differences between the id and class attributes in HTML. I hope it will be helpful to everyone. [Video tutorial recommendation: HTML tutorial]

What is the difference between id and class attributes in HTML?

HTML id attribute

The id attribute is a unique identifier used to specify a document; therefore, id can be used to distinguish different modules within a page. CSS and JavaScript use the id attribute to perform specific tasks for unique elements. In CSS, the id attribute is written using the # symbol followed by the id.

Basic syntax:

In HTML:

<element id =“id_name”>

Copy after login

In CSS style sheet:

#id_name {
    // CSS属性
}

Copy after login

Example :

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML id 属性 </title> 
      
    <style> 
        #demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1>Hello World!</h1> 
    <p id="demo">欢迎来到PHP中文网！</p> 
    <p >php从入门到精通，一站式php自学平台！</p> 
</body> 
  
</html>

Copy after login

Output:

What is the difference between id and class attributes in HTML?

##HTML class attribute

The class attribute is used to specify one or more class names for HTML elements; the class attribute can be used for any HTML element. CSS and JavaScript can use class names to perform certain tasks for elements with specified class names. Class names in CSS stylesheets use the "." symbol.

Basic syntax:

In HTML:

<element class=“class_name”>

Copy after login

In CSS style sheet:

.class_name {
    // CSS属性
}

Copy after login

Example:

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8">
    <title> HTML class 属性 </title> 
      
    <style> 
        .demo{ 
            color:red; 
            font-size:25px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <p class="demo">Hello World!</p> 
    <p class="demo">欢迎来到PHP中文网！</p> 
</body> 
  
</html>

Copy after login

Output:

What is the difference between id and class attributes in HTML?

Description: The same class name can appear multiple times in the page, so it can be referenced repeatedly The same css reduces the workload and code amount.

Summary

The difference between id and class attributes is: id is unique and can only appear once in the page, at most. Can be applied to one element and cannot be used repeatedly. Class is universal and can appear multiple times on the page and be applied to multiple elements.

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of What is the difference between id and class attributes in HTML?. For more information, please follow other related articles on the PHP Chinese website!