前端Web开发(HTML+CSS)

1. 初识Web前端#

1.1 介绍#

我们介绍Web网站工作流程的时候提到，前端开发，主要的职责就是将数据以好看的样式呈现出来。说白了，就是开发网页程序，如下图所示：

主要明确以下三个问题：

1). 网页由哪些部分组成 ?

文字、图片、音频、视频、超链接、表格等等。

2). 我们看到的网页，背后的本质是什么 ?

前端程序员写的前端代码 (备注：在前后端分离的开发模式中)

3). 前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页
浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

而市面上的浏览器非常多，比如：IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。而且我们电脑上安装的浏览器可能都不止一个，有很多。

但是呢，需要大家注意的是，不同的浏览器，内核不同，对于相同的前端代码解析的效果也会存在差异。那这就会造成一个问题，同一段前端程序，不同浏览器展示出来的效果是不一样的，这个用户体验就很差了。而我们想达到的效果则是，即使用户使用的是不同的浏览器，解析同一段前端代码，最终展示出来的效果都是相同的。

要想达成这样一个目标，我们就需要定义一个统一的标准，然后让各大浏览器厂商都参照这个标准来实现即可。而这套标准呢，其实早都已经定义好了，那就是我们接下来，要介绍的web标准。

1.2 Web标准#

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

那在我们的前端课程中，除了会讲解HTML、CSS、JS这些技术以外，还会讲解现在前端开发中的高级技术Vue、ElementPlus、Axios。

而Web前端开发的内容呢，我们在设计的时候，也进行了分层的设计，分为了两个部分：

Web前端基础：HTML、CSS、JS、Vue3、Ajax、Axios，前端基础部分为两天时间。
Web前端进阶：Vue工程化、ElementPlus、Tlias智能学习辅助系统案例，前端进阶部分为三天时间。

那今天我们就先来讲解Web前端基础的第一部分： HTML & CSS。

什么是HTML？
HTML: HyperText Markup Language，超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签 “<标签名>” 构成的语言

HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

下面展示的是一段html代码经过浏览器解析，呈现的效果如右图所示：

什么是CSS？

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

下面展示的是一段 html代码及 CSS样式经过浏览器解析，呈现的效果如右图所示：

2. HTML快速入门#

2.1 操作步骤#

新建文本文件，后缀名改为 .html，命名为：01. html快速入门.html

创建一个名为HTML的文件夹，然后找到课程资料中的 1.png 文件放到该目录下的img目录中。此时HTML文件夹中内容如下：

写HTML的基本骨架，定义标题

选中文件，鼠标右击，选择使用记事本打开文件，并且编写网页的标题。

首先html有固定的基本结构

1
<html>
2
     <head>
3
          <title>HTML 快速入门</title>
4
     </head>
5
     <body>
6

7
     </body>
8
</html>

其中<html>是根标签，<head>和<body>是子标签。

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。
在<body>中编写HTML的核心内容

1
<html>
2
     <head>
3
        <title>HTML 快速入门</title>
4
     </head>
5
     <body>
6
        <h1>Hello HTML</h1>
7
        <img src="img/1.png">
8
     </body>
9
</html>

其中 <h1> 标签是一个一级标题的标签。 <img> 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。

然后选中文件，鼠标右击，选择使用浏览器打开文件

浏览器呈现效果如下:

2.2 总结#

1). HTML页面的基础结构标签

1
<html>
2
    <head>
3
        <title> </title>
4
    </head>
5
    <body>
6

7
    </body>
8
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

2). HTML中的标签特点

HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

3. 前端开发工具#

我们通过快速入门案例，发现由记事本文件开发html是非常不方便的，所以接下来我们需要学习一款前端专业的开发工具VS Code。

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： https://code.visualstudio.com
安装： VsCode安装文档
注意：
- 需要注意的是，我们作为一名开发者，不应该将软件软装在包含中文名的路径中。
- 由于安装了IDEA快捷键的插件，VSCode快键键与IDEA是一致的。

4. 常见标签&样式#

那我们在讲解HTML的常见基础标签及 CSS的基本样式时，我们就以新浪新闻页面为例，来进行讲解，这样大家不仅能够知道常见标签及样式的作用，还能够知道具体的应用场景。

央视新闻的具体页面效果如下：

原始页面网址：https://news.cctv.com/2024/05/15/ARTIflTnFvNMx9nUVc4PA7T2240515.shtml

而大家可以看到，上述新闻网页，其实分为两个部分，一个是新闻的标题部分，另一个是新闻的正文部分。那接下来，我们就先来完成央视新闻标题部分的制作。

4.1 央视新闻-标题#

前面我们提到，我们在浏览器中看到的网页程序呈现出来的效果，实际上是浏览器解析并渲染了前端代码而呈现出来的。而我们所编写的HTML页面，在浏览器中渲染的时候，是从上往下逐行解析展示的。所以，我们在编写html页面的时候，要根据页面的布局，从上往下编写。

4.1.1 标题排版#

在制作网页的时候，我们可以充分的利用AI辅助工具通义灵码，来帮我们实现对应的功能，我们只需要在编辑器中给定对应的注释（提示词），通义灵码就可以帮我们实现对应的功能效果，然后我们再基于生成的代码进行调试即可。

接下来，我们就可以通过VsCode打开HTML文件夹，然后在其中创建一个html页面，命名为：02. 央视新闻-标题排版.html。

然后在这个文件中来制作新浪新闻网页，标题部分的排版内容为：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
</head>
8
<body>
9

10
  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
11
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
12

13
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
14
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
15
  2024年05月15日 20:07
16

17
</body>
18
</html>

那在上述我们用到的两个标签，一个是标题标签 <h1></h1>，另一个是超链接标题 <a></a>。这两个标签的具体用法如下：

标题标签 h 系列：
<h1> 11111111111111 </h1>
<h2> 11111111111111 </h2>
<h3> 11111111111111 </h3>
<h4> 11111111111111 </h4>
<h5> 11111111111111 </h5>
<h6> 11111111111111 </h6>
效果：h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的。
注意：HTML标签是预定义好的，不能随意定义，也就以为着，标题标签就只有这六个，没有 <h7>

超链接 a 标签：
标签：<a href=”…” target=”…”>央视网</a>
属性：

href: 指定资源访问的url

target: 指定在何处打开资源链接

_self: 默认值，在当前页面打开

_blank: 在空白页面打开

4.1.2 标题样式#

我们可以看到，目前我们制作的新闻标题部分，新闻发布时间 2024年05月15日 20:07 的字体颜色是黑色，而在原始的央视新闻页面中，字体的颜色呈现灰色，具体的呈现效果如下：

那接下来，我们要来控制字体的颜色，而这部分其实是属于网页的样式，所以这里呢，就要通过CSS样式控制。

这些基础的功能我们就可以直接通过AI工具帮我们实现，参考如下提示词(prompt)：

你是一名前端开发工程师，请通过css为网页中的新闻发布时间设置字体颜色为灰色。网页内容如下：
<!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 id=“title”>【新思想引领新征程】推进长江十年禁渔谱写长江大保护新篇章</h1>
<!— 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 —>
<a href=“https://news.cctv.com/” target=“_blank”>央视网</a>
2024年05月15日 20:07
</body>
</html>

AI给出的最终代码实现如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
  <style>
8
    .publish-date {
9
      color: gray;
10
    }
11
  </style>
12
</head>
13
<body>
14

15
  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
16
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
17

18
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
19
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
20
  <span class="publish-date">2024年05月15日 20:07</span>
21

22
</body>
23
</html>

我们可以看到，通过上面这样一段代码，就可以控制字体的颜色，而其实上面这一段代码就是AI生成的CSS样式。最终效果如下：

4.1.2.1 CSS引入方式#

那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。

具体有3种引入方式，语法如下表格所示：

对于上述3种引入方式，企业开发的使用情况如下：

行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）
外部样式：html和css实现了完全的分离，企业开发常用方式。

4.1.2.2 颜色表示方式#

在前端程序开发中，颜色的表示方式常见的有如下三种：

4.1.2.3 设置字体颜色#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
  <!-- 2. 内部样式 -->
8
  <style>
9
    .publish-date {
10
      color: #b2b2b2;
11
    }
12
  </style>
13
  <!-- 3. 外部样式 -->
14
  <!-- <link rel="stylesheet" href="css/news.css"> -->
15
</head>
16
<body>
17

18
  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
19
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
20

21
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
22
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
23

24
  <!-- 1. 行内样式 -->
25
  <!-- <span style="color: #b2b2b2;">2024年05月15日 20:07</span> -->
26

27
  <span class="publish-date">2024年05月15日 20:07</span>
28

29
</body>
30
</html>

备注: 要想拾取某一个网页中的颜色，我们可以借助于截图软件的拾色器插件来完成。【截图软件在资料中已经提供】

4.1.2.4 CSS选择器#

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。

选择器通用语法如下：

1
选择器名   {
2
    css样式名：css样式值;
3
    css样式名：css样式值;
4
}

而我们是做后台开发的，所以对于css选择器，我们只学习常见的这几种：

那接下来，我们需要将页面上所有的超链接中，默认的下划线效果去除掉。具体的代码实现如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
  <!-- 2. 内部样式 -->
8
  <style>
9
    .publish-date {
10
      color: #b2b2b2;
11
    }
12

13
    /* 设置超链接取消下划线效果 */
14
    a {
15
      text-decoration: none;
16
    }
17
  </style>
18
  <!-- 3. 外部样式 -->
19
  <!-- <link rel="stylesheet" href="css/news.css"> -->
20
</head>
21
<body>
22

23
  <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
24
  <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
25

26
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
27
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
28

29
  <!-- 1. 行内样式 -->
30
  <!-- <span style="color: #b2b2b2;">2024年05月15日 20:07</span> -->
31

32
  <span class="publish-date">2024年05月15日 20:07</span>
33

34
</body>
35
</html>

那到目前为止，标题部分的基本排版和样式，我们就已经制作完成了，具体页面效果：

4.2 央视新闻-正文#

在原始的央视新闻页面中，我们可以看到有视频，有文字，有图片，内容还是非常丰富的。

4.2.1 正文排版#

4.2.1.1 基本实现#

浏览器在解析渲染页面的时候，是从上往下解析渲染的，那接下来，我们就可以从上往下来布局这个页面，那这个过程中，我们就可以直接基于AI来辅助我们实现。

正文排版之后，页面的代码如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
  <!-- 2. 内部样式 -->
8
  <style>
9
    .publish-date {
10
      color: #b2b2b2;
11
    }
12

13
    /* 设置超链接取消下划线效果 */
14
    a {
15
      text-decoration: none;
16
    }
17
  </style>
18
</head>
19
<body>
20

21
    <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
22
    <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
23

24
    <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
25
    <a href="https://news.cctv.com/" target="_blank">央视网</a>
26

27
    <span class="publish-date">2024年05月15日 20:07</span>
28
    <br>
29
    <br>
30

31
    <!-- 定义一个视频, video/news.mp4 -->
32
    <video src="video/news.mp4" controls  width="80%"></video>
33
    <p>
34
      央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
35
    </p>
36
    <p>
37
      行走在长江沿线，科研人员发现很多可喜现象。
38
    </p>
39
    <!-- 定义一张图片, img/1.gif -->
40
    <img src="img/1.gif" alt=""  width="100%">
41
    <p>
42
      在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
43
    </p>
44
    <p>
45
      在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
46
    </p>
47
    <p>
48
      在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
49
    </p>
50
    <img src="img/2.jpg" width="100%">
51
    <p>
52
      水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
53
    </p>
54
    <p>
55
      实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
56
    </p>
57
    <img src="img/3.jpg" width="100%">
58
    <p>
59
      按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
60
    </p>
61
    <p>
62
      实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
63
    </p>
64
    <img src="img/4.jpg" width="100%">
65
    <p>
66
      安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
67
    </p>
68
    <p>
69
      在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
70
    </p>
71
    <p>
72
      在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
73
    </p>
74
    <img src="img/5.jpg" width="100%">
75
    <p>
76
      长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
77
    </p>
78
    <img src="img/6.jpg">
79

80
</body>
81
</html>

注意：在使用类似于通义零码这类的AI辅助工具时，如果存在一些敏感数据，比如：政治、宗教、信仰等。

4.2.1.2 常见标签#

那在上述的正文排版中，用到了如下标签，接下来详解介绍一下：

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：

4.2.1.3 路径表示#

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：

绝对路径:
- 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
- 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:

./ : 当前目录 , ./ 可以省略的

../: 上一级目录

4.2.2 正文样式#

正文的基本排版有了之后，接下来，我们要处理的是正文部分的样式。

具体的css样式如下:

1
    /* 设置段落首行缩进 */
2
    p {
3
      text-indent: 2em; /* 首行缩进2em */
4
      line-height: 2; /* 行高2倍 */
5
    }

4.3 央视新闻-布局#

4.3.1 功能实现#

完成了标签及正文部分的排版制作，以及样式处理之后，那最后一步，我们就要来完成页面整体布局的设置了。从原始的央视新闻页面中，我们可以看到，新闻页面是出于整个版面的正中心的，那这种呢，在布局中也称为 版心居中。

这个功能，我们依然可以通过AI，轻而易举的实现。具体的提示词如下：

通过css使如下新闻网页的整体内容，占用整个页面宽度的70%，并且横向居中展示。具体的网页内容如下：…

最终网页代码如下所示：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
7
  <style>
8
    .publish-date {
9
      color: #b2b2b2;
10
    }
11

12
    /* 设置超链接取消下划线效果 */
13
    a {
14
      text-decoration: none;
15
    }
16

17
    /* 设置段落首行缩进 */
18
    p {
19
      text-indent: 2em; /* 首行缩进2em */
20
      line-height: 2; /* 行高2倍 */
21
    }
22

23
    /* 新增样式 */
24
    .news-content {
25
      width: 70%; /* 宽度占70% */
26
      margin: 0 auto; /* 横向居中 */
27
    }
28
  </style>
29
</head>
30
<body>
31
    <!-- 包裹新闻内容的容器 -->
32
    <div class="news-content">
33
      <!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
34
      <h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
35

36
      <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
37
      <a href="https://news.cctv.com/" target="_blank" >央视网</a>
38

39
      <span class="publish-date">2024年05月15日 20:07</span>
40
      <br>
41
      <br>
42

43
      <!-- 定义一个视频, video/news.mp4 -->
44
      <video src="video/news.mp4" controls width="100%"></video>
45
      <p>
46
        <strong>央视网消息</strong>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
47
      </p>
48
      <p>
49
        行走在长江沿线，科研人员发现很多可喜现象。
50
      </p>
51
      <!-- 定义一张图片, img/1.gif -->
52
      <img src="img/1.gif" alt=""  width="100%">
53
      <p>
54
        在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
55
      </p>
56
      <p>
57
        在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
58
      </p>
59
      <p>
60
        在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
61
      </p>
62
      <img src="img/2.jpg"  width="100%">
63
      <p>
64
        水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
65
      </p>
66
      <p>
67
        实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
68
      </p>
69
      <img src="img/3.jpg"  width="100%">
70
      <p>
71
        按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
72
      </p>
73
      <p>
74
        实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
75
      </p>
76
      <img src="img/4.jpg"  width="100%">
77
      <p>
78
        安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
79
      </p>
80
      <p>
81
        在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
82
      </p>
83
      <p>
84
        在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
85
      </p>
86
      <img src="img/5.jpg"  width="100%">
87
      <p>
88
        长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
89
      </p>
90
      <img src="img/6.jpg" >
91
    </div>
92
</body>
93
</html>

上述代码，最终经过浏览器的解析渲染之后，效果如下：

4.3.2 盒子模型#

4.3.2.1 介绍#

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

CSS盒子模型，其实和日常生活中的包装盒是非常类似的，就比如：

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。

4.3.2.2 布局标签#

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
测试：

1
<body>
2
    <div>
3
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
4
    </div>
5
    <div>
6
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
7
    </div>
8

9
    <span>
10
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
11
    </span>
12
    <span>
13
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
14
    </span>
15
</body>

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度。可以设置宽高（width、height）

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度。不可以设置宽高（width、height）

4.3.2.3 代码实现#

代码如下:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>盒子模型</title>
8
    <style>
9
        div {
10
            width: 200px;  /* 宽度 */
11
            height: 200px;  /* 高度 */
12
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
13
            background-color: aquamarine; /* 背景色 */
14

15
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/
16
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
17
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
18
        }
19
    </style>
20
</head>
21

22
<body>
23

24
    <div>
25
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
26
    </div>
27

28
</body>
29
</html>

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小 , 以及盒子各个组成部分(内容、内边距、边框、外边距)：

我们也可以，通过浏览器的开发者工具，清晰的看到这个盒子，以及每一个部分的大小：

备注：

上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：

padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；

padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；

padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

4.4 案例#

4.4.1 需求#

通过一个央视新闻页面的制作，大家已经熟悉了HTML中的常见标签及CSS中基础样式的写法及作用。那接下来呢，我们就要通过一个案例，来加深大家对于这些标签和样式的掌握和使用，那么在完成这个案例的过程中呢，我们依然可以直接基于AI来辅助我们快速实现。

需求：参照Tlias智能学习辅助系统，完成员工管理页面的制作。

产品经理制作的页面原型如下：

4.4.2 代码实现#

4.4.2.1 顶部导航栏#

4.4.2.1.1 基本实现#

原型效果：

提示词（prompt）：
你是一名前端开发工程师，帮我生成一个HTML页面，页面整体有4个部分组成，先来实现第一个部分：
1. 顶栏
内容：包含左侧的标题“Tlias智能学习辅助系统”，字体需加大加粗，以突出显示；右侧则放置“退出登录”文字链接。
布局：确保标题与退出登录文本位于同一行内，分别左对齐与右对齐。

页码代码如下：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
      body {
9
        margin: 0;
10
      }
11

12
      /* 顶栏样式 */
13
      .header {
14
          display: flex;
15
          justify-content: space-between;
16
          align-items: center;
17
          background-color: #f1f1f1;
18
          padding: 10px 20px;
19
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
      }
21

22
      /* 加大加粗标题 */
23
      .header h1 {
24
          margin: 0;
25
          font-size: 24px;
26
          font-weight: bold;
27
      }
28

29
      /* 文本链接样式 */
30
      .header a {
31
          text-decoration: none;
32
          color: #333;
33
          font-size: 16px;
34
      }
35
    </style>
36
</head>
37
<body>
38
    <!-- 顶栏 -->
39
    <div class="header">
40
        <h1>Tlias智能学习辅助系统</h1>
41
        <a href="#">退出登录</a>
42
    </div>
43

44
    <!-- 其他部分可以在这里添加 -->
45
</body>
46
</html>

页面展示效果如下：

4.4.2.1.2 flex布局#

那在上述的案例代码中，其实我们用到了一种布局模式，叫 flex布局。

flex是flexible Box的缩写，意为”弹性布局”。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
通过给父容器添加flex属性,来控制子元素的位置和排列方式。

测试代码如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Document</title>
7
  <style>
8
    #container {
9
      display: flex;
10
      /* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 */
11
      /* justify-content: flex-start;*/ /* 从头开始排列  */
12
      /* justify-content: flex-end; */ /* 从尾开始排列 */
13
      /* justify-content: center; */ /* 居中排列 */
14
      /* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */
15
      flex-direction: row;
16
      justify-content: space-between;
17
      background-color: #aeea6a;
18
      width: 400px;
19
      height: 300px;
20
    }
21

22
    #container div {
23
      background-color: #e866ef;
24
      width: 100px;
25
      height: 50px;
26
    }
27
  </style>
28
</head>
29
<body>
30
  <div id="container">
31
    <div>Flex Item</div>
32
    <div>Flex Item</div>
33
    <div>Flex Item</div>
34
  </div>
35
</body>
36
</html>

flex布局相关的CSS样式：

如果主轴设置为row，其实就是横向布局。主轴设置为column，其实就是纵向布局。

4.4.2.2 搜索表单#

那接下来，我们要完成的是第二个部分，也就是搜索栏的制作。页面原型展示如下：

那这里呢，需要用到HTML中的表单。那接下来，我们先来介绍一下表单标签，然后再来实现搜索表单栏的制作。

4.4.2.2.1 表单标签#

那表单呢,在我们日常的上网的过程中,基本上每天都会遇到。比如，我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单。当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交，那其实这个数据呢，一般会提交到服务端，最终保存在数据库中（后面的课程中会讲到）。

那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项或表单元素。

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

演示：

1). GET方式提交的表单

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>HTML-表单</title>
8
</head>
9
<body>
10
    <!--
11
    form表单属性:
12
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
13
        method: 表单的提交方式 .
14
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
15
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
16
    -->
17

18
    <form action="" method="get">
19
        用户名: <input type="text" name="username">
20
        年龄: <input type="text" name="age">
21

22
        <input type="submit" value="提交">
23
    </form>
24

25
</body>
26
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

2). POST方式提交表单

将上述的表单提交方式由get，改为post

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>HTML-表单</title>
8
</head>
9
<body>
10
    <!--
11
    form表单属性:
12
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
13
        method: 表单的提交方式 .
14
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
15
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
16
    -->
17

18
    <form action="" method="post">
19
        用户名: <input type="text" name="username">
20
        年龄: <input type="text" name="age">
21

22
        <input type="submit" value="提交">
23
    </form>
24

25
</body>
26
</html>

注意事项：

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

1
用户名: <input type="text" name="username">

4.4.2.2.2 表单项标签#

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项 , 通过type属性控制输入形式。
<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域

演示：

创建一个新的表单项的html文件，具体内容如下：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>HTML-表单项标签</title>
8
</head>
9
<body>
10

11
<!-- value: 表单项提交的值 -->
12
<form action="/save" method="post">
13
     姓名: <input type="text" name="name"> <br><br>
14

15
     密码: <input type="password" name="password"> <br><br>
16

17
     性别: <input type="radio" name="gender" value="1"> 男
18
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
19

20
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
21
          <label><input type="checkbox" name="hobby" value="game"> game </label>
22
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
23

24
     图像: <input type="file" name="image">  <br><br>
25

26
     生日: <input type="date" name="birthday"> <br><br>
27

28
     时间: <input type="time" name="time"> <br><br>
29

30
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
31

32
     学历: <select name="degree">
33
               <option value="">----------- 请选择 -----------</option>
34
               <option value="1">大专</option>
35
               <option value="2">本科</option>
36
               <option value="3">硕士</option>
37
               <option value="4">博士</option>
38
          </select>  <br><br>
39

40
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
41

42
     <input type="hidden" name="id" value="1">
43

44
     <!-- 表单常见按钮 -->
45
     <input type="button" value="按钮">
46
     <input type="reset" value="重置">
47
     <input type="submit" value="提交">
48
     <br>
49
</form>
50

51
</body>
52
</html>

通过浏览器打开上述的表单项html文件，最终展示出的表单信息如下：

而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，我们就点击提交按钮，来提交当前表单，看看提交的数据：

4.4.2.2.3 搜索表单实现#

那基本的表单标签和表单项标签，讲解完毕后，接下来呢，我们就来完成搜索表单的实现，同样，我们可以借助于AI帮我们完成对应的页面布局。

提示词（prompt）：
再继续帮我生成第二个部分: 2. 搜索表单区域
组成：包括三个输入控件和两个操作按钮。输入控件具体为：姓名（文本输入框）、性别（下拉选择，选项包括男/女，默认为空）、职位（下拉选择，选项包括班主任、讲师、学工主管、教研主管、咨询师，默认为空）。
按钮：“查询”与“清空”按钮，用于提交表单或重置表单项。
布局：所有表单项及按钮需水平排列于一行，确保美观大气。

代码实现如下：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
      body {
9
        margin: 0;
10
      }
11

12
      /* 顶栏样式 */
13
      .header {
14
          display: flex;
15
          justify-content: space-between;
16
          align-items: center;
17
          background-color: #f1f1f1;
18
          padding: 10px 20px;
19
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
      }
21

22
      /* 加大加粗标题 */
23
      .header h1 {
24
          margin: 0;
25
          font-size: 24px;
26
          font-weight: bold;
27
      }
28

29
      /* 文本链接样式 */
30
      .header a {
31
          text-decoration: none;
32
          color: #333;
33
          font-size: 16px;
34
      }
35

36
      /* 搜索表单区域 */
37
      .search-form {
38
          display: flex;
39
          align-items: center;
40
          padding: 20px;
41
          background-color: #f9f9f9;
42
      }
43

44
      /* 表单控件样式 */
45
      .search-form input[type="text"], .search-form select {
46
          margin-right: 10px;
47
          padding: 5px 10px;
48
          border: 1px solid #ccc;
49
          border-radius: 4px;
50
          width: 200px;
51
      }
52

53
      /* 按钮样式 */
54
      .search-form button {
55
          padding: 5px 15px;
56
          margin-left: 10px;
57
          background-color: #007bff;
58
          color: white;
59
          border: none;
60
          border-radius: 4px;
61
          cursor: pointer;
62
      }
63

64
      /* 清空按钮样式 */
65
      .search-form button.clear {
66
          background-color: #6c757d;
67
      }
68
    </style>
69
</head>
70
<body>
71
    <!-- 顶栏 -->
72
    <div class="header">
73
        <h1>Tlias智能学习辅助系统</h1>
74
        <a href="#">退出登录</a>
75
    </div>
76

77
    <!-- 搜索表单区域 -->
78
    <form class="search-form">
79
      <input type="text" name="name" placeholder="姓名" />
80
      <select name="gender">
81
          <option value="">性别</option>
82
          <option value="1">男</option>
83
          <option value="2">女</option>
84
      </select>
85
      <select name="job">
86
          <option value="">职位</option>
87
          <option value="1">班主任</option>
88
          <option value="2">讲师</option>
89
          <option value="3">学工主管</option>
90
          <option value="4">教研主管</option>
91
          <option value="5">咨询师</option>
92
      </select>
93
      <button type="submit">查询</button>
94
      <button type="reset" class="clear">清空</button>
95
    </form>
96

97
</body>
98
</html>

浏览器呈现效果为：

4.4.2.3 表格数据展示#

4.4.2.3.1 基本实现#

页面效果如下：

提示词（prompt）：
再继续帮我生成第三个部分: 3. 表格展示区
表格结构：展示列包括姓名、性别（显示男/女）、头像（小图标展示）、职位（显示班主任/讲师/学工主管/教研主管/咨询师）、入职日期、最后操作时间、操作（里包含两个按钮编辑与删除）。
数据模拟：基于《笑傲江湖》小说人物生成4条虚拟数据，每条数据应包含上述所有列的信息，以体现实际应用场景。
样式：可适当调整表格样式，确保美观大气。

代码实现为：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
      body {
9
        margin: 0;
10
      }
11

12
      /* 顶栏样式 */
13
      .header {
14
          display: flex;
15
          justify-content: space-between;
16
          align-items: center;
17
          background-color: #f1f1f1;
18
          padding: 10px 20px;
19
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
      }
21

22
      /* 加大加粗标题 */
23
      .header h1 {
24
          margin: 0;
25
          font-size: 24px;
26
          font-weight: bold;
27
      }
28

29
      /* 文本链接样式 */
30
      .header a {
31
          text-decoration: none;
32
          color: #333;
33
          font-size: 16px;
34
      }
35

36
      /* 搜索表单区域 */
37
      .search-form {
38
          display: flex;
39
          align-items: center;
40
          padding: 20px;
41
          background-color: #f9f9f9;
42
      }
43

44
      /* 表单控件样式 */
45
      .search-form input[type="text"], .search-form select {
46
          margin-right: 10px;
47
          padding: 5px 10px;
48
          border: 1px solid #ccc;
49
          border-radius: 4px;
50
          width: 200px;
51
      }
52

53
      /* 按钮样式 */
54
      .search-form button {
55
          padding: 5px 15px;
56
          margin-left: 10px;
57
          background-color: #007bff;
58
          color: white;
59
          border: none;
60
          border-radius: 4px;
61
          cursor: pointer;
62
      }
63

64
      /* 清空按钮样式 */
65
      .search-form button.clear {
66
        background-color: #6c757d;
67
      }
68

69
      .table {
70
         min-width: 100%;
71
         border-collapse: collapse;
72
         margin: 0 20px;
73
      }
74

75
      /* 设置表格单元格边框 */
76
      .table td, .table th {
77
        border: 1px solid #ddd;
78
        padding: 8px;
79
        text-align: center;
80
      }
81

82
      .avatar {
83
        width: 50px;
84
        height: 50px;
85
        object-fit: cover;
86
        border-radius: 50%;
87
      }
88

89
    </style>
90
</head>
91
<body>
92
    <!-- 顶栏 -->
93
    <div class="header">
94
        <h1>Tlias智能学习辅助系统</h1>
95
        <a href="#">退出登录</a>
96
    </div>
97

98
    <!-- 搜索表单区域 -->
99
    <form class="search-form" action="#" method="post">
100
      <input type="text" name="name" placeholder="姓名" />
101
      <select name="gender">
102
          <option value="">性别</option>
103
          <option value="1">男</option>
104
          <option value="2">女</option>
105
      </select>
106
      <select name="job">
107
          <option value="">职位</option>
108
          <option value="1">班主任</option>
109
          <option value="2">讲师</option>
110
          <option value="3">学工主管</option>
111
          <option value="4">教研主管</option>
112
          <option value="5">咨询师</option>
113
      </select>
114
      <button type="submit">查询</button>
115
      <button type="reset" class="clear">清空</button>
116
    </form>
117

118
    <table class="table table-striped table-bordered">
119
      <thead>
120
          <tr>
121
              <th>姓名</th>
122
              <th>性别</th>
123
              <th>头像</th>
124
              <th>职位</th>
125
              <th>入职日期</th>
126
              <th>最后操作时间</th>
127
              <th>操作</th>
128
          </tr>
129
      </thead>
130
      <tbody>
131
          <tr>
132
              <td>令狐冲</td>
133
              <td>男</td>
134
              <td><img src="https://via.placeholder.com/50" alt="令狐冲" class="avatar"></td>
135
              <td>讲师</td>
136
              <td>2021-03-15</td>
137
              <td>2023-07-30T12:00:00Z</td>
138
              <td class="btn-group">
139
                  <button>编辑</button>
140
                  <button>删除</button>
141
              </td>
142
          </tr>
143
          <tr>
144
              <td>任盈盈</td>
145
              <td>女</td>
146
              <td><img src="https://via.placeholder.com/50" alt="任盈盈" class="avatar"></td>
147
              <td>学工主管</td>
148
              <td>2020-04-10</td>
149
              <td>2023-07-29T15:00:00Z</td>
150
              <td class="btn-group">
151
                  <button>编辑</button>
152
                  <button>删除</button>
153
              </td>
154
          </tr>
155
          <tr>
156
              <td>岳不群</td>
157
              <td>男</td>
158
              <td><img src="https://via.placeholder.com/50" alt="岳不群" class="avatar"></td>
159
              <td>教研主管</td>
160
              <td>2019-01-01</td>
161
              <td>2023-07-30T10:00:00Z</td>
162
              <td class="btn-group">
163
                  <button>编辑</button>
164
                  <button>删除</button>
165
              </td>
166
          </tr>
167
          <tr>
168
              <td>宁中则</td>
169
              <td>女</td>
170
              <td><img src="https://via.placeholder.com/50" alt="宁中则" class="avatar"></td>
171
              <td>班主任</td>
172
              <td>2018-06-01</td>
173
              <td>2023-07-29T09:00:00Z</td>
174
              <td class="btn-group">
175
                  <button>编辑</button>
176
                  <button>删除</button>
177
              </td>
178
          </tr>
179
      </tbody>
180
  </table>
181

182
</body>
183
</html>

页面展示的效果为：

4.4.2.3.2 表格标签#

4.4.2.4 底部版权区域#

页面原型展示如下：

提示词（prompt）:
再继续帮我生成第二个部分: 4. 页脚版权区域
内容：第一行显示公司全称“江苏传智播客教育科技股份有限公司”；第二行展示版权信息，“版权所有 Copyright 2006-2024 All Rights Reserved”。
设计：该区域应具有灰色背景，字体颜色为白色，居中对齐，以营造专业且统一的视觉效果。

页面代码如下：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
      body {
9
        margin: 0;
10
      }
11

12
      /* 顶栏样式 */
13
      .header {
14
          display: flex;
15
          justify-content: space-between;
16
          align-items: center;
17
          background-color: #f1f1f1;
18
          padding: 10px 20px;
19
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
      }
21

22
      /* 加大加粗标题 */
23
      .header h1 {
24
          margin: 0;
25
          font-size: 24px;
26
          font-weight: bold;
27
      }
28

29
      /* 文本链接样式 */
30
      .header a {
31
          text-decoration: none;
32
          color: #333;
33
          font-size: 16px;
34
      }
35

36
      /* 搜索表单区域 */
37
      .search-form {
38
          display: flex;
39
          align-items: center;
40
          padding: 20px;
41
          background-color: #f9f9f9;
42
      }
43

44
      /* 表单控件样式 */
45
      .search-form input[type="text"], .search-form select {
46
          margin-right: 10px;
47
          padding: 5px 10px;
48
          border: 1px solid #ccc;
49
          border-radius: 4px;
50
          width: 200px;
51
      }
52

53
      /* 按钮样式 */
54
      .search-form button {
55
          padding: 5px 15px;
56
          margin-left: 10px;
57
          background-color: #007bff;
58
          color: white;
59
          border: none;
60
          border-radius: 4px;
61
          cursor: pointer;
62
      }
63

64
      /* 清空按钮样式 */
65
      .search-form button.clear {
66
        background-color: #6c757d;
67
      }
68

69
      .table {
70
         min-width: 100%;
71
         border-collapse: collapse;
72
         margin: 0 20px;
73
      }
74

75
      /* 设置表格单元格边框 */
76
      .table td, .table th {
77
        border: 1px solid #ddd;
78
        padding: 8px;
79
        text-align: center;
80
      }
81

82
      .avatar {
83
        width: 50px;
84
        height: 50px;
85
        object-fit: cover;
86
        border-radius: 50%;
87
      }
88

89
      /* 页脚版权区域 */
90
    .footer {
91
        background-color: #8f8c8c;
92
        color: white;
93
        text-align: center;
94
        padding: 20px 0;
95
        margin-top: 30px;
96
    }
97

98
    .footer .company-name {
99
        font-size: 1.1em;
100
        font-weight: bold;
101
    }
102

103
    .footer .copyright {
104
        font-size: 0.9em;
105
    }
106
    </style>
107
</head>
108
<body>
109
    <!-- 顶栏 -->
110
    <div class="header">
111
        <h1>Tlias智能学习辅助系统</h1>
112
        <a href="#">退出登录</a>
113
    </div>
114

115
    <!-- 搜索表单区域 -->
116
    <form class="search-form" action="#" method="post">
117
      <input type="text" name="name" placeholder="姓名" />
118
      <select name="gender">
119
          <option value="">性别</option>
120
          <option value="1">男</option>
121
          <option value="2">女</option>
122
      </select>
123
      <select name="job">
124
          <option value="">职位</option>
125
          <option value="1">班主任</option>
126
          <option value="2">讲师</option>
127
          <option value="3">学工主管</option>
128
          <option value="4">教研主管</option>
129
          <option value="5">咨询师</option>
130
      </select>
131
      <button type="submit">查询</button>
132
      <button type="reset" class="clear">清空</button>
133
    </form>
134

135
    <table class="table table-striped table-bordered">
136
      <thead>
137
          <tr>
138
              <th>姓名</th>
139
              <th>性别</th>
140
              <th>头像</th>
141
              <th>职位</th>
142
              <th>入职日期</th>
143
              <th>最后操作时间</th>
144
              <th>操作</th>
145
          </tr>
146
      </thead>
147
      <tbody>
148
          <tr>
149
              <td>令狐冲</td>
150
              <td>男</td>
151
              <td><img src="https://via.placeholder.com/50" alt="令狐冲" class="avatar"></td>
152
              <td>讲师</td>
153
              <td>2021-03-15</td>
154
              <td>2023-07-30T12:00:00Z</td>
155
              <td class="btn-group">
156
                  <button>编辑</button>
157
                  <button>删除</button>
158
              </td>
159
          </tr>
160
          <tr>
161
              <td>任盈盈</td>
162
              <td>女</td>
163
              <td><img src="https://via.placeholder.com/50" alt="任盈盈" class="avatar"></td>
164
              <td>学工主管</td>
165
              <td>2020-04-10</td>
166
              <td>2023-07-29T15:00:00Z</td>
167
              <td class="btn-group">
168
                  <button>编辑</button>
169
                  <button>删除</button>
170
              </td>
171
          </tr>
172
          <tr>
173
              <td>岳不群</td>
174
              <td>男</td>
175
              <td><img src="https://via.placeholder.com/50" alt="岳不群" class="avatar"></td>
176
              <td>教研主管</td>
177
              <td>2019-01-01</td>
178
              <td>2023-07-30T10:00:00Z</td>
179
              <td class="btn-group">
180
                  <button>编辑</button>
181
                  <button>删除</button>
182
              </td>
183
          </tr>
184
          <tr>
185
              <td>宁中则</td>
186
              <td>女</td>
187
              <td><img src="https://via.placeholder.com/50" alt="宁中则" class="avatar"></td>
188
              <td>班主任</td>
189
              <td>2018-06-01</td>
190
              <td>2023-07-29T09:00:00Z</td>
191
              <td class="btn-group">
192
                  <button>编辑</button>
193
                  <button>删除</button>
194
              </td>
195
          </tr>
196
      </tbody>
197
  </table>
198

199
  <!-- 页脚版权区域 -->
200
  <footer class="footer">
201
    <p class="company-name">江苏传智播客教育科技股份有限公司</p>
202
    <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
203
  </footer>
204

205
</body>
206
</html>

页面展示如下：

4.4.2.5 版心居中#

这个案例类似于央视新闻页面，页面中的内容，都需要居中显示，所以这里呢，我们就可以使用盒子模型来进行布局。具体代码如下：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Tlias智能学习辅助系统</title>
7
    <style>
8
      body {
9
        margin: 0;
10
      }
11

12
      /* 顶栏样式 */
13
      .header {
14
          display: flex;
15
          justify-content: space-between;
16
          align-items: center;
17
          background-color:  #c2c0c0;
18
          padding: 10px 20px;
19
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
      }
21

22
      /* 加大加粗标题 */
23
      .header h1 {
24
          margin: 0;
25
          font-size: 24px;
26
          font-weight: bold;
27
      }
28

29
      /* 文本链接样式 */
30
      .header a {
31
          text-decoration: none;
32
          color: #333;
33
          font-size: 16px;
34
      }
35

36
      /* 搜索表单区域 */
37
      .search-form {
38
          display: flex;
39
          align-items: center;
40
          padding: 20px;
41
          background-color: #f9f9f9;
42
      }
43

44
      /* 表单控件样式 */
45
      .search-form input[type="text"], .search-form select {
46
          margin-right: 10px;
47
          padding: 5px 10px;
48
          border: 1px solid #ccc;
49
          border-radius: 4px;
50
          width: 200px;
51
      }
52

53
      /* 按钮样式 */
54
      .search-form button {
55
          padding: 5px 15px;
56
          margin-left: 10px;
57
          background-color: #007bff;
58
          color: white;
59
          border: none;
60
          border-radius: 4px;
61
          cursor: pointer;
62
      }
63

64
      /* 清空按钮样式 */
65
      .search-form button.clear {
66
        background-color: #6c757d;
67
      }
68

69
      .table {
70
         min-width: 100%;
71
         border-collapse: collapse;
72
      }
73

74
      /* 设置表格单元格边框 */
75
      .table td, .table th {
76
        border: 1px solid #ddd;
77
        padding: 8px;
78
        text-align: center;
79
      }
80

81
      .avatar {
82
        width: 30px;
83
        height: 30px;
84
        object-fit: cover;
85
        border-radius: 50%;
86
      }
87

88
      /* 页脚版权区域 */
89
    .footer {
90
        background-color: #c2c0c0;
91
        color: white;
92
        text-align: center;
93
        padding: 10px 0;
94
        margin-top: 30px;
95
    }
96

97
    .footer .company-name {
98
        font-size: 1.1em;
99
        font-weight: bold;
100
    }
101

102
    .footer .copyright {
103
        font-size: 0.9em;
104
    }
105

106
    #container {
107
      width: 80%;
108
      margin: 0 auto;
109
    }
110
    </style>
111
</head>
112
<body>
113

114
  <div id="container">
115
    <!-- 顶栏 -->
116
    <div class="header">
117
      <h1>Tlias智能学习辅助系统</h1>
118
      <a href="#">退出登录</a>
119
    </div>
120

121
    <!-- 搜索表单区域 -->
122
    <form class="search-form" action="#" method="post">
123
      <input type="text" name="name" placeholder="姓名" />
124
      <select name="gender">
125
          <option value="">性别</option>
126
          <option value="male">男</option>
127
          <option value="female">女</option>
128
      </select>
129
      <select name="position">
130
          <option value="">职位</option>
131
          <option value="班主任">班主任</option>
132
          <option value="讲师">讲师</option>
133
          <option value="学工主管">学工主管</option>
134
          <option value="教研主管">教研主管</option>
135
          <option value="咨询师">咨询师</option>
136
      </select>
137
      <button type="submit">查询</button>
138
      <button type="reset" class="clear">清空</button>
139
    </form>
140

141
    <table class="table table-striped table-bordered">
142
      <thead>
143
          <tr>
144
              <th>姓名</th>
145
              <th>性别</th>
146
              <th>头像</th>
147
              <th>职位</th>
148
              <th>入职日期</th>
149
              <th>最后操作时间</th>
150
              <th>操作</th>
151
          </tr>
152
      </thead>
153
      <tbody>
154
          <tr>
155
              <td>令狐冲</td>
156
              <td>男</td>
157
              <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
158
              <td>讲师</td>
159
              <td>2021-03-15</td>
160
              <td>2023-07-30T12:00:00Z</td>
161
              <td class="btn-group">
162
                  <button>编辑</button>
163
                  <button>删除</button>
164
              </td>
165
          </tr>
166
          <tr>
167
              <td>任盈盈</td>
168
              <td>女</td>
169
              <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
170
              <td>学工主管</td>
171
              <td>2020-04-10</td>
172
              <td>2023-07-29T15:00:00Z</td>
173
              <td class="btn-group">
174
                  <button>编辑</button>
175
                  <button>删除</button>
176
              </td>
177
          </tr>
178
          <tr>
179
              <td>岳不群</td>
180
              <td>男</td>
181
              <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
182
              <td>教研主管</td>
183
              <td>2019-01-01</td>
184
              <td>2023-07-30T10:00:00Z</td>
185
              <td class="btn-group">
186
                  <button>编辑</button>
187
                  <button>删除</button>
188
              </td>
189
          </tr>
190
          <tr>
191
              <td>宁中则</td>
192
              <td>女</td>
193
              <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
194
              <td>班主任</td>
195
              <td>2018-06-01</td>
196
              <td>2023-07-29T09:00:00Z</td>
197
              <td class="btn-group">
198
                  <button>编辑</button>
199
                  <button>删除</button>
200
              </td>
201
          </tr>
202
      </tbody>
203
    </table>
204

205
    <!-- 页脚版权区域 -->
206
    <footer class="footer">
207
      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
208
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
209
    </footer>
210

211
  </div>
212

213
</body>
214
</html>

页面效果如下:

音乐

Record more, talk less!

音乐