初识Web前端
前端代码通过浏览器的解析与渲染转化为用户可以看到的网页。浏览器中对代码进行解析渲染的部分，称为浏览器内核。不同的浏览器，内核不同，对相同的前端代码的解析效果可能存在差异。Web标准就是用来进行统一的。Web标准提出，一个网页程序由三个部分组成：
HTML：负责网页的结构（页面元素和内容）
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）
JavaScript：负责网页的行为（交互效果）
什么是HTML
HTML（HyperText Markup Language）：超文本标记语言
超文本：超越了文本的限制。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签"<标签名>" 构成的语言。
HTML标签都是预定义好的。例如：使用<h1>展开标题，使用<img>展示图片，使用<video>展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
什么是CSS
CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式。
<h1 style="color:red;">HTML入门程序</h1>
这样就可以把HTML入门程序这几个字变成红色。
Web前端开发的相关文档：MDN Web Docs
安装插件
1.HTML CSS Support
2.JavaScript(ES6) code snippets
3.Mithril Emmet
4.Path Intellisense
5.Vue 3 Snippets
6.Auto Close Tag
7.open in browser
8.Auto Rename Tag
9.Live Server
10.Vue(Official)
11.File Utils
12.IntelliJ IDEA Keybindings
13.Trae AI:Coding Assistant
14.Lingma - Alibaba Cloud AI Coding Assistant
在编写HTML文件时，直接先输入一个感叹号再回车，VSCode就会补全所有的标签。选中文本，再Ctrl+/可以生成注释。
<!DOCTYPE html> <!--声明当前文档的类型为HTML-->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置网页在移动设备上的显示宽度与缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML快速入门</title>
</head>
<body>
<h1>HTML快速入门</h1>
<img src="img/1.png">
</body>
</html>
可以通过写注释的方式，让AI根据注释完成对应的内容。
颜色调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<!-- 有六种标题标签，从h1到h6，其中h1为最顶层标题，h6为最低层标题。 -->
<!-- 定义一个超链接，展示的内容是央视网 -->
<a href="http://www.cctv.com">央视网</a>
<!-- a 超链接标签
href 属性：超链接的网址
target 属性：超链接打开方式
_blank：在新窗口打开
_self：在当前窗口打开（默认）
如果要在新窗口打开，应该这么书写： <a href="http://www.cctv.com" target="_blank">央视网</a>
-->
2026年01月19日 08:49
</body>
</html>
注意到在原来的新闻中，发布时间是呈灰色的。这就需要CSS的样式控制了。
CSS的引入方式：
1.行内样式：写在标签的style属性中（通常配合JavaScript使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<!-- 方式一：行内样式 -->
<span style="color: gray">2026年01月19日 08:49</span>
</body>
</html>
2.内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
相当于先定义被span包裹的文字的属性，然后将需要调整样式的文字用span包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<!-- 方式二：内部样式 -->
<style>
span {
color: gray;
}
</style>
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span>2026年01月19日 08:49</span>
</body>
</html>
可以将span改为其它标签，道理是一样的，表示调整这个标签包裹的文字的属性。
3.外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
在html文件所在的目录下创建一个css文件夹，用来存放css文件，然后在里面创建一个单独的news.css文件，内容为：
span {
color: gray;
}
再在html文件中通过link标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<!-- 方式三：外部样式 -->
<link rel="stylesheet" href="css/news.css">
<!-- rel表示引入的文件类型，这里是stylesheet，表示样式文件，即css
href表示引入的文件路径，这里是css/news.css -->
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span>2026年01月19日 08:49</span>
</body>
</html>
第一种方式的复用性是最差的，因为只针对当前行生效。第三种方式的复用性是最好的，哪个HTML文件要用，直接通过link引入。第二种居中，针对当前的HTML文件生效。
颜色透明度调整
调整了颜色之后，我们发现原始的央视新闻中的灰色是非常淡的，还要调整。
颜色表示形式：
| 表示方式 | 属性值 | 说明 | 示例 |
|---|---|---|---|
| 关键字 | 颜色英文单词 | red\green\blue\gray | 上面的三个例子都使用关键字声明颜色 |
| rgb表示法 | rgb(r,g,b) | 红绿蓝三原色，取值0-255 | rgb(0,0,0)、rgb(255,0,0)（红色） |
| rgba表示法 | rgba(r,g,b,a) | 红绿蓝三原色，a表示透明度，取值：0-1 | rgba(0,0,0,0.3),rgba(255,0,0,0.5) |
| 十六进制表示法 | #rrggbb | #开头，将数字转换为十六进制表示 | #000000、#ff0000，简写：#000，#f00 |
ff=16*15+1*15=255，所以#ff0000相当于rgb(255,0,0)，都表示纯红色。
如何与新闻的颜色保持一致？可以Win+Shift+S进入截图，选择颜色选取器即可，可以选择红绿蓝表示法，也可以选择十六进制表示法。或者在网页空白处右键，点击View Page Source查看源码也可以。
span {
/* 关键字
color: gray; */
color: #b2b2b2;
}
选择器
这里我们的操作是将所有用span包裹的文字都设置为这个颜色。那么如果当前页面中有多个span标签，则所有span标签中的文字颜色都将被设置为灰色，这显然是不合理的。如何只针对发布时间设置CSS样式？可以通过CSS中的选择器来选取需要设置样式的元素（标签）。
| 选择器 | 写法 | 示例 | 示例说明 |
|---|---|---|---|
| 元素选择器 | 元素名称 {...} | h1 {...} | 选择页面上所有的<h1>标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有class属性为cls的标签 |
| id选择器 | #id属性值 {...} | #hid {...} | 选择页面上id属性为hid的标签 |
| 分组选择器 | 选择器1，选择器2 {...} | h1,h2 {...} | 选择页面上所有的<h1>和<h2>标签 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有type属性的<input>标签 |
| 属性选择器 | 元素名称[属性名=”值“] {...} | input[type="text"] {...} | 选择页面上type属性为text的<input>标签 |
| 后代选择器 | 元素1 元素2 {...} | form input {...} | 选择<form>标签内的所有<input>标签 |
前面我们写的span就是元素选择器。
类选择器：
.cls {
color: #b2b2b2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span class="cls">2026年01月19日 08:49</span>
<span>6666</span>
</body>
</html>
可以看到，只有发布时间是灰色，6666是正常的黑色。
ID选择器：
#time {
color: #b2b2b2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span id="time">2026年01月19日 08:49</span>
<span>6666</span>
</body>
</html>
可以看到，ID选择器可以唯一地定位到发布时间这个标签。
如果三类选择器都同时匹配到同一个元素，则会根据优先级显示属性。ID选择器优先级最高，类选择器次之，最后是元素选择器。
下划线
原新闻中的超链接下方是没有下划线的，现在我们要去掉下划线。由于页面只有这一个超链接，我们可以直接使用元素选择器。记不住没关系，直接写注释交给AI即可。
#time {
color: #b2b2b2;
}
/* 去除超链接的下划线 */
a {
text-decoration: none;
}
如果想要进一步了解text-decoration属性的作用，可以将光标放在它上面，点击MDN Reference就能进入我们前面给出的帮助文档中。
图片与视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<!---------------------- 新闻标题 -------------------------->
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span id="time">2026年01月19日 08:49</span>
<!-- 换两行 -->
<br><br>
<!---------------------- 新闻正文 -------------------------->
<!-- 定义一个视频，引入video/news.mp4 -->
<video src="video/news.mp4" controls width="800px"></video>
<!-- video标签属性
src: 视频文件路径
width: 视频宽度
height: 视频高度
高度与宽度的单位：px（像素）、%
百分比：相对于父元素的宽度或高度。这里的父元素是body
高度与宽度设置一个即可，另一个会自动按比例调整
controls: 显示播放控件。如果没有这个属性，视频不会显示播放控件，用户无法控制视频播放
loop: 循环播放
autoplay: 自动播放
-->
<!-- 如果是音频，使用<audio>标签，属性与video标签类似 -->
<br><br>
<!-- 使用段落标签<p>，两段之间会自动换行 -->
<p>
2026年第1期《求是》杂志发表中共中央总书记、国家主席、中央军委主席习近平的重要文章《学习好贯彻好党的二十届四中全会精神》。
</p>
<p>
党的二十届四中全会审议通过“十五五”规划建议，擘画了未来五年的宏伟蓝图。
</p>
<p>
在贯彻落实全会精神过程中，习近平总书记指出要着重把握以下几点：第一，坚定不移推动高质量发展；第二，加快构建新发展格局；第三，推动全体人民共同富裕迈出坚实步伐；第四，更好统筹发展和安全；第五，统筹推进各领域工作。
</p>
<p>
2026年是“十五五”开局之年。习近平主席在二〇二六年新年贺词中指出：“我们要锚定目标任务，坚定信心、乘势而上，扎实推动高质量发展，进一步全面深化改革开放，推进全体人民共同富裕，续写中国奇迹新篇章。”
</p>
<!-- 定义一张图片，引入img/1.png -->
<img src="img/1.png">
<!-- img标签属性
src: 图片文件路径
1. 相对路径：相对于当前HTML文件的位置
1.1 同一文件夹下：img/1.png（或./img/1.png）
1.2 上一级文件夹：../img/1.png
1.3 下一级文件夹：folder/img/1.png
2. 绝对路径：从根目录开始写起，完整的文件
2.1 绝对磁盘路径：C:/Users/31604/Desktop/Personal/JavaWeb/code/HTML-CSS/img/1.png
2.2 绝对网络路径：https://www.example.com/img/1.png
在新标签页中打开图片即可看到图片的绝对网络路径
需要注意的是，浏览器出于安全考虑，通常不允许网页直接访问本地文件，建议使用相对路径或将图片上传到服务器后使用网络路径。
alt: 图片无法显示时，显示的替代文本
width: 图片宽度
height: 图片高度
高度与宽度的单位：px（像素）、%
百分比：相对于父元素的宽度或高度。这里的父元素是body
高度与宽度设置一个即可，另一个会自动按比例调整
-->
</body>
</html>
首行缩进、加粗、行高
#time {
color: #b2b2b2;
}
/* 去除超链接的下划线 */
a {
text-decoration: none;
}
p {
/* 为所有段落标签设置行高 */
line-height: 2;
/* 设置首行缩进2个字符 */
text-indent: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<!---------------------- 新闻标题 -------------------------->
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span id="time">2026年01月19日 08:49</span>
<!-- 换两行 -->
<br><br>
<!---------------------- 新闻正文 -------------------------->
<video src="video/news.mp4" controls width="800px"></video>
<br><br>
<!-- 使用<b>标签加粗</b> -->
<!-- 使用<;strong>标签加粗</strong>有同样效果 -->
<!-- 是空格符，但是这么做太麻烦且不美观，使用CSS设置段落缩进 -->
<p>
<b>
2026年第1期《求是》杂志发表中共中央总书记、国家主席、中央军委主席习近平的重要文章《学习好贯彻好党的二十届四中全会精神》。
</b>
</p>
<p>
党的二十届四中全会审议通过“十五五”规划建议，擘画了未来五年的宏伟蓝图。
</p>
<p>
在贯彻落实全会精神过程中，习近平总书记指出要着重把握以下几点：第一，坚定不移推动高质量发展；第二，加快构建新发展格局；第三，推动全体人民共同富裕迈出坚实步伐；第四，更好统筹发展和安全；第五，统筹推进各领域工作。
</p>
<p>
2026年是“十五五”开局之年。习近平主席在二〇二六年新年贺词中指出：“我们要锚定目标任务，坚定信心、乘势而上，扎实推动高质量发展，进一步全面深化改革开放，推进全体人民共同富裕，续写中国奇迹新篇章。”
</p>
<img src="img/1.png">
</body>
</html>
整体布局处理
我们要让整个网页居中显示、左右等距。让AI帮我们生成即可。
#time {
color: #b2b2b2;
}
/* 去除超链接的下划线 */
a {
text-decoration: none;
}
p {
/* 为所有段落标签设置行高 */
line-height: 2;
/* 设置首行缩进2个字符 */
text-indent: 2em;
}
.container {
width: 70%;
margin: 0 auto;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</title>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<div class="container">
<h1>壹视界·微视频丨如何贯彻落实四中全会精神？总书记这样划重点</h1>
<a href="http://www.cctv.com">央视网</a>
<span id="time">2026年01月19日 08:49</span>
<br><br>
<video src="video/news.mp4" controls width="100%"></video>
<br><br>
<p>
<b>
2026年第1期《求是》杂志发表中共中央总书记、国家主席、中央军委主席习近平的重要文章《学习好贯彻好党的二十届四中全会精神》。
</b>
</p>
<p>
党的二十届四中全会审议通过"十五五"规划建议，擘画了未来五年的宏伟蓝图。
</p>
<p>
在贯彻落实全会精神过程中，习近平总书记指出要着重把握以下几点：第一，坚定不移推动高质量发展；第二，加快构建新发展格局；第三，推动全体人民共同富裕迈出坚实步伐；第四，更好统筹发展和安全；第五，统筹推进各领域工作。
</p>
<p>
2026年是"十五五"开局之年。习近平主席在二〇二六年新年贺词中指出："我们要锚定目标任务，坚定信心、乘势而上，扎实推动高质量发展，进一步全面深化改革开放，推进全体人民共同富裕，续写中国奇迹新篇章。"
</p>
<img src="img/1.png" width="100%">
<!-- 因为body变成了div，而我们希望div占70%而图片与视频与div同宽，所以这里图片和视频也设置了width:100% -->
</div>
</body>
</html>
盒子模型
盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便地进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
布局标签：使用div和span这两个没有语义的布局标签。
div标签特点：一行只显示一个（独占一行）、宽度默认是父元素的宽度，高度默认由内容撑开、可以设置宽高。
span标签特点：一行可以显示多个、宽度和高度默认由内容撑开、不可以设置宽高。
常见的CSS样式：
div {
width: 200px;
height: 100px;
background-color: #05a5d2;
padding: 20px 20px 20px 20px;
border: 20px solid #6bd5d7;
margin: 30px 30px 30px 30px;
}
width和height默认情况下设置的是content区域的宽度和高度。padding和margin的四个数值分别代表上、右、下、左，即顺时针。也可以设置为两个值，上下是第一个值，左右是第二个值。也可以设置为一个值，表示上下左右的内边距/外边距相同。border的三个值分别表示距离、实线还是虚线、边框颜色。auto表示居中。具体可以去MDN Reference查看。
可以通过inspect（检查）来查看：
表单
表单：在网页中主要负责数据采集功能，如注册、登录等数据采集。标签为<form>
表单项：不同类型的input元素、下拉列表、文本域等。
<input>：定义表单项，通过type属性控制输入形式（text/password/...）
<select>：定义下拉列表，<option>定义列表项
<textarea>：定义文本域
| type取值 | 描述 |
|---|---|
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮（name属性要一致才能互斥） |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| hidden | 定义隐藏域（该表单项看不到，但会提交到服务器端） |
| submit/reset/button | 定义提交/重置/可点击按钮 |
属性：
action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式，get\post（get为默认）
注意：
1.表单项要想采集数据，必须设置name属性
2.对于get，表单数据会出现在URL后面，形式为：/URL?表单数据1&表单数据2&...
特点：
(i).如果表单中包含了隐私数据，get方式并不安全
(ii).在浏览器中get请求的大小是有限制的，不适合提交大数据量的表单
3.对于post，表单数据会在消息体/请求体中提交到服务器。在网页的开发者工具的“载荷”处可以看到
特点：
(i).安全
(ii).请求大小没有限制
4.label标签：将选项进行整体包裹，点击选项的文字也能选中。
练习：智能学习辅助系统
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能学习辅助系统</title>
<style>
/* 顶部导航栏样式 */
.top-nav {
background-color: #333; /* 深灰色背景 */
padding: 15px;
overflow: hidden;
}
.nav-title {
float: left; /* 标题居左 */
font-size: 24px;
font-weight: bold; /* 加粗展示 */
margin: 0;
color:#f0f0f0;
}
.nav-logout {
float: right; /* 退出登录居右 */
font-size: 16px;
margin-top: 8px;
}
.nav-logout a {
color: white;
text-decoration: none;
}
.nav-logout a:hover {
text-decoration: underline;
}
/* 搜索表单区域样式 */
.search-form {
padding: 20px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
margin: 20px;
border-radius: 5px;
}
.search-form form {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.form-group {
display: flex;
align-items: center;
gap: 5px;
}
.form-group label {
font-weight: 500;
min-width: 60px;
}
.form-group input,
.form-group select {
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 14px;
}
.form-group input {
width: 150px;
}
.form-group select {
width: 120px;
}
.form-buttons {
margin-left: auto;
display: flex;
gap: 10px;
}
.btn {
padding: 8px 20px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
}
/* 表格展示区样式 */
.table-container {
margin: 20px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.data-table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.data-table th,
.data-table td {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #e9ecef;
}
.data-table th {
background-color: #f8f9fa;
font-weight: 600;
color: #495057;
font-size: 14px;
}
.data-table tbody tr {
transition: background-color 0.2s;
}
.data-table tbody tr:hover {
background-color: #f8f9fa;
}
.btn-edit {
background-color: #28a745;
color: white;
padding: 5px 12px;
margin-right: 5px;
}
.btn-edit:hover {
background-color: #218838;
}
.btn-delete {
background-color: #dc3545;
color: white;
padding: 5px 12px;
}
.btn-delete:hover {
background-color: #c82333;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
<h1 class="nav-title">智能学习辅助系统</h1>
<div class="nav-logout">
<a href="#">退出登录</a>
</div>
</div>
<!-- 搜索表单区域 -->
<div class="search-form">
<form action="#" method="get">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label for="position">职位：</label>
<select id="position" name="position">
<option value="">请选择</option>
<option value="班主任">班主任</option>
<option value="讲师">讲师</option>
<option value="学工主管">学工主管</option>
<option value="教研主管">教研主管</option>
<option value="咨询师">咨询师</option>
</select>
</div>
<div class="form-buttons">
<button type="submit" class="btn btn-primary">查询</button>
<button type="reset" class="btn btn-secondary">清空</button>
</div>
</form>
</div>
<!-- 表格展示区 -->
<div class="table-container">
<table class="data-table">
<thead>
<!-- thead用来定义表头 -->
<tr>
<!-- tr用来定义表格中的行 -->
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
<!-- th用来定义表格中的单元格 -->
</tr>
</thead>
<tbody>
<!-- 测试数据：基于《进击的巨人》角色 -->
<tr>
<td>艾伦</td>
<td>男</td>
<td>讲师</td>
<td>2023-01-15</td>
<td>2023-12-10 14:30:25</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
<tr>
<td>三笠</td>
<td>女</td>
<td>学工主管</td>
<td>2023-02-20</td>
<td>2023-12-09 09:15:42</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
<tr>
<td>阿尔敏</td>
<td>男</td>
<td>教研主管</td>
<td>2023-03-05</td>
<td>2023-12-08 16:45:18</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
<tr>
<td>利威尔</td>
<td>男</td>
<td>班主任</td>
<td>2023-01-10</td>
<td>2023-12-10 11:20:30</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
<tr>
<td>韩吉</td>
<td>女</td>
<td>咨询师</td>
<td>2023-02-15</td>
<td>2023-12-07 15:50:45</td>
<td>
<button class="btn btn-edit">编辑</button>
<button class="btn btn-delete">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
效果如图：
