## AI+JavaWeb开发入门

---

全网首发AI+JavaWeb开发入门，Tlias教学管理系统项目实战全套视频教程，从需求分析、设计、前后端开发、测试、程序优化到项目部署一套搞定

https://www.bilibili.com/video/BV1yGydYEE3H/

百度网盘下载地址

https://pan.baidu.com/s/1YppYAJbfbI9dfjSqQmIp4A&pwd=1234

在线讲义地址

https://heuqqdmbyk.feishu.cn/wiki/space/7413668442156498972?ccm_open_type=lark_wiki_spaceLink&open_tab_from=wiki_home

### 概述

JavaWeb是整个Web开发的基础课程 ，是为后期的<mark>分布式、微服务以及项目</mark>打下坚实基础的课程。掌握课程两大部分的内容：前端开发、后端开发，学完可独立开发类似于CRM这样的企业管理系统、以及中小型的电商网站，且掌握从前期的需求分析到数据库设计，到编码实现、接口联调以及项目部署等整个完整开发部署流程。

<figure><img src="/AiJavaWeb/imgs/jwai01-01.png"><figcaption>图1 JavaWeb+AI<mark>(75:58:12)</mark></figcaption></figure>

阿里通义灵码 AI001 精通200多种编程语言！

#### AI时代-未来已来 Java+AI

* 编写代码：基础代码AI辅助编写，效率高，写的多
* 新技术学习：根据具体的需要结合着AI，快速上手新技术。
* 问题解决：基于AI解决复杂业务问题，优化程序，修复Bug
* 分析设计：基于AI设计数据库及业务方案，简单快捷。

<figure><img src="/AiJavaWeb/imgs/jwai01-02.png"><figcaption>图2 JavaWeb+AI</figcaption></figure>

* 自身能力大幅提升
* 软件变得更智能

#### 项目二：AIGC应用与智能体开发(线下面授课时：8天)

主要内容：

* 大模型私有部署：Ollama介绍及安装、运行通义千问大模型、LobeChat集成Ollama搭建ChatBot、MaxDB，与Ollama搭建知识库、Continue集成Ollama实现智能代码提示;
* AIGC绘图：StableDiffusion、Comfyui、文生图案例、星图Al项目:
* AIGC智能客服：SpringAI、聊天模型、向量化、LangChain4j、Milvus、智能体开发；

特色亮点

* 1.全网首套专注于Java与Al结合(AIGCforJava)的实战课程，填补了市场上相关领域的空白。
* 2.提供六大创新案例（如机器人应用、Codepilot应用、知识库应用等）的实战演练，让学员在真实项目环境中掌握AI技术的应用，丰富AI项目经验。
* 3.深入讲解并实践SpringAI、SpringCloudAlibaba、LangChain等三大主流AIGC应用开发框架，帮助学员掌握构建高效、可扩展AI应用的核心技术。
* 4.课程聚焦模型私有化部署的关键技术，包括基于RAG构建私有数据域和基于FineTuning微调大模型+私有化部署的能力，增强学员在特定领域内的模型优化与部署能力。
* 5.课程提供丰富的业务解决方案实战内容，如基于Ollama的快速构建ChatBot、知识库、代码提示应用等，让学...



#### 什么是Web

Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。

<figure><img src="/AiJavaWeb/imgs/jwai01-03.png"><figcaption>图3 淘宝、京东、唯品会电子商务和CRM、OA、WMS管理系统</figcaption></figure>

<figure><img src="/AiJavaWeb/imgs/jwai01-04.png"><figcaption>图4 前端、服务器端、数据库端</figcaption></figure>



<figure><img src="/AiJavaWeb/imgs/jwai01-05.png"><figcaption>图5 课程安排（20天6阶段）</figcaption></figure>

课程安排

| **阶段**        | **时长** | **内容**                                                     |
| --------------- | -------- | ------------------------------------------------------------ |
| Web前端基础     | 2天      | HTML、CSS、JS、Vue3、Ajax                                    |
| Web后端开发基础 | 4天      | <mark>Maven、SpringBoot、Spring、SpringMVC、Mybatis、OSS、MySQL、Apifox</mark> |
| Web后端开发实战 | 6天      | 部门、员工、班级、学员、报表统计、登录认证、...              |
| Web后端开发进阶 | 2天      | AOP,SpringBoot原理,自定义Starter,Maven高级                   |
| Web前端进阶     | 4天      | Vue工程化、ElementPlus、Tlias案例                            |
| 项目部署        | 2天      | Linux、Docker                                                |



#### 课程收获

-- 基于SpringBoot3+Vue3设计、开发、部署单体项目的能力

* 数据库设计、应用能力
* 服务端接口开发能力
* 前端项目开发能力
* 前后端项目部署能力
  



<figure><img src="/AiJavaWeb/imgs/jwai01-06.png"><figcaption>图6 课程特色</figcaption></figure>



<figure><img src="/AiJavaWeb/imgs/jwai01-07.png"><figcaption>图7 课程收获</figcaption></figure>



##### Java+AI (Java基础入门到大牛)资料下载

https://pan.baidu.com/s/1aqcVtiPGPTIOPJNQeREhnw&pwd=9ydw



## day1 Web前端开发（AI）

---

### 1.1 初始Web前端

##### 网页由那几部分组成？

> 文字、图片、视频、音频、超链接

##### 我们看到的网页，背后本质是什么？

> 程序员写的前端代码

##### 前端代码如何转换成用户眼中的网页？

* 通过浏览器转换成用户看到的网页。
* 浏览器对代码进行解析渲染的部分，称为浏览器内核。

<figure><img src="/AiJavaWeb/imgs/jwai01-08.png"><figcaption>图8 常见浏览器</figcaption></figure>



##### Web标准

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

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

<figure><img src="/AiJavaWeb/imgs/jwai01-09.png"><figcaption>图9 Web标准(H5,C3,JS,vue,Element+,Axios)</figcaption></figure>



##### Web前端课程安排

Web前端基础(2天)

* HTML+CSS+JS
* Vue3+Ajax

Web前端实战(4天)

* Vue工程化+ElementPlus
* Vue3案例

##### 小结

一个网页由哪几个部分组成? 各自的职责?

* HTML: 负责网页的结构
* CSS : 负责网页的表现
* JavaScript: 负责网页的行为(动作)



### 1.2 HTML（结构）+CSS（样式）

##### 什么是HTML

HTML（HyperText Markup Language）：超文本标记语言。

* 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
* 标记语言：由标签 "<标签名>" 构成的语言
  * HTML标签都是预定义好的。例如：使用```<h1>```展示标题，使用```<img>```展示图片，使用```<video>```展示视频。
  * HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

  
  

<figure><img src="/AiJavaWeb/imgs/jwai01-10.png"><figcaption>图10 HTML标签</figcaption></figure>



##### 什么是CSS

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



MDN HTML网址：developer.mozilla.org/zh-CN/docs/Web/HTML

MDN CSS网址：developer.mozilla.org/zh-CN/docs/Web/CSS

#### ① HTML快速入门

##### 01.快速入门.html

```html
<html>
  <head>
   <title>HTML快速入门</title>
  </head>
  <body>
    <h1>Hello HTML快速入门(杜老师)</h1>
    <img src="img/1.png">
  </body>
</html>
```

网页头部：用来存放给==浏览器看==的信息，如：CSS样式
网页主体：用来存放给==用户看==的信息，如：文字、图片、视频



<figure><img src="/AiJavaWeb/imgs/jwai01-11.png"><figcaption>图11 HTML小结</figcaption></figure>

#### ② 前端开发工具

* Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
* VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
* VS Code 提供了非常强大的插件库，大大提高了开发效率。
* 官网： https://code.visualstudio.com    VSCodeUserSetup-x64-1.89.1.exe  Stable：稳定版  | Insiders：内测版

##### VSCode安装使用

* 不仅要安装软件，还得安装插件
* 注意：安装在一个没有中文、不带空格的目录下
* 注意：由于安装了IDEA快捷键映射插件，VSCode快捷键与IDEA一致

##### VSCode插件安装

|      | 名称                           | 说明                                                         |
| ---- | ------------------------------ | ------------------------------------------------------------ |
| 1    | Chinese (Simplified) Langu...  | 适用于VS Code的中文（简体）语言包                            |
| 2    | HTML CSS Support               | 在编写样式表的时候，自动补全功能大大缩减了编写时间。v2.0.13  |
| 3    | JavaScript (ES6) code snippets | 支持ES6语法提示 v1.8                                         |
| 4    | Mithril Emmet                  | 一个能大幅度提高前端开发效率的一个工具，用于补全代码 v0.7.7  |
| 5    | Path Intellisense              | 路径提示插件 v2.10                                           |
| 6    | Vue 3 Snippets                 | 在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。v1.0.4 |
| 7    | Auto Close Tag                 | 自动闭合HTML/XML标签 v0.5.15                                 |
| 8    | Auto Rename Tag                | 自动完成另一侧标签的同步修改 v0.1.10                         |
| 9    | open in browser                | 直接在浏览器中打开html，快捷键与鼠标右键快速在浏览器中打开html文件v2.0.0 |
| 10   | Live Server                    | 一个实时服务器实时查看开发的网页或项目效果。v5.7.9           |
| 11   | Vue Official                   | 一个专门为 Vue 3 构建的语言支持插件。v3.0.5                  |
| 12   | File Utils                     | File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。v3.10.3 |
| 13   | IntelliJ IDEA Keybindings      | 可在VSCode中使用IDEA的快捷键。v1.7.2                         |
| 14   | MarsCode AI                    | MarsCode 是字节跳动豆包旗下的智能编程助手，提供以智能代码补全为代表的核心能力，支持主流编程语言及 IDE，能在编码过程中提供单行或整个函数的建议，同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能，提升编码效率与质量。v1.2.38 |
| 15   | TONGYI Lingma                  | 通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。v2.5.17 |

##### AI插件用户注册

MarsCode AI(TRAE AI)
https://www.marscode.cn/home?utm_source=mkt&utm_medium=cpaitcast&utm_campaign=hmcxy

通义灵码  https://tongyi.aliyun.com/lingma

https://account.aliyun.com/register/qr_register.htm?
spm=5176.29741907.J_4VYgf18xNITAyFFbOuOQe.d_register_1.e939154ab73d0j&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2F

##### VSCode配置 setting.json

```json
{
  "workbench.colorTheme": "Default Light+",
  "workbench.statusBar.visible": false,
  "editor.fontFamily": "'Courier New', Consolas, monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.8,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.minimap.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.confirmSync": false,
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}
```



<figure><img src="/AiJavaWeb/imgs/jwai01-12.png"><figcaption><mark>图12 VSCode安装验证</mark></figcaption></figure>

##### 自定义 HTML 代码片段

1. 打开 VS Code，按下 `Ctrl+Shift+P` (Windows/Linux) 或 `Cmd+Shift+P` (Mac)
2. 输入并选择 "配置用户代码片段"
3. 选择 "html.json"（如果没有则创建）
4. 在打开的文件中添加自定义模板，例如：json

```json
{
  "Custom HTML Template": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>$1</title>",
      "  <script src=\"\"></script>",
      "</head>",
      "<body>",
      "  $2",
      "</body>",
      "</html>"
    ],
    "description": "自定义HTML5模板"
  }
}
```

1. 保存后，在 HTML 文件中输入你设置的 prefix（如 "html5"）并按 Tab 键即可生成模板

##### 02.html入门.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<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="imgs/1.png" title="这是杜老师的照片">

  <!-- 定义一个一级标题：HTML入门 -->
  <h1>HTML入门</h1>

  <!-- 定义一个图片 imgs/1.png -->
  <img src="imgs/1.png" alt="这是杜老师的照片">

</body>
</html>
```



#### ③ 常见标签 & 样式

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

* 央视新闻-标题
* 央视新闻-正文

#### (3.1) 央视新闻-标题

html页面在渲染展示的时候，是从上往下逐行解析展示的。
所以，编写页面的时候，根据页面的布局，从上往下编写。

* 标题标签：```<h1> - <h6>```
* 超链接标签：```<a href="" target="">...</a>```
  * href：指定资源访问的url
  * target：指定在何处打开资源链接
    * _self：默认值，在当前页面打开
    * _blank：在空白页面打开



```html
<body>
  <!-- 定义一个标题，标题内容为：推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1>推进长江十年禁渔 谱写长江大保护新篇章</h1>
  <!-- 定义一个超链接，里面显示 央视网 -->
  <a href="https://www.cctv.com/">央视网</a> 2024年05月15日 20:07
</body>
```

##### 03.央视新闻-标题-排版.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>央视新闻-标题-排版</title>
  <script src=""></script>
</head>
<body>
  <!-- 定义一个标题：推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1 class="title">推进长江十年禁渔 谱写长江大保护新篇章</h1>
  <!-- 定义一个超链接，里面显示 央视网 -->
  <!-- a 超链接标签：
        href：链接地址-url地址
        target：打开方式
        blank：新窗口打开
        _self：本窗口打开（默认) -->  
  <a href="https://www.cctv.com" target="_blank">央视网</a> <span>2024年05月15日 20:07</span>
</body>
</html>
```

##### CSS引入方式：

* 行内样式：写在标签的style属性中（配合JavaScript使用）
* 内部样式：写在style标签中<mark>（可以写在页面任何位置，但通常约定写在head标签中）</mark>
* 外部样式：写在一个单独的.css文件中<mark>（需要通过 link 标签在网页中引入）</mark>

```html
<!-- 行内样式 -->
<span style="color: gray;">2024年05月15日 20:07</span>

<!-- 内部样式 -->
<style>
  span {
    color: gray;
  }
</style>


<!-- 外部样式 引入 -->
<link rel="stylesheet" href="css/news.css">

```

css/news.css

```css
span {
  color: gray;
}
```



##### 颜色表示形式：

| **表示方式**   | **属性值**    | **说明**                             | **示例**                           |
| -------------- | ------------- | ------------------------------------ | ---------------------------------- |
| 关键字         | 颜色英文单词  | red、green、blue                     | red、green、blue...                |
| 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 |

<figure><img src="/AiJavaWeb/imgs/jwai01-13.png"><figcaption>图13 CSS小结</figcaption></figure>

##### 04.央视新闻-标题-样式.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <!-- 方式二: 内部样式 -->
  <style>
    .span2{
      /* 关键字 */
      /* color: gray; */

      /* RGB表示法 */
      /* color: rgb(255, 120, 0); */

      /* RGBA表示法 */
      /* color: rgba(255, 120, 0, 0); */

      /* 十六进制表示法 */
      /* color: #0000ff; */
      color: #b2b2b2;
    }
  </style>

  <!-- 方式三: 外部样式 -->
  <link rel="stylesheet" href="css/news.css">
</head>
<body>
  <h1>央视新闻-标题-样式(杜老师)</h1>
  <hr>
  <!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

  <!-- 定义一个超链接, 里面展示 央视网 -->
  <a href="https://www.cctv.com" target="_blank">央视网</a> 

  <!-- 方式一: 行内样式 -->
  <span style="color: red;">2024年05月15日 20:07</span>

  <!-- 方式二: 内部样式 -->
  <span class="span2">2024年05月15日 20:07</span>
  <span class="span2">2025年08月04日 20:07</span>

    <!-- 方式三: 外部样式 -->
    <span id="span3">2024年05月15日 20:07</span>
</body>
</html>
```

##### css/news.css

```css
#span3{
  color: greenyellow;
}
```



##### 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>标签     |

##### 05.央视新闻-标题-样式(选择器).html

```html
<!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: #b2b2b2;
    }

    /* 类选择器 */
    .cls {
      color: #ff0000;
    }

    /* ID选择器 */
    #time {
      color: #09b967;
    }

    a {
      /* 去除超链接下方的下划线 */
      text-decoration: none;
    }
  </style>
</head>

<body>
  <h1>央视新闻-标题-样式-选择器(杜老师)</h1>
  <hr>
  <!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

  <!-- 定义一个超链接, 里面展示 央视网 -->
  <a href="https://www.cctv.com" target="_blank">央视网</a> <br>

  元素选择器：<span >2024年05月15日 20:07</span> <span>666666</span><br>
  类选择器：<span class="cls" >2024年05月15日 20:07</span><br>
  ID选择器：<span id="time">2024年05月15日 20:07</span>

</body>
</html>
```



##### CSS选择器小结

<figure><img src="/AiJavaWeb/imgs/jwai01-14.png"><figcaption>图14 CSS选择器小结</figcaption></figure>



#### (3.2) 央视新闻-正文

| 标签                 | 作用              | 属性说明                                |
| -------------------- | ----------------- | --------------------------------------- |
| ```<video>```        | 视频              | src：指定视频的url（绝对路径/相对路径） |
|                      |                   | controls：是否显示播放控件              |
|                      |                   | width：宽度（像素/相对于父元素百分比）  |
|                      |                   | height：高度（像素/相对于父元素百分比） |
| ```<img>```          | 图片              | src, width，height                      |
| ```<p>```            | 段落              |                                         |
| ```<b> / <strong>``` | <b>加粗</b>       | ```<strong> ```具有强调语义             |
| ```<u> / <ins>```    | 下划线            | ```<ins>``` 具有强调语义                |
| ```<i> / <em>```     | <em>倾斜</em>     | ```<em>``` 具有强调语义                 |
| ```<s> / <del>```    | <del>删除线</del> | ```<del> ```具有强调语义                |

##### 06.央视新闻-正文-排版.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <style>
    #time {
      color: #b2b2b2;
    }

    a {
      /* 去除超链接下方的下划线 */
      text-decoration: none;
    }
  </style>
</head>

<body>
  <h1>央视新闻-正文-排版(杜老师)</h1>
  <hr>
  <!-- --------------------------- 新闻标题 -------------------------------- -->
  <!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

  <!-- 定义一个超链接, 里面展示 央视网 -->
  <a href="https://www.cctv.com" target="_blank">央视网</a> 

  <span class="cls" id="time">2024年05月15日 20:07</span>
  <br><br>

  <!-- --------------------------- 新闻正文 -------------------------------- -->
  <!-- 定义一个视频, 引入 video/news.mp4 -->
  <!-- video标签属性 
        src: 视频地址
        controls: 显示播放控件
        autoplay: 自动播放
        width: 视频宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放)
        height: 视频高度
          单位: 
            px: 像素
            %: 百分比 (相对于父元素的百分比)
  -->
  <video src="video/news.mp4" controls width="80%"></video>
  <p>
    新闻联播(音频播放):<audio src="audio/news.mp3" controls></audio>
  </p>
  
  <p>
    央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
  </p>

  <p>
    行走在长江沿线，科研人员发现很多可喜现象。
  </p>

  <!-- 定义一张图片, 引入 img/1.gif -->
  <!-- img标签属性:  
        src: 图片的访问地址
          1. 绝对路径
            1.1 绝对磁盘路径: C:\Users\Administrator\Desktop\img\1.gif (不推荐)
            1.2 绝对网络路径: https://www.baidu.com/img/1.gif
          2. 相对路径
            2.1 ./ : 当前目录 (可以省略) , 如: ./img/1.gif
            2.2 ../: 上一级目录
        width: 图片宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放)
        height: 图片高度
  -->
  <img src="imgs/1.gif" width="80%"></img>

  <p>
    在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
  </p>

  <p>
    在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
  </p>

  <p>
    在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
  </p>

  <img src="imgs/2.jpg" width="80%"></img>

  <p>
    水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
  </p>

  <p>
    实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
  </p>

  <img src="imgs/3.jpg" width="80%"></img>
  
  <p>
    按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
  </p>

  <p>
    实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
  </p>

  <img src="imgs/4.jpg" width="80%"></img>

  <p>
    安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
  </p>

  <p>
    在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
  </p>

  <p>
    在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
  </p>

  <img src="imgs/5.jpg" width="80%"></img>

  <p>
    长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
  </p>

</body>
</html>
```



##### 资源路径写法

* 绝对路径
  * 绝对磁盘路径（D:/xxx.jpg）
  * 绝对网络路径（https://xxx.jpg）
* 相对路径
  * 当前目录：./ (可以省略)
  * 上一级目录：../ 



##### 07.央视新闻-正文-样式.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <style>
    #time {
      color: #b2b2b2;
    }

    a {
      /* 去除超链接下方的下划线 */
      text-decoration: none;
    }

    p {
      /* 设置行高 */
      line-height: 2; /* 行高: 2倍行高 */
      
      /* 设置首行缩进 */
      text-indent: 2em; /* 首行缩进2个字符 */

      width: 80%;
    }
  </style>
</head>

<body>
  <h1>央视新闻-正文-样式(杜老师)</h1>
  <hr>
  <!-- --------------------------- 新闻标题 -------------------------------- -->
  <!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
  <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

  <!-- 定义一个超链接, 里面展示 央视网 -->
  <a href="https://www.cctv.com" target="_blank">央视网</a> 

  <span id="time">2024年05月15日 20:07</span>
  <br><br>

  <!-- --------------------------- 新闻正文 -------------------------------- -->
  <!-- 定义一个视频, 引入 video/news.mp4 -->
  <video src="video/news.mp4" controls width="80%"></video>

  <p>
    <!-- <b>央视网消息</b> -->
    <!-- <strong>&nbsp;&nbsp;&nbsp;&nbsp;央视网消息</strong> -->
    <strong>央视网消息</strong>
    （新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
  </p>

  <p>
    行走在长江沿线，科研人员发现很多可喜现象。
  </p>

  <!-- 定义一张图片, 引入 img/1.gif -->
  <img src="imgs/1.gif" width="80%"></img>

  <p>
    在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
  </p>

  <p>
    在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
  </p>

  <p>
    在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
  </p>

  <img src="imgs/2.jpg" width="80%"></img>

  <p>
    水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
  </p>

  <p>
    实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
  </p>

  <img src="imgs/3.jpg" width="80%"></img>
  
  <p>
    按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
  </p>

  <p>
    实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
  </p>

  <img src="imgs/4.jpg" width="80%"></img>

  <p>
    安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
  </p>

  <p>
    在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
  </p>

  <p>
    在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
  </p>

  <img src="imgs/5.jpg" width="80%"></img>

  <p>
    长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
  </p>

</body>
</html>
```




| 字符实体     | 属性/说明 |
| ------------ | --------- |
| ```&nbsp;``` | 空格      |
| ```&lt;```   | <         |
| ```&gt;```   | >         |

##### CSS属性：

* line-height：设置行高
* text-indent：首行缩进

如何设置html网页的整体页面占版面的70%，并居中显示。

```css
#content-container {
   width:70%;/*宽度:70%*/
   margin-left:auto; /* 居中显示 */
   margin-right:auto; /* 居中显示 */
}
```

##### 08.央视新闻-整体布局.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
  <style>
    #time {
      color: #b2b2b2;
    }

    a {
      /* 去除超链接下方的下划线 */
      text-decoration: none;
    }

    p {
      /* 设置行高 */
      line-height: 2; /* 行高: 2倍行高 */
      
      /* 设置首行缩进 */
      text-indent: 2em; /* 首行缩进2个字符 */
    }

    /* 整体版面居中显示 */
    #content-container {
      width: 60%; /* 宽度: 60% */
      /* margin: 0 auto; */
      margin-left: auto; /* 居中显示 */
      margin-right: auto; /* 居中显示 */
    }
  </style>
</head>

<body>

  <div id="content-container">
    <h1>央视新闻-整体布局(杜老师)</h1>
    <hr>
    <!-- --------------------------- 新闻标题 -------------------------------- -->
    <!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
    <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>

    <!-- 定义一个超链接, 里面展示 央视网 -->
    <a href="https://www.cctv.com" target="_blank">央视网</a> 

    <span class="cls" id="time">2024年05月15日 20:07</span>
    <br><br>

    <!-- --------------------------- 新闻正文 -------------------------------- -->
    <!-- 定义一个视频, 引入 video/news.mp4 -->
    <video src="video/news.mp4" controls width="100%"></video>

    <p>
      <strong>央视网消息</strong>
      （新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
    </p>

    <p>
      行走在长江沿线，科研人员发现很多可喜现象。
    </p>

    <!-- 定义一张图片, 引入 img/1.gif -->
    <img src="imgs/1.gif" width="100%"></img>

    <p>
      在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
    </p>

    <p>
      在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
    </p>

    <p>
      在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
    </p>

    <img src="imgs/2.jpg" width="100%"></img>

    <p>
      水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
    </p>

    <p>
      实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
    </p>

    <img src="imgs/3.jpg" width="100%"></img>
    
    <p>
      按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
    </p>

    <p>
      实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
    </p>

    <img src="imgs/4.jpg" width="100%"></img>

    <p>
      安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
    </p>

    <p>
      在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
    </p>

    <p>
      在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
    </p>

    <img src="imgs/5.jpg" width="100%"></img>

    <p>
      长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
    </p>
  </div>

</body>
</html>
```



##### 盒子模型

* 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

  

  <figure><img src="/AiJavaWeb/imgs/jwai01-15.png"><figcaption>图15 盒子</figcaption></figure>

  

* 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

  

<figure><img src="/AiJavaWeb/imgs/jwai01-16.png"><figcaption>图16 盒子模型</figcaption></figure>



##### 布局标签

网页开发中，会使用 div 和 span 这两个没有语义的布局标签。

* ```<div>``` <mark>块--方框</mark>标签：
  * 一行只显示一个（独占一行）
  * 宽度默认是父元素的宽度，高度默认由内容撑开
  * 可以设置宽高（width、height）
* ```<span>``` <mark>小段或小线段</mark>标签：
  * 一行可以显示多个
  * 宽度和高度默认由内容撑开
  * 不可以设置宽高（width、height）

<figure><img src="/AiJavaWeb/imgs/jwai01-17.png"><figcaption>图17 DIV与Span边框定义</figcaption></figure>

##### margin属性只能定义空白宽度，没有背景颜色定义？

`margin` 是 “透明的外部间距”，负责控制元素间的距离；

##### 09.盒子模型.html

```html
<!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>
    div {
      width: 400px; /* 宽度: 400像素; 默认是内容展示区域的宽度 */
      height: 300px; /* 高度: 300像素; 默认是内容展示区域的高度 */
      background-color: #ffff00;
      padding: 30px; /* 内边距: 30像素 */
      box-sizing: border-box;  /* 盒子模型: 边框+内边距+内容 */
      border: 20px solid #ff00ff; /* 边框: 20像素 */
      /* margin: 30px; 外边距: 30像素 */
      margin: 15px auto; /* 上下外边距: 15像素 左右居中*/
    } 
  </style>
</head>

<body>
  <h1>盒子模型(杜老师)</h1>
  <hr>
  <div id="div1">
    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 A A A A A A A A A A 
  </div>

  <div id="div2">
    B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B
  </div>

  <span>
    C C C C C C C C C C C C C C C C C C C C C C C C C C 
  </span>

  <span>
    D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D
  </span>
</body>
</html>
```



<figure><img src="/AiJavaWeb/imgs/jwai01-18.png"><figcaption>图18 盒子模型演示</figcaption></figure>

##### 盒子模型小结

<figure><img src="/AiJavaWeb/imgs/jwai01-19.png"><figcaption>图19 盒子模型小结</figcaption></figure>



#### (3.3)Tlias案例

参照页面原型，完成员工管理页面制作

##### 页面原型：

指在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。

<figure><img src="/AiJavaWeb/imgs/jwai01-20.png"><figcaption>图20 Tlias案例-页面原型-员工管理</figcaption></figure>

##### 1) 顶部导航栏

##### <mark>AI提示词</mark>

```tex
你是一名前端开发工程师，现需要制作一个HTML页面，这个页面共分为4个部分，先实现第一个部分-顶部导航栏。具体需求如下：
1.内容：要展示一个醒目（加粗加粗展示）的标题，标题内容：T1ias智能学习辅助系统；还要展示一个“退出登录”的超链接。
2．布局：标题和退出登录的超链接，展示在一行里面。标题居左显示，退出登录的超链接居右展示。
3.给整个顶部导航栏，设置一个灰色的背景色。
请帮我生成这个HTML页面。

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

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


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

##### flex弹性布局

* flex是flexible Box的缩写，意为"弹性布局"，是一种<mark>一维</mark>的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
* 通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式。



| **属性**                     | **取值**      | **含义**                          |
| ---------------------------- | ------------- | --------------------------------- |
| display                      | flex          | 使用flex弹性布局                  |
| flex-direction               | row           | 主轴方向为x轴，水平向右。（默认） |
| （设置主轴）                 | column        | 主轴方向为y轴，垂直向下。         |
| justify-content              | flex-start    | 从头开始排列                      |
| （子元素在主轴上的对齐方式） | flex-end      | 从尾部开始排列                    |
|                              | center        | 在主轴居中对齐                    |
|                              | space-around  | 平分剩余空间                      |
|                              | space-between | 先两边贴边，再平分剩余空间        |

##### 11.flex布局.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex弹性布局</title>
  <style>
    /* body {
      margin: 0;
    } */
    #container {
      background-color: #f1eeee;
      width: 500px;
      height: 300px;

      display: flex; /* flex弹性布局 */
      flex-direction: row; /* 默认为row水平布局, 设置主轴 */
      /* flex-start: 从头开始排列 */
      /* flex-end: 从尾部开始排列 */
      /* center: 在主轴上居中对齐 */
      /* space-around: 平分剩余空间 */
      /* space-between: 先两边贴边, 再平分剩余空间 */
      justify-content: space-around; 
    }
    .item {
      background-color: rgb(184, 246, 184);
      border: 1px solid rgb(141, 138, 138);
      width: 100px;
      height: 50px;
      text-align: center;
      /* 上下居中 */
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>flex弹性布局(杜老师)</h1>
  <hr>
  <div id="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>
```

##### 2) 搜索表单区域

* 表单：在网页中主要负责数据采集功能，如注册、登录等数据采集。
* 标签：```<form>```
* 表单项：不同类型的 input元素、下拉列表、文本域等。
  * ```<input>```:定义表单项，通过type属性控制输入形式(text/password/.)
  * ```<select>```：定义下拉列表
  * ```<textarea>```：定义文本域
* 属性；
  * action：规定当提交表单时向何处发送表单数据，URL
  * method：规定用于发送表单数据的方式。GET、POST

<figure><img src="/AiJavaWeb/imgs/jwai01-21.png"><figcaption>图21 表单</figcaption></figure>



##### 12.表单标签.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单标签</title>
</head>
<body>
  <!-- form表单:
        action: 表单数据提交的url地址
        method: 提交方式
          get: 默认, 表单数据会出现在url后面, 形式: /save?name=Tom&age=18
            特点:
              1. 如果表单中包含了隐私数据, get方式并不安全, 不推荐使用该方式.
              2. 在浏览器中get请求的大小是有限制的, 不适合提交大数据量的表单.
          post: 表单数据会在消息体/请求体中提交到服务器
            特点: 
              1. 安全.
              2. 请求大小没有限制
      注意: 表单项要想能够采集数据, 必须得设置name属性, 表示当前表单项的名字
  -->
  <h1>表单标签(杜老师)</h1>
  <hr>  
  <form action="/save" method="post">
    姓名: <input type="text" name="name">
    年龄: <input type="text" name="age">
    <input type="submit" value="提交">
  </form>
</body>
</html>
```



<figure><img src="/AiJavaWeb/imgs/jwai01-22.png"><figcaption>图22 表单标签小结</figcaption></figure>

##### 表单项标签

```tex
<input> 的type属性：text、password、radio、checkbox、file、date、datetime-local、time、hidden、button、submit
<select> 定义下拉列表
<textarea> 定义文本域
```



| **type取值**             | **描述**                             |
| ------------------------ | ------------------------------------ |
| text                     | 默认值，定义单行的输入字段           |
| password                 | 定义密码字段                         |
| radio                    | 定义单选按钮                         |
| checkbox                 | 定义复选框                           |
| file                     | 定义文件上传按钮                     |
| date/time/datetime-local | 定义日期/时间/日期时间               |
| hidden                   | 定义隐藏域                           |
| submit / reset / button  | 定义提交按钮 / 重置按钮 / 可点击按钮 |

<figure><img src="/AiJavaWeb/imgs/jwai01-23.png"><figcaption>图23 表单项标签</figcaption></figure>



##### 13.表单项标签.html

```html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>
    <h1>HTML-表单项标签(杜老师)</h1>
    <hr>
<!-- value: 表单项提交的值 -->
<form action="/save" method="post">
     姓名: <input type="text" name="name"> <br><br>

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

     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     
     图像: <input type="file" name="image">  <br><br>

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

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

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

     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>

     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>
```



##### 14.Tlias案例-搜索表单区域.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-around;
            gap: 10px; /* 控件之间的间距 */
            padding: 20px 0;
            background-color: #ffe2de;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 300px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <h1>Tlias智能学习辅助系统(杜老师)</h1>
        <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <!-- form表单标签: 
            action: 表单提交的地址 - url
            method: 表单提交的方式 - get(默认) / post
                get: 提交时, 表单数据会在url后提交到服务端; 比如: /search?name=Tom&gender=2&position=3 ; 
                     get方式提交数据长度有限制, 不能提交大量数据; get方式不安全;
                post: 提交时, 表单数据会在请求体(消息体)中提交到服务端; 比如: /search -- name=Cat&gender=1&position=2
                     post方式提交数据长度无限制; post方式安全;
    -->
    <form class="search-form" action="/search" method="post">
        <label >姓名：
        <input type="text" name="name" placeholder="请输入姓名"></label>

        <label>性别：
        <select name="gender">
            <option value=""></option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select></label>

        <label>职位：
        <select name="position">
            <option value=""></option>
            <option value="1">班主任</option>
            <option value="2">讲师</option>
            <option value="3">学工主管</option>
            <option value="4">教研主管</option>
            <option value="5">咨询师</option>
        </select></label>

        <label><button type="submit">查询</button>
        <button type="reset">清空</button></label>
    </form>
</body>
</html>
```



<figure><img src="/AiJavaWeb/imgs/jwai01-24.png"><figcaption>图24 表单项标签小结</figcaption></figure>



##### 3) 表格数据展示区域

##### 表格标签：

| **标签** | **描述**                                                     |
| -------- | ------------------------------------------------------------ |
| ```<table>```  | 定义表格整体                                                 |
| ```<thead>```  | 用于定义表格头部(可选)                                       |
| ```<tbody>```  | 定义表格中的主体部分(可选)                                   |
| ```<tr>```     | 表格的行，可以包裹多个 <td>                                  |
| ```<td>```     | 表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th> |

##### 15.Tlias案例-表格数据展示区域.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px; /* 控件之间的间距 */
            margin: 20px 0;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 300px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd; /* 边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 左对齐 */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .avatar {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <h1>Tlias智能学习辅助系统(杜老师)</h1>
        <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="/search" method="post">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名">

        <label for="gender">性别：</label>
        <select id="gender" name="gender">
            <option value=""></option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>

        <label for="position">职位：</label>
        <select id="position" name="position">
            <option value=""></option>
            <option value="1">班主任</option>
            <option value="2">讲师</option>
            <option value="3">学工主管</option>
            <option value="4">教研主管</option>
            <option value="5">咨询师</option>
        </select>

        <button type="submit">查询</button>
        <button type="reset">清空</button>
    </form>

    <!-- 表格展示区 -->
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>头像</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
                <th>操作</th>
            </tr>
        </thead>

        <!-- 表格主体内容 -->
        <tbody>
            <tr>
                <td>令狐冲</td>
                <td>男</td>
                <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
                <td>讲师</td>
                <td>2021-06-15</td>
                <td>2024-09-16 15:30</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>
            <tr>
                <td>任盈盈</td>
                <td>女</td>
                <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
                <td>咨询师</td>
                <td>2021-07-20</td>
                <td>2024-09-17 09:00</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>
            <tr>
                <td>向问天</td>
                <td>男</td>
                <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                <td>教研主管</td>
                <td>2021-05-01</td>
                <td>2024-09-15 17:45</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>
            <tr>
                <td>任我行</td>
                <td>男</td>
                <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                <td>教研主管</td>
                <td>2021-05-01</td>
                <td>2024-09-15 17:45</td>
                <td class="action-buttons">
                    <button type="button">编辑</button>
                    <button type="button">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

</body>
</html>
```



##### 4) 底部版权区域

##### 16.Tlias案例-底部版权区域.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tlias智能学习辅助系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #b5b3b3; /* 灰色背景 */
            
            display: flex; /* flex弹性布局 */
            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */
            align-items: center; /* 垂直居中 */
        }
        .navbar h1 {
            margin: 0; /* 移除默认的上下外边距 */
            font-weight: bold; /* 加粗 */
            color: white;
            /* 设置字体为楷体 */
            font-family: "楷体";
        }
        .navbar a {
            color: white; /* 链接颜色为白色 */
            text-decoration: none; /* 移除下划线 */
        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px; /* 控件之间的间距 */
            margin: 20px 0;
        }
        .search-form input[type="text"], .search-form select {
            padding: 5px; /* 输入框内边距 */
            width: 260px; /* 宽度 */
        }
        .search-form button {
            padding: 5px 15px; /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd; /* 边框 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 左对齐 */
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .avatar {
            width: 30px;
            height: 30px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #b5b3b3; /* 灰色背景 */
            color: white; /* 白色文字 */
            text-align: center; /* 居中文本 */
            padding: 10px 0; /* 上下内边距 */
            margin-top: 30px;
        }

        #container {
            width: 80%; /* 宽度为80% */
            margin: 0 auto; /* 水平居中 */
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <h1>Tlias智能学习辅助系统(杜老师)</h1>
            <a href="#">退出登录</a>
        </div>

        <!-- 搜索表单区域 -->
        <form class="search-form" action="/search" method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入姓名">

            <label for="gender">性别：</label>
            <select id="gender" name="gender">
                <option value=""></option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>

            <label for="position">职位：</label>
            <select id="position" name="position">
                <option value=""></option>
                <option value="1">班主任</option>
                <option value="2">讲师</option>
                <option value="3">学工主管</option>
                <option value="4">教研主管</option>
                <option value="5">咨询师</option>
            </select>

            <button type="submit">查询</button>
            <button type="reset">清空</button>
        </form>

        <!-- 表格展示区 -->
        <table>
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>头像</th>
                    <th>职位</th>
                    <th>入职日期</th>
                    <th>最后操作时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <!-- 表格主体内容 -->
            <tbody>
                <tr>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
                    <td>讲师</td>
                    <td>2021-06-15</td>
                    <td>2024-09-16 15:30</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>任盈盈</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
                    <td>咨询师</td>
                    <td>2021-07-20</td>
                    <td>2024-09-17 09:00</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>向问天</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>任我行</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>教研主管</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>田伯光</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
                    <td>班主任</td>
                    <td>2021-06-15</td>
                    <td>2024-09-16 15:30</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>不戒</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td>
                    <td>班主任</td>
                    <td>2021-07-20</td>
                    <td>2024-09-17 09:00</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>左冷禅</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>定逸</td>
                    <td>女</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>班主任</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>东方兄弟</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>讲师</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>金庸</td>
                    <td>男</td>
                    <td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td>
                    <td>咨询师</td>
                    <td>2021-05-01</td>
                    <td>2024-09-15 17:45</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 页脚版权区域 -->
        <footer class="footer">
            <p>杜氏教育工作室</p>
            <p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
        </footer>
    </div>
</body>
</html>
```



#### 课程总结

##### HTML小结

| **类别**       | **标签**                                   | **说明**                                |
| -------------- | ------------------------------------------ | --------------------------------------- |
| 文本处理标签   | ```<h1> - <h6>```                          | 一级标题 - 六级标题                     |
|                | ```<br/>、<p>```                           | 换行、段落                              |
|                | ```<strong>、<em>、<ins>、<del>```         | 文本加粗、倾斜、下划线、删除线          |
|                | ```<a href="...">```                       | 超链接 （属性：href、target）           |
| 图片音视频标签 | ```<img src="...">```                      | 图片（路径：绝对路径、相对路径）        |
|                | ```<audio src="...">、<video src="...">``` | 音频、视频                              |
| 布局标签       | ```<div>、<span>```                        | 没有语义的布局标签，配合CSS实现页面布局 |
| 表格标签       | ```<table>、<thead>、<tbody>```            | 表格、表头、表格主体                    |
|                | ```<tr> / <th>、<td>```                    | 行 / 单元格                             |
| 表单标签       | ```<form>```                               | 定义表单（属性：action、method）        |
|                | ```<input type="text/button">```           | 表单项（文本输入框、按钮...）           |
|                | ```<select> / <option>```                  | 表单项（下拉列表/选项）                 |

##### CSS小结

| **类别**        | **属性**                                                     | **说明** |
| --------------- | ------------------------------------------------------------ | -------- |
| 盒子模型        | 作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示 |          |
| width、height   | 高度、宽度                                                   |          |
| box-sizing      | 高度和宽度的计算方式；content-box，border-box                |          |
| padding         | 内边距（上、右、下、左；上下、左右）                         |          |
| border          | 边框                                                         |          |
| margin          | 外边距（上、右、下、左；上下、左右）                         |          |
| flex弹性布局    | 作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。 |          |
| display         | flex：使用flex布局                                           |          |
| flex-direction  | 设置主轴方向（row：x轴，水平方向；column：y轴，垂直方向）    |          |
| justify-content | 子元素在主轴上的对齐方式                                     |          |



<mark>提示:</mark> HTML标签和CSS属性都是固定的，所以前端页面制作我们可以直接基于AI辅助开发，也可以参照官方文档。

##### 本章首页index.html

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>day01 HTML+CSS</title>
</head>
<body>
  <h1>ch1 HTML+CSS(杜老师)</h1>
  <hr>
  <p><a href="01.html入门.html" target="_self">01.html入门</a></p>
  <p><a href="02.html入门.html" target="_self">02.html入门</a></p>
  <p><a href="03.央视新闻-标题-排版.html" target="_self">03.央视新闻-标题-排版</a></p>
  <p><a href="04.央视新闻-标题-样式.html" target="_self">04.央视新闻-标题-样式</a></p>
  <p><a href="05.央视新闻-标题-样式(选择器).html" target="_self">05.央视新闻-标题-样式(选择器)</a></p>
  <p><a href="06.央视新闻-正文-排版.html" target="_self">06.央视新闻-正文-排版</a></p>
  <p><a href="07.央视新闻-正文-样式.html" target="_self">07.央视新闻-正文-样式</a></p>
  <p><a href="08.央视新闻-整体布局.html" target="_self">08.央视新闻-整体布局</a></p>
  <p><a href="09.盒子模型.html" target="_self">09.盒子模型</a></p>
  <p><a href="10.Tlias案例-顶部导航栏.html" target="_self">10.Tlias案例-顶部导航栏</a></p>
  <p><a href="11.flex布局.html" target="_self">11.flex布局</a></p>
  <p><a href="12.表单标签.html" target="_self">12.表单标签</a></p>
  <p><a href="13.表单项标签.html" target="_self">13.表单项标签</a></p>
  <p><a href="14.Tlias案例-搜索表单区域.html" target="_self">14.Tlias案例-搜索表单区域</a></p>
  <p><a href="15.Tlias案例-表格数据展示区域.html" target="_self">15.Tlias案例-表格数据展示区域</a></p>
  <p><a href="16.Tlias案例-底部版权区域.html" target="_self">16.Tlias案例-底部版权区域</a></p>
  <hr>
  <p><a href="/24ssm.html" target="_self">返回课程首页</a></p>
</body>
</html>
```