JavaWeb 笔记（一）html

末蓝、 2024-04-18 19:18 3阅读 0赞

### 个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有) ###

### 一、B/S 软件的结构 ###

**C / S 结构**，即Client/Server(客户机/服务器)结构，是大家熟知的软件系统体系结构，通过将任务合理分配到Client端和Server端，降低了系统的通讯开销，可以充分利用两端硬件环境的优势。开发C/S架构可以采用多种语言，包括Java,C++,C\#，以及Dephi等;

**B / S 结构**，即Browser/Server(浏览器/服务器)结构，是随着Internet技术的兴起，对[C/S结构][C_S]的一种变化或者改进的结构。在这种结构下，用户界面完全通过WWW浏览器实现。前端 在大部分企业就是做浏览器端展现相关的工作，会用到html,css,js,ps,ai等等，而“后端”的主要工作室程序开发、数据处理了，比如：php，asp，mysql，mssql。

> 简而言之：
> 
>  *     C / S  client     客户端    server服务器
>  *     B / S  broswer 浏览器    server服务器（Tomcat服务器）

图解如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70][]

### 二、前端的开发流程示意： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1][]

### 三、网页的组成部分 ###

页面由三部分内容组成：

> 分别是内容（结构）、表现、行为；
> 
>  *  内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们使用 html 技术来展示；
>  *  表现 ，指的是这些内容在页面上的展示形式。比如说，布局、颜色、大小等等。一般使用CSS 技术实现；
>  *  行为 ， 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现 。

### 四、HTML 简介 ###

Hyper Text Markup Language （**超文本标记语言**）   简写：HTML

Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
    
    通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

### 五、用 Eclipse  创建html  文件 ###

1、先创建一个静态的 web 工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 4][]

当出现如下图，说明工程创建成功。

![20190910234120730.png][]

WebContent目录是用来存放web工程的资源目录，比如说:

> html页面，js文件，css文件，jsp文件，等等，很多资源文件都放在这个目录下。

2、在 WebContent 目录下创建一个 html 页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 7][]

修改 html 模板内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 9][]

模板内容：

第一个html 页面实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
        
    	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	    <title>hello_javaweb</title>
        </head>
        <body>
    		hello -- javaweb
        </body>
    </html>

**注：**

> Java 文件是需要先编译，再由 java 虚拟机跑起来。 但 html 文件它不需要编译，直接由浏览器进行解析执行。

### 七、 html 文件的书写规范 ###

<html>						表示内容的开始
    <head>					
    <title></title>			页面标题
    </head>
    <body>					
    </body>
    </html>						表示内容的结束
    
    
    Html 的代码注释

### 八、html 标签介绍 ###

1、标签的格式：

>  <标签名> 封装的数据</标签名>

2、标签名大小写不敏感

3、标签拥有自己的属性

>  *   分为基本属性： bgcolor="red"        可以修改简单的样式效果
>  *   事件属性： οnclick="alert('你好！');"      可以做页面交互的响应

4、标签又分为，单标签和双标签

>  *   单标签格式：  <标签名/>
>  *   双标签格式：<标签名> ...封装的数据 ...</标签名>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 10][]

**标签语法：**

> 1.  标签不能交叉嵌套                              正确：<div><span>hello，JavaWeb</span></div>                         
> 2.  标签必须正确关闭                              正确：<div>hello，JavaWeb</div>
> 3.  没有文本内容的标签                          正确：<br />
> 4.  属性必须有值，属性值必须加引号     正确：<font color=*"blue"*>hello，JavaWeb</font>
> 5.  注释不能嵌套                                     正确： <br/>

注意事项：

>         **html 代码不是很严谨，有时候标签不闭合，也不会报错**

### **九、常用标签介绍 **  ###

**1、font 字体标签**

> font标签是字体标签，可以在html页面上显示文本，并修改文本的字体，字号，以及颜色

***需求 1***：在网页上显示 我是字体标签，并修改字体为 宋体，颜色为红色

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Insert title here</title>
    	</head>
    	<body>
    				
    		<font size="7" face="宋体" color="red">我是字体标签</font>		
    	</body>
    </html>

**2、特殊字符**

特殊字符：
                <           是<
                >           是>
                空格

***需求 1***：把 <br/> 换行标签 编程文本 转换成字符显示在页面上

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
       
        我是 <br > 标签<br/>
        世界很            大！
    </body>
    </html>

**3、标题标签**

h1 - h6 都是标题标签
    		h1 最大
    		h6 最小
    		   align	对齐属性
    			left	左（默认）
    			center	中
    			right	右

***需求1***： 演示标题1 到 标题6

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 11][]

**4、超链接**

a  标签是超链接标签     
                href      设置链接的地址
                target    设置哪个目标进行跳转
                    _self     当前窗口（默认值)
                    _blank    新窗口

需求1： 创建 三个普通的超链接

<body>
    
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com" target="_self">百度 (_self)</a>
        <a href="http://www.baidu.com" target="_blank">百度（_blank)</a>
    </body>

**5、列表标签**

无序列表 由  ul  和  li 组成
        ul    无序列表
            type 属性设置列表项前面的符号
        li    是列表项

**需求1：**使用无序列表的方式，把 四大天王 , 刘德华、黎明、张学友、郭富城 展示出来

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 12][]

**6、 img 标签**

**说明：** img 可以用来展示一张图片

img 标签的使用：
    
        img 标签是图像标签，可以用来显示图片
            alt 设置当地址所指示的图片不存在的时候，用来替代显示的文本内容
            src 设置你要显示的图片路径（地址，位置）
            width   设置图片的宽度
            height  设置图片的高度
            border  设置图片边框大小。默认是 0 
        
        JavaSE 的地址分为两种：
            相对路径：
                相对路径从工程名开始算
                
            绝对路径：    
                盘符： /目录名/文件名
        
        html 页面中的地址也分为两种 （不使用 JAVASE的路径）：
            相对路径：
                .        表示当前目录
                ..       表示上一级目录
                资源名    表示当前目录下/资源名
                资源名    相当于 ./资源名（./可以省略）
            
            绝对路径：
                盘符：/目录名/文件名（错误）
                http://ip:port/工程名/资源名   正确

需求1： 使用 img  标签显示一张美女的照片，并修改 宽高 和 边框属性

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 13][]

7、表格标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 14][]

语法说明：

table  是 表格
            align 是对齐属性（不推荐使用table的align属性）
            cellspacing    设置单元格的间距
         tr     是行
         td     是单元格
         th     表头标签
         b      是加粗标签
        center 标签是居中标签
            被它包含起来的内容，都会居中显示

需求1： 做一个带表头的 三行 、三列 的表格， 并显示边框

需求2： 修改表格的宽度，高度，表格的对齐方式，单元格间距

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 15][]

8、跨行跨列表格

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 16][]

语法说明：

colspan  设置一个单元格占几个列的宽度  默认是1
            rowspan  设置一个单元格占几行的高度

需求1：

>  *  新建一个 五行、五列 的表格，
>  *  第一行，第一列的单元格要跨两列，
>  *  第二行第一列的单元格跨两行，
>  *  第四行第四列的单元格跨两行两列

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 17][]

9、了解 iframe 框架标签（内嵌窗口）

语法说明：

> iframe 标签可以在页面上。单独打开一个小窗口。显示一个独立的页面

src 属性设置要显示的独立的html 页面的地址（可以是相对路径，也可以绝对路径）
          iframe 和 a 标签组合使用步骤：
          1、在 iframe 标签上设置 name  属性的值。给 iframe 起一个名称
          2、在 a 标签的 target 属性上设置 iframe 的 name 的属性值

示例：

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 18][]

10、表单标签

说明：

> 表单，是用来收集用户信息，发送给服务器的。

form 是 表单标签
    
     input type = text 是普通文本输入框   value   属性设置默认值
     input type = password 是密码输入框   value   属性设置默认值
     input type = radio  单选框  name  可以对单选进行分组 checked="checked" 表示默认选中
     input type = checkbox 多选框  checked="checked" 表示默认选中
     input type = reset    是重置按钮
     input type = submit   是提交按钮
     input type = file     是文件上传域
     input type = button   是按钮    value 属性设置按钮的文本
     input type = hidden   是隐藏域    当我们需要往服务器发送某些数据，不希望用户知道或干预就可以使用隐藏域
     
    
     select 标签是下拉列表
     option 是下拉列表项     selected="selected" 表示默认选中
     textarea 是多行文本输入框   (默认值是起始标签和结束标签中的内容)
         rows  设置可以显示几行
         cols  设置可以显示几个字

示例：

**需求****1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。**

**隐藏域，自我评价（多行文本域）。重置，提交。**

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 19][]

**表单提交的细节：**

form 标签是表单标签        
          action 设置服务器的地址
          method 设置表单提交的方式，GET 或 POST
    
       表单提交，但是数据没有发到服务器的几种常见情况：
            1、表单项必须要有 name 属性值。提交的时候，才会发给服务器
            2、单选、复选、下拉列表项，都必须要的 value 属性值。否则服务器只收到 on .
            3、表单项必须要在提交的form 标签中，才会被发送给服务器。
    
       GET 请求的特点：
            1、浏览器地址栏上是 action 属性值？请求参数
                请求参数是以 name=value&name=value进行拼接
            2、不安全
            3、有长度限制
    
       POST 请求的特点：
            1、浏览器地址栏只有 action 的属性值
            2、相对 GET 请求安全
            3、没有数据长度限制

11、其他标签

> div       是块标签         默认独占一行
> 
> span    是内联标签     （span主要用来封装文本）  它的宽度就是它封装的文本的长度
> 
> p          是段落标签      用来格式化段落的文本  ， 默认是在段落的上方和下方各空出一行来

示例：**需求****1：div、span、p标签的演示**

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 20][]

[https_wushaopei.github.io]: https://wushaopei.github.io/
[C_S]: https://www.baidu.com/s?wd=C%2FS%E7%BB%93%E6%9E%84&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b5afaccf4f3241d7abc19877ac4706b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/091055f9086e4916a7ff77305ff3fbc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f372b1a3d8f24040a76f551f912da7d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4539d26e15104712bd3a7f4a816eb7b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1c11d11258604d20b2a0ce8a4f3f6e82.png
[20190910234120730.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/879c189c9c8645f190a9619436c77e62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f135269a02cb4c348b2cbda29919291c.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2f5d8f3e198b443ca48a12c33a136fb5.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fc1e3dd0152a4e4cb6229c206c70b0ce.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/030e4be730b64168ab6405c44f9de530.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ff7cb8e5602a4f9db549ffd20a0591be.jpeg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0a137135d504469c9b11492c80952ead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b6394b642f854aafa07f89d56dbb8517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4a5e05ae34604c33a7f8a2fecdb6e66a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/19deba14cad04d4fb7991d94d061f225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bc10786fc01a4d6f88efd29ec8db5542.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/41a3b3f5f2fb4a258e0f9b4b79ee45a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b2db1fb703af43be993b4a508aa1b9e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 17]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b468b49bb2e84806a446fa784ff1537e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 18]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/214acc3ffc0148fd85b09d88bdf1d4fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 19]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2ba00dd277284a1a813f5602788684aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70 20]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c5f2d1e482854f988c8a2ea53c895bf7.png