【JavaWeb】由HTML入门JavaWeb，html知识总结（附案例）

àì夳堔傛蜴生んèń 2023-09-27 11:37 60阅读 0赞

![在这里插入图片描述][7b6fd64587474dcb83e4c6073f8543c5.jpeg_pic_center]  
**本文被专栏 [系统学习JavaWeb][JavaWeb] 收录，[点击订阅][JavaWeb]**

# 写在前面 #

Hello，我是黄小黄。经过了**专栏** [JavaSE从入门到精通][JavaSE] 的学习，想必大家对OOP、文件操作、多线程、网络编程以及反射都有了一定的认识。在学习JavaWeb之前，首先需要对前端部分进行一定的了解，学习。当然，不必过于深入！  
 本文，将会给带来html的入门知识，包括语法规范，以及常用的标签使用方式，让大家对网页的组成有一定的了解。本专栏前几篇，将会带大家学习html、css、JavaScript的基本知识，希望对大家有帮助！  
 话不多说，正文开始！  
![在这里插入图片描述][608f9dea79ab4b3d80ec867a5c9dc1b3.webp_pic_center]

--------------------

### 文章目录 ###

*  写在前面
 *  1 初探JavaWeb
 *   *  1.1 B/S软件开发架构与前端开发流程
     *  1.2 网页的组成
 *  2 HTML入门
 *   *  2.1 HTML简介及HTML规范
     *  2.2 HTML标签格式及分类
     *  2.3 常用标签
     *   *  2.3.1 font字体标签
         *  2.3.2 特殊字符与字符实体
         *  2.3.3 标题标签
         *  2.3.4 超链接标签（重点）
         *  2.3.5 列表标签
         *  2.3.6 img标签
         *  2.3.7 table标签
         *  2.3.8 iframe框架标签
     *  2.4 表单标签（常用，重点）
     *   *  2.4.1 表单显示
         *  2.4.2 表单格式化
         *  2.4.3 表单提交的细节
     *  2.5 其他标签
 *  写在最后

--------------------

# 1 初探JavaWeb #

## 1.1 B/S软件开发架构与前端开发流程 ##

在我们之前所使用的JavaSE体系中，软件是 C/S 架构，指的是 Client 与 Server，客户端与服务端。

而在JavaEE的项目中，采用的是B/S软件开发架构，即 Brower 与 Server，浏览器与Web服务器分别冲动 客户端和服务端的角色。

![在这里插入图片描述][fbea8c20fb4644a29aa1381f5dc29cd4.png]

而前端开发流程如下：

1.  网页设计师根据需求设计网页；
2.  前端工程师将设计做成静态网页；
3.  后台工程师将网页修改为动态网页。

## 1.2 网页的组成 ##

网页由三部分组成：内容（结构）、表现、行为。

*  **内容（结构）：** 内容是网页制作者放在页面中想要让用户浏览的信息，也就是我们可以看到的数据，包括文字、图片、视频等。**主要以 HTML当作网页的载体。**
 *  **表现：** 指的是内容在网页上的表现形式，比如布局、颜色、大小等。所有用来改变内容外观的东西称为表现。而 **CSS样式是表现。**
 *  **行为：** 指的是页面中的元素与输入设备交互的响应，一般 **使用 JavaScript技术实现。**

--------------------

# 2 HTML入门 #

## 2.1 HTML简介及HTML规范 ##

**何为HTML？**  
**H**yper **T**ext **M**arkup **l**anguage（超文本标记语言），HTML通过标签来标记要显示的网页中的各个部分，而网页文件本身就是一种文本文件。HTML的结构包括头部（head），主体（body）两大部分，其中头部描述浏览器所需的信息，而主体包含要说明的具体内容。

**下面我们来使用html编写一个最熟悉的hello world，来熟悉一下HTML的基本结构**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        hello world!
    </body>
    </html>

html的代码注释：

运行结果如下：  
![在这里插入图片描述][837bb1230c474209a1b479c17555adde.png]

## 2.2 HTML标签格式及分类 ##

1.  html标签使用两个尖括号括起来，基本格式：

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

1.  标签名大小写不敏感。
2.  标签拥有自己的属性，分为基本属性和事件属性。基本属性可以修改简单的样式效果，而事件属性可以直接设置事件响应后的代码。
3.  标签又分为单标签和双标签。
4.  单标签：

<标签名/>

1.  双标签：

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

## 2.3 常用标签 ##

### 2.3.1 font字体标签 ###

font标签是字体标签，可以用来修改文本的字体，颜色和大小。其中：

*  color属性修改颜色
 *  face属性修改字体
 *  size属性修改文本大小

> 需求1：在网页上显示，我是黄小黄，并修改字体为宋体，颜色为红色，字体调整到最大（7）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <font color="red", face="宋体", size="7">我是黄小黄</font>
    </body>
    </html>

![在这里插入图片描述][c3c64dfb3bb04fcd8fbcc3df3a54b9dd.png]

### 2.3.2 特殊字符与字符实体 ###

浏览器中会将`<br>`标签解释为换行，但是不会将字符以这种形式原封不动的显示出来，下面看一个需求：

> 把`<br>`换行标签 变成文本，转换成字符显示在页面上

如何实现呢？在HTML中，诸如此类"<"的符号拥有特殊的含义，为了在文本中使用它们，我们需要使用字符实体。

**何为字符实体？**  
字符实体帮助我们使用浏览器正确的表示一些特殊字符，这些特殊字符一般都有自身的含义，比如换行、空格等。

**字符实体由三部分组成：一个和号（&），一个实体名称。或者一个\#和一个实体编号，以及一个分号（;）。** 需要注意的是，**字符实体对大小写敏感！**

常用的字符实体如下：  
![在这里插入图片描述][8d99d745ebaa4086b355c74f23d9b3c2.png]  
查表后，完成需求就变的相对容易了。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        <br>
    </body>
    </html>

![在这里插入图片描述][7cf67f4d7c594f3bbe77cf1da6145b4e.png]

### 2.3.3 标题标签 ###

标题标签由`<h1></h1>`1~6组成，标题1最大，标题6最小，下面看演示代码与结果：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题标签演示</title>
    </head>
    <body>
        <h1>标签1</h1>
        <h2>标签2</h2>
        <h3>标签3</h3>
        <h4>标签4</h4>
        <h5>标签5</h5>
        <h6>标签6</h6>
    </body>
    </html>

![在这里插入图片描述][1efd0e0fe3d743aba7e9c4979a433505.png]  
标题标签可选属性：**align 对齐属性**

*  left（默认，居左对齐）
 *  right（右对齐）
 *  center（居中对齐）

演示代码及结果如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题标签演示</title>
    </head>
    <body>
        <h1 align="left">左对齐</h1>
        <h2 align="center">居中对齐</h2>
        <h3 align="right">右对齐</h3>
    </body>
    </html>

![在这里插入图片描述][04773311d9464311bd2bbbfbf219744b.png]

### 2.3.4 超链接标签（重点） ###

超链接是指在网页中所有点击后可以跳转的内容。

通过标签`<a href="网址"></a>`实现，其中 **href（hypertext reference），超文本引用，用于设置链接的地址。**

另外，可选属性：**target，设置哪个目标进行跳转。**

*  \_self表示当前页面跳转。
 *  \_blank表示打开新的页面进行跳转。

> 设置一个超链接，实现跳转到百度网站，在新页面实现。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>标题标签演示</title>
    </head>
    <body>
        <a href="https://www.baidu.com", target="_blank">百度</a>
    </body>
    </html>

![在这里插入图片描述][3ea1a33cf5c14643b2aaaa6e73426f73.gif_pic_center]

### 2.3.5 列表标签 ###

列表分类：无序列表、有序列表、定义列表，定义列表一般不常用。

**无序列表案例：**  
使用`<ul></ul>`标签实现，**全称：unorder list**  
列表中的每一项，使用`<li></li>`实现，**全称：list**

> 使用无序列表方式，将 黄小黄 懒羊羊 小牛马 程序员 展示出来

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无序列表</title>
    </head>
    <body>
    <ul>
        <li>黄小黄</li>
        <li>懒羊羊</li>
        <li>小牛马</li>
        <li>程序员</li>
    </ul>
    </body>
    </html>

![在这里插入图片描述][9e6580fe1354404c8a2eea6c7158b37a.png]

**有序列表案例：**  
使用`<ol></ol>`标签实现，**全称：order list**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>无序列表</title>
    </head>
    <body>
    <ol>
        <li>黄小黄</li>
        <li>懒羊羊</li>
        <li>小牛马</li>
        <li>程序员</li>
    </ol>
    </body>
    </html>

![在这里插入图片描述][1c8f8e0bef65420c9ac644b8a5024e89.png]

### 2.3.6 img标签 ###

img标签可以实现在html页面中显示图片。其中，src属性可以设置图片的路径。

**在JavaSE中，路径分为相对路径和绝对路径**

*  相对路径：从工程名开始
 *  绝对路径：盘符:/目录/文件名

**在JavaWeb中，路径同样分为相对路径和绝对路径**

*  相对路径：`.` 表示当前文件所在目录；`..` 表示当前文件所在的上一级目录；文件名 表示当前文件所在目录的文件，相当于 `./` 只不过可以被省略。
 *  绝对路径：http://ip:port/工程名/资源路径

img标签可以通过width与height属性设置图片大小，border属性设置简单边框。

**img标签使用实例：**

> 在项目的工程文件下，html文件的上一级目录下，包含一个img文件夹，其中有6张动漫人物的图片，请你设置合适的大小和边框，在页面中进行展示。  
> ![在这里插入图片描述][f8e908b5a9bd48239291f1a9f63220f8.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img标签</title>
    </head>
    <body>
    <img src="../img/1.jpg" width="250" height="250" border="1"/>
    <img src="../img/2.jpg" width="250" height="250" border="1"/>
    <img src="../img/3.jpg" width="250" height="250" border="1"/>
    <img src="../img/4.jpg" width="250" height="250" border="1"/>
    <img src="../img/5.jpg" width="250" height="250" border="1"/>
    <img src="../img/6.jpg" width="250" height="250" border="1"/>
    </body>
    </html>

![在这里插入图片描述][a6434d880dc946ae84f5bca13b1879f8.png]  
**当然，还有一个属性alt，可以设置当指定路径找不到图片时，替代的文本内容。**

假设我们找不到 路飞了，即 5.jpg 不存在：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img标签</title>
    </head>
    <body>
    <img src="../img/1.jpg" width="250" height="250" border="1"/>
    <img src="../img/2.jpg" width="250" height="250" border="1"/>
    <img src="../img/3.jpg" width="250" height="250" border="1"/>
    <img src="../img/4.jpg" width="250" height="250" border="1"/>
    <img src="../img/5不在.jpg" width="250" height="250" border="1" alt="路飞不见了"/>
    <img src="../img/6.jpg" width="250" height="250" border="1"/>
    </body>
    </html>

![在这里插入图片描述][76ed3457ea24439db4e4a91a1bdb294e.png]

### 2.3.7 table标签 ###

*  table标签是表格标签；
 *  tr标签是行标签;
 *  th是表头标签；
 *  td是单元格标签。

> 做一个带表头的三行三列表格，并显示边框。适当调整表格高度、宽度、表格对齐方式、单元格间距，美化。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table标签练习</title>
    </head>
    <body>
    <table border="1" width="300" height="300" align="center" cellspacing="0">
        <tr>
            <th><b>1.1</b></th>
            <th><b>1.2</b></th>
            <th><b>1.3</b></th>
        </tr>
        <tr>
            <td align="center">2.1</td>
            <td align="center">2.2</td>
            <td align="center">2.3</td>
        </tr>
        <tr>
            <td align="center">3.1</td>
            <td align="center">3.2</td>
            <td align="center">3.3</td>
        </tr>
    </table>
    </body>
    </html>

![在这里插入图片描述][9eaff12121564ea4869e006804e79786.png]

以上是普通表格的绘制，但是在实际中，存在 **表格的跨行跨列问题。**

*  colspan：设置跨越的列数;
 *  rowspan：设置跨越的行数。

> 建立一个三行三列的表格，其中1.1跨越两列，2.2跨越两行。在之前 的案例中稍加修改，得到即可。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table标签练习</title>
    </head>
    <body>
    <table border="1" width="300" height="300" align="center" cellspacing="0">
        <tr>
            <th colspan="2"><b>1.1</b></th>
            <th><b>1.3</b></th>
        </tr>
        <tr>
            <td align="center">2.1</td>
            <td align="center" rowspan="2">2.2</td>
            <td align="center">2.3</td>
        </tr>
        <tr>
            <td align="center">3.1</td>
            <td align="center">3.3</td>
        </tr>
    </table>
    </body>
    </html>

![在这里插入图片描述][f4d1bdc2f3484263acc5121e3fa141a2.png]

### 2.3.8 iframe框架标签 ###

iframe标签可以在页面上开辟一个小区域显示一个单独的界面，常常和超链接标签一同使用，来看一个案例：

> 使用iframe创建一个区域用于显示动漫人物图片，每个图片已经单独写成html文件，并调整了合适的大小。  
> 请你使用无序列表，包含三个元素，点击每个列表元素，跳转到不同的动漫人物。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>iframe</title>
    </head>
    <body>
    
    <iframe src="nezuko.html" width="300" height="300" align="center" name="iframe"></iframe>
    <ul>
        
        <li><a href="nezuko.html" target="iframe">祢豆子</a></li>
        <li><a href="namei.html" target="iframe">娜美</a></li>
        <li><a href="hankuke.html" target="iframe">波雅汉库克</a></li>
    </ul>
    </body>
    </html>

![在这里插入图片描述][7404e81e7b584228a31f01df16f27410.gif_pic_center]

## 2.4 表单标签（常用，重点） ##

### 2.4.1 表单显示 ###

**何为表单？**  
表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

表单通过`form`标签来实现，其可包括的元素及属性：

*  **input type=“text” 是文本输入框，** 可选 value=“默认值”
 *  **input type=“password” 是密码输入框，** 可选 value=“默认值”
 *  **input type=“radio” 是单选框，** 需要设置name属性来让浏览器知道radio属于相同的组，实现单选效果，checked="checked"表示默认选中
 *  **input type=“checkbox” 是复选框，** 同样设置name属性来区分组，checked属性同上
 *  **input type=“reset” 是重置按钮，** 可以设置 value属性，改变按钮默认值
 *  **input type=“submit” 是提交按钮，** 同样可以设置 value属性，改变按钮默认值
 *  **input type=“button” 是按钮，** 可以设置 value属性，改变按钮值
 *  **input type=“file” 是文件上传域**
 *  **input type=“hidden” 是隐藏域。** 当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候也会上传给服务器，但是用户看不见）。
 *  **select 是下拉列表框，** 采用双标签的形式。option标签表示每个选项，selected="selected"表示默认选中
 *  **textarea 表示多行文本输入框，** 可选rows与cols属性设置可见的行数和列数。即每行和每列可以显示多少字符。在多行文本输入框中，默认值是起始标签和结束标签中间包含的部分

> 创建一个个人信息注册的表单界面，包含用户名、密码、确认密码、性别（单选）、兴趣爱好（多选）、国籍（下拉列表）、隐藏域、自我评价（多行文本域）,可重置、提交。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单显示</title>
    </head>
    <body>
    <form>
        用户名称：<input type="text" value="请输入用户名..."/><br/>
        用户密码：<input type="password"/><br/>
        确认密码：<input type="password"/><br/>
        性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
        兴趣爱好：<input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>Python<br/>
        国籍：<select>
        <option>请选择你的国家......</option>
        <option>America</option>
        <option>Japan</option>
        <option>England</option>
        <option>中国</option>
    </select><br/>
        自我评价：<textarea rows="10" cols="20">请输入自我评价......</textarea><br/>
        <input type="reset"/>
        <input type="submit"/>
    </form>
    </body>
    </html>

![在这里插入图片描述][267b73673b44416eaa58dd4ccd54b7b6.png]

### 2.4.2 表单格式化 ###

**上一案例中，表单虽然完成了，但是不够美观，接下来，结合table表格，来让表单更加美观！**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>美化表单</title>
    </head>
    <body>
    <form>
        <h1 align="center">注册界面</h1>
        
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td><input type="text" value="请输入用户名..."/></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>性      别：</td>
                <td>
                    <input type="radio" name="sex"/>男
                    <input type="radio" name="sex"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox"/>Java
                    <input type="checkbox"/>C++
                    <input type="checkbox"/>Python
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>请选择你的国家......</option>
                        <option>America</option>
                        <option>Japan</option>
                        <option>England</option>
                        <option>中国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="10" cols="20">请输入自我评价......</textarea></td>
            </tr>
            <tr>
                <td align="center"><input type="reset"/></td>
                <td align="center"><input type="submit"/></td>
            </tr>
        </table>
    </form>
    </body>
    </html>

![在这里插入图片描述][ada5ec08f42341c6acd033385010882e.png]

### 2.4.3 表单提交的细节 ###

form标签是表单标签，其有两个非常重要的属性：

1.  **action：** 设置提交的服务器地址；
2.  **method：** 设置提交的方式，分为GET和POST。

**表单提交的时候，数据没有发送给服务器的三种情况：**

1.  表单项没有name属性值；
2.  单选、复选、下拉列表的option标签，都需要添加value属性，以便发送给服务器；
3.  表单项不在提交的form标签中。

**Get请求的特点：**

1.  浏览器地址栏中的地址是：action属性+?+请求参数；
2.  请求参数的格式：name=value&name=value&…
3.  不安全
4.  有数据长度的限制，如果表单值包含非ASCII字符或者超过100个字符(与浏览器有关)，必须使用method=“post”。

**Post请求的特点：**

1.  浏览器地址栏中只有action属性值；
2.  相对于GET请求更加安全；
3.  理论上没有数据长度的限制。

## 2.5 其他标签 ##

*  div标签：默认独占一行；
 *  span标签：长度为封装数据的长度；
 *  p标签：段落标签，默认在段落的上方或下方各空一行，如果已经空出，则不再空。

--------------------

# 写在最后 #

好了，本文内容到这里就告一段落了，下一节，将给大家带来CSS与Javascript的相关内容，欢迎大家订阅专栏，加入学习！**[点击订阅][JavaWeb]**

如果你有任何问题，欢迎私信，感谢您的支持！  
![在这里插入图片描述][33ad3bfbfa084fe792cdcea04e64ede9.gif_pic_center]  
![在这里插入图片描述][ad16d93416c74666a97b046cb173134c.gif_pic_center]

[7b6fd64587474dcb83e4c6073f8543c5.jpeg_pic_center]: https://img-blog.csdnimg.cn/7b6fd64587474dcb83e4c6073f8543c5.jpeg#pic_center
[JavaWeb]: https://blog.csdn.net/m0_60353039/category_12029794.html
[JavaSE]: https://blog.csdn.net/m0_60353039/category_11757127.html?spm=1001.2014.3001.5482
[608f9dea79ab4b3d80ec867a5c9dc1b3.webp_pic_center]: https://img-blog.csdnimg.cn/608f9dea79ab4b3d80ec867a5c9dc1b3.webp#pic_center
[fbea8c20fb4644a29aa1381f5dc29cd4.png]: https://img-blog.csdnimg.cn/fbea8c20fb4644a29aa1381f5dc29cd4.png
[837bb1230c474209a1b479c17555adde.png]: https://img-blog.csdnimg.cn/837bb1230c474209a1b479c17555adde.png
[c3c64dfb3bb04fcd8fbcc3df3a54b9dd.png]: https://img-blog.csdnimg.cn/c3c64dfb3bb04fcd8fbcc3df3a54b9dd.png
[8d99d745ebaa4086b355c74f23d9b3c2.png]: https://img-blog.csdnimg.cn/8d99d745ebaa4086b355c74f23d9b3c2.png
[7cf67f4d7c594f3bbe77cf1da6145b4e.png]: https://img-blog.csdnimg.cn/7cf67f4d7c594f3bbe77cf1da6145b4e.png
[1efd0e0fe3d743aba7e9c4979a433505.png]: https://img-blog.csdnimg.cn/1efd0e0fe3d743aba7e9c4979a433505.png
[04773311d9464311bd2bbbfbf219744b.png]: https://img-blog.csdnimg.cn/04773311d9464311bd2bbbfbf219744b.png
[3ea1a33cf5c14643b2aaaa6e73426f73.gif_pic_center]: https://img-blog.csdnimg.cn/3ea1a33cf5c14643b2aaaa6e73426f73.gif#pic_center
[9e6580fe1354404c8a2eea6c7158b37a.png]: https://img-blog.csdnimg.cn/9e6580fe1354404c8a2eea6c7158b37a.png
[1c8f8e0bef65420c9ac644b8a5024e89.png]: https://img-blog.csdnimg.cn/1c8f8e0bef65420c9ac644b8a5024e89.png
[f8e908b5a9bd48239291f1a9f63220f8.png]: https://img-blog.csdnimg.cn/f8e908b5a9bd48239291f1a9f63220f8.png
[a6434d880dc946ae84f5bca13b1879f8.png]: https://img-blog.csdnimg.cn/a6434d880dc946ae84f5bca13b1879f8.png
[76ed3457ea24439db4e4a91a1bdb294e.png]: https://img-blog.csdnimg.cn/76ed3457ea24439db4e4a91a1bdb294e.png
[9eaff12121564ea4869e006804e79786.png]: https://img-blog.csdnimg.cn/9eaff12121564ea4869e006804e79786.png
[f4d1bdc2f3484263acc5121e3fa141a2.png]: https://img-blog.csdnimg.cn/f4d1bdc2f3484263acc5121e3fa141a2.png
[7404e81e7b584228a31f01df16f27410.gif_pic_center]: https://img-blog.csdnimg.cn/7404e81e7b584228a31f01df16f27410.gif#pic_center
[267b73673b44416eaa58dd4ccd54b7b6.png]: https://img-blog.csdnimg.cn/267b73673b44416eaa58dd4ccd54b7b6.png
[ada5ec08f42341c6acd033385010882e.png]: https://img-blog.csdnimg.cn/ada5ec08f42341c6acd033385010882e.png
[33ad3bfbfa084fe792cdcea04e64ede9.gif_pic_center]: https://img-blog.csdnimg.cn/33ad3bfbfa084fe792cdcea04e64ede9.gif#pic_center
[ad16d93416c74666a97b046cb173134c.gif_pic_center]: https://img-blog.csdnimg.cn/ad16d93416c74666a97b046cb173134c.gif#pic_center