数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML 中的 div 类和 id 如何使用？
HTML 的<div>标签表示 HTML 文档中的一个分隔或部分。此标签用作容器，在其中我们可以嵌入任何 HTML 元素（例如文本、图像、表格、音频、视频等）。
如果我们想设置<div>元素的样式或与之交互，我们可以分配id或class属性。
注意 - 默认情况下，大多数浏览器始终在 <div> 元素前后添加一个新的换行符。
HTML id 属性
在 HTML 中，使用 id 属性（全局属性），我们可以为任何 HTML 元素指定一个唯一的标识符。我们不能在 HTML 文档中为多个元素分配相同的 id，因此，id 在整个文档中必须是唯一的。
使用此 id，我们可以使用 CSS 和 JavaScript 设置特定 HTML 元素的样式或与之交互。
语法
以下是为 HTML 属性定义 id 的语法 -
<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> Simply easy learning </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> 标签中的类为 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 元素设置了样式。
281 次浏览
