类
好处：
-
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
-
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
<head>
<style>
.ctities{
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="ctities">
<h2>ShenZhen</h2>
<p>请说出你想说的:</p>
<input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
<p>再次说出你想说的:</p>
<input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
</div>
</body>
-
HTML
<div>元素是块级元素。它能够用作其他 HTML 元素的容器。 -
设置
<div>元素的类，使我们能够为相同的<div>元素设置相同的类
id
特点：
-
HTML
id属性用于 为HTML 元素指定唯一的 id* -
一个 HTML文档中不能存在多个有相同 id 的元素。
-
id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。 -
id属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 -
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
实例：
<style>
#mydiv{
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<div id="mydiv" style="font-family: '微软雅黑';">
这是自己设定的CSS
</div>
注意：
-
id 名称对大小写敏感！
-
id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。
通过 ID 和链接实现 HTML 书签
<a href="PracticeDemoNo1.html#tips">点击跳转到另一个html的该标签元素处</a>
JavaScript使用id 属性为特定元素执行某些任务
<!--使用 getElementById() 方法访问拥有特定 id 的元素-->
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Class和id的区别
-
同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用
<div class="ctities">
<h3>LiuZhou</h3>
<p>柳州好呀!</p>
<input size="7" style="font-family: '微软雅黑'; color: red;" />
</div>
<a href="PracticeDemoNo1.html#tips">点击跳转到另一个html</a>
<div class="ctities">
<h2>ShenZhen</h2>
<p>请说出你想说的:</p>
<input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
<p>再次说出你想说的:</p>
<input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
</div>