HTML 中 div 的 class 和 id 有何作用?
HTML 中的 <div> 标签表示 HTML 文档中的分区或部分。此标签用作容器，我们可以在其中嵌入任何 HTML 元素(例如文本、图片、表格、音频、视频等)。
如果我们想要设置 <div> 元素的样式或与其交互，我们可以指定 id 或 class 属性。
注意 − 默认情况下，大多数浏览器总是在 <div> 元素前后添加换行符。
HTML id 属性
在 HTML 中，使用 id 属性(全局属性)，我们可以为任何 HTML 元素指定唯一标识符。我们不能在一个 HTML 文档中为多个元素分配相同的 id，因此，id 在整个文档中必须是唯一的。
使用此 id，我们可以使用 CSS 和 JavaScript 为该特定 HTML 元素设置样式或与其交互。
语法
以下是将 id 定义为 HTML 属性的语法 -
<p id = mypara1> Welcome to Tutorialspoint </p>
我们可以使用 (#id) 选择器在 CSS 中访问 id 属性。以下是语法 -
#mypara{
color: Red;
}
HTML class 属性
在 HTML 中，class 属性(全局属性)可用于为任何 HTML 元素指定类。我们可以将同一个类分配给多个 HTML 元素。类名区分大小写。
我们可以使用 CSS 和 JavaScript 使用特定的类名来设置或操作元素。
语法
以下是将类定义为 HTML 属性的语法 -
<h1 class = myheading1> 简单易学 </h1>
我们可以使用 (.class) 选择器在 CSS 中访问 class 属性。以下是语法 -
.myheading1{
color: yellowgreen;
}
示例
在下面的示例中，我们创建了 4 个 <div> 元素，但没有为其分配 class 和 id 属性 -
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
}
</style>
</head>
<body>
<div>
<p>Tutorialspoint</p>
</div>
<div>
<p>simply</p>
</div>
<div>
<p>easy</p>
</div>
<div>
<p>learning</p>
</div>
</body>
</html>
输出
正如我们在输出中看到的，我们有三个 <div> 元素，浏览器在 <div> 元素前后添加了一个新的换行符。
示例
在下面的示例中，我们为 HTML 文档中的每个 <div> 元素分配一个 class 属性，并使用 CSS 为其设置样式 -
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div {
border: solid 1px;
padding: 10px;
}
.mydiv1 {
background-color: lightcoral;
}
.mydiv2 {
background-color: lightgreen;
}
.mydiv3 {
background-color: lightseagreen;
}
.mydiv4 {
background-color: lightslategrey;
}
</style>
</head>
<body>
<div class="mydiv1">
<p>Tutorialspoint</p>
</div>
<div class="mydiv2">
<p>simply</p>
</div>
<div class="mydiv3">
<p>easy</p>
</div>
<div class="mydiv4">
<p>learning</p>
</div>
</body>
</html>
输出
在上面的程序中，我们使用 <style> 标签中的 class 属性对 div 元素进行了样式设置。
示例
在这里，我们利用 id 为 <div> 元素添加 CSS。
<!DOCTYPE html>
<html>
<head>
<title>DIV in HTML</title>
<style>
div{
border: solid 1px;
padding: 10px;
}
#mydiv1{
background-color: lightslategrey;
}
#mydiv2{
background-color: lightseagreen;
}
#mydiv3{
background-color: lightgreen;
}
#mydiv4{
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="mydiv1">
<p>Tutorialspoint</p>
</div>
<div id="mydiv2">
<p>simply</p>
</div>
<div id="mydiv3">
<p>easy</p>
</div>
<div id="mydiv4">
<p>learning</p>
</div>
</body>
</html>
输出
在上面的程序中，我们在 <style> 标签中使用 ID 来设置 div 元素的样式。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
