谁道人生无再少，
门前流水尚能西。
桃花落尽胭脂透，
庭院无声五更鸡。
—— 杜甫《端午节》
HTML中class属性
HTML中class属性是一种用于为元素定义样式和标识的属性，以下是class属性的几种常见用法实例，包括标识元素、定义样式、分组元素和提供语义信息：
1. 标识元素
使用class属性可以为元素提供一个标识，以便于JavaScript和CSS样式表中进行引用。例如，可以将class属性设置为"header"，以标识页面中的标题。
<h1 class="header">这是一个标题</h1>
2. 定义样式
使用class属性可以将样式应用于元素。通过在CSS样式表中定义与class名匹配的样式，可以为多个元素应用相同的样式。
<style>
.heading {
font-size: 24px;
font-weight: bold;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
<h1 class="heading">这是一个标题</h1>
<p class="highlight">这是一个突出显示的文本。</p>
3. 分组元素
使用class属性可以将多个元素分组在一起。例如，可以将所有具有相同样式的元素分组在一个class中。
<style>
.box {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="box">这是一个盒子</div>
<div class="box">这是另一个盒子</div>
4. 提供语义
使用class属性可以为元素提供语义信息。例如，可以将class属性设置为"important"，以表示该元素的内容很重要。
<style>
.important {
color: red;
font-weight: bold;
}
</style>
<p class="important">这是一个非常重要的消息。</p>
常见标签
1,<p>：段落标签
<p>这是一个段落</p>效果：
这是一个段落
2,<h1>~<h6>：标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
效果：
这是一级标题
这是二级标题
这是三级标题
3,<a>：超链接标签
<a href="https://www.example.com/">这是一个超链接</a>效果：
这是一个超链接
4,<img>：图片标签
<img src="https://pics6.baidu.com/feed/fd039245d688d43f7c325738f98f8f170cf43bfb.jpeg@f_auto?token=ea6d90c809e146b9fe8712a20ea6dcc5" alt="这是一张清华园图片">
实际显示效果：
5，<ul>和<ol>：列表标签
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
效果：
- 无序列表项1
- 无序列表项2
- 有序列表项1
- 有序列表项2
6,<div>：容器标签
<div>
<h3>这是一个容器</h3>
<p>这是容器中的内容</p>
</div>效果：
这是一个容器
这是容器中的内容
7,<span>：行内标签
<span style="color: red;">这是红色字体</span>
实际显示效果：
这是红色字体
8,<form>：表单标签
<form>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名">
<label>密码：</label>
<input type="password" name="password">
<input type="submit" value="登录">
</form>
实际显示效果：
9,<input>：输入框标签
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password">
效果：
10,<label> 标签
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>效果：
11，vue中的{{}}
在前端中，{{}}通常表示模板语法中的插值表达式，用于将动态数据绑定到模板中。
{{}}是一种简单的模板语法，通常用于前端框架（如Vue.js、AngularJS、React等）中。在模板中，我们可以使用双花括号{{}}来包裹一个表达式，这个表达式会被解析并渲染到页面中。例如，下面是一个使用{{}}的Vue.js模板示例：
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
在上述代码中，{{ title }}和{{ message }}是插值表达式，它们会被Vue.js解析并替换为对应的数据。例如，如果我们有一个数据对象：
const data = {
title: 'Hello',
message: 'Welcome to my website!'
}
那么上述模板渲染后的结果将是：
<div>
<h1>Hello</h1>
<p>Welcome to my website!</p>
</div>
插值表达式可以包含任何有效的JavaScript表达式，例如变量、函数调用、运算符、条件表达式等，这使得我们可以非常灵活地控制模板的渲染。
