【HTML】一文带你入门HTML

分手后的思念是犯贱 2023-10-15 13:28 80阅读 0赞

#### 文章目录 ####

*  一、什么是HTML？
 *  二、vscode开发工具搭建
 *  三、第一个HTML页面的编写
 *  四、常见标签
 *   *  1. 注释|标题|段落|换行标签
     *  2. 格式化标签
     *  3. 图片标签：img
     *  4. 超链接标签：a
     *  5. 表格标签 table
     *  6. 列表标签 ul、ol、dl
     *  7. 表单标签 form、input
     *  8. 无语义标签 div & span
 *  五、实战案例
 *   *  1. 个人简历展示
     *  2. 个人简历填写页面

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

## 一、什么是HTML？ ##

HTML是一种`超文本标记语言`，如何理解呢？

**超文本**：指的是文本、声音、图片、表格、链接等。  
**标记**：为了做到一个页面上能够将超文本中的内容展示出来，是通过标签完成的，这些标签就是一个一个的标记。

HTML页面是运行到浏览器上面的！

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

## 二、vscode开发工具搭建 ##

vscode是企业中开发前端的时候非常常用的一个开发工具，下面我们来看一下，使用它进行前端开发需要下载哪些插件。

*  Auto Rename Tag![在这里插入图片描述][dcfb951f282c490bb39acad6d3f4aa38.png]
 *  view-in-browser  
    ![在这里插入图片描述][54e2da9826d34e60a3f51aec17b7c18e.png]
 *  Live Server  
    ![在这里插入图片描述][6a87b0bc97a14e1fa20f953d581c999a.png]

**vscode如何快速生成代码框架：**

![我们知道，][fff9de2ceca2493d8b21b556215173d2.png]  
![在这里插入图片描述][bf0905eb06ca4d1282ab6428e971bc3e.png]  
![在这里插入图片描述][989fb85f508747d2bc568451cf587160.png]

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

## 三、第一个HTML页面的编写 ##

我们可以先使用普通的记事本来编写一个简单的HTML代码。

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

下面我们将该文本文件的后缀名改为html，双击运行即可。

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

每一个标签相当于一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。

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

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

## 四、常见标签 ##

### 1. 注释|标题|段落|换行标签 ###

*  注释标签

在vscode中，我们只需要选中我们想要注释的内容，然后在键盘上按下`ctrl + /`即可。

*  标题标签

标题标签有六个, 从 `h1 - h6`, 数字越大, 则字体越小

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

*  段落标签

![在这里插入图片描述][729aa294bc2c4d7cacb72fe991f0c160.png]  
![在这里插入图片描述][03ad7b9c020b4b998998c8aedbaae4e8.png]

*  换行标签

这里我们需要注意一下几点：

> 1.  br 是 break 的缩写. 表示换行.
> 2.  br 是一个单标签(不需要结束标签)
> 3.  br 标签不像 p 标签那样带有一个很大的空隙.
> 4.  `<br/>` 是规范写法. 不建议写成`<br>`

![在这里插入图片描述][eb8bada388ae4eb198f09a804bc582b7.png]  
![在这里插入图片描述][3f9de5f70ebf4eae948e8ddf72cc787c.png]

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

### 2. 格式化标签 ###

*  `加粗`: strong 标签 和 b 标签
 *  `倾斜`: em 标签 和 i 标签
 *  `删除线`: del 标签 和 s 标签
 *  `下划线`: ins 标签 和 u 标签

<strong>strong 加粗</strong>
    <b>b 加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

![在这里插入图片描述][3c5fc3d25d9d4bc59e62bdd57d2b6576.png]  
![在这里插入图片描述][73801e3be7ac47449c50bbf22f21e0c2.png]

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

### 3. 图片标签：img ###

`img` 标签的作用是向网页中嵌入图片，该标签必须带有 `src` 属性，表示图片的路径。src属性有**绝对路径**和**相对路径**两种表示方法：

**相对路径：** `./xxx.png`、`./img/xxx.png`或者`../xxx.png`

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

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

**绝对路径：**`图片路径`或者`网络上的图片资源`

![在这里插入图片描述][6bf7853cec1741fb9eba265aad240a56.png]  
![在这里插入图片描述][195f4be4e1d34ce2b88bf57d4058ae3e.png]

**img 标签的其他属性**

*  `alt`: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。  
    ![在这里插入图片描述][5a80794f82aa48779eee1d1a1d29d437.png]  
    ![在这里插入图片描述][89114dc4b486474ba812562f98d93de1.png]
 *  `title`: 提示文本. 鼠标放到图片上, 就会有提示。  
    ![在这里插入图片描述][f001a4d5af754147b239cbb48a59408a.png]
 *  `width/height`: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。  
    ![在这里插入图片描述][ff60ee09fff64baab00e4e8f481d5e71.png]  
    ![在这里插入图片描述][b84df0b22d6d418289fe495b6f8ecbaa.png]
 *  `border`: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定  
    ![在这里插入图片描述][aa20ca58443b4a949a8172c643b90383.png]  
    ![在这里插入图片描述][32018efe0f7f4e9e9b7356cae137fc29.png]  
    很明显看到图片有了一层黑色的边框。

**这里我们需要注意几点：**

> 1.  属性可以有多个, 不能写到标签之前
> 2.  属性之间用空格分割, 可以是多个空格, 也可以是换行
> 3.  属性之间不分先后顺序
> 4.  属性使用 “键值对” 的格式来表示

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

### 4. 超链接标签：a ###

**1. `href`: 必须具备, 表示点击后会跳转到哪个页面**

*  外部链接: href 引用其他网站的地址

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

*  内部链接: 网站内部页面之间的链接. 写相对路径即可  
    ![在这里插入图片描述][ca46ec4205354defa1ca96754991c918.png]  
    ![在这里插入图片描述][fa9e9937bdb84b02814803f3254e12b7.png]  
    当然，如果仅仅是为了插入一个超链接，但是它的作用就是刷新本页面，那么可以使用以下方式。  
    ![在这里插入图片描述][f717af37fd994bf29b8d0c9586678f9b.png]  
    ![在这里插入图片描述][e7fd3ba8d5744bcab879b322d3bfc3f7.png]
 *  超链接也可以`以图片的方式插入`：

![在这里插入图片描述][26562d6e17bb4d08a67843aef65b7fc4.png]  
当我们点击这个图片时即可跳转到百度官网的首页。

**2. `target属性`:规定在何处打开链接文档**

target的默认打开方式是\_self，如果是\_blank，则用新的页面打开。

对于上面的超链接，我们没有设置target属性，当我们点击它时都是默认在当前页面打开一个新的页面。当我们将target的属性设置为`_self`时，默认还是在当前页面打开超链接，将target的属性设置为`_blank`时，就用一个新的页面打开一个超链接。

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

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

### 5. 表格标签 table ###

>  *  `table标签`: 表示整个表格
>  *  `tr标签`: 表示表格的一行
>  *  `td标签`: 表示一个单元格
>  *  `th标签`: 表示表头单元格. 会居中加粗
>  *  `thead标签`: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
>  *  `tbody标签`: 表格得到主体区域。

**table** 包含 `tr , tr 包含 td 或者 th`。

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 `CSS` 方式来设置。

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

![在这里插入图片描述][5af885cb5c6e4413906accae36b2a59d.png]  
![在这里插入图片描述][21ee28d956904bc68afd07396f81b12f.png]

一般来说，表格的表头会有一种格式，表格中的主体区域又是另一种格式。这时`thead标签`和`tbody标签`就派上用场了。

*  thread里面的内容是`居中+加粗`展示的。  
    ![在这里插入图片描述][73c9e205f9244ec88707d84f57546f15.png]
 *  单元格合并  
    ![在这里插入图片描述][4b30360a138140f58429de1b1e179f72.png]  
    ![在这里插入图片描述][2677c25a632e460b9778649dda124047.png]

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

### 6. 列表标签 ul、ol、dl ###

>  *  无序列表\[重要\] `ul li`
>  *  有序列表\[用的不多\] `ol li`
>  *  自定义列表\[重要\] `dl (总标签) dt (小标题) dd (围绕标题来说明)` 上面有个小标题, 下面有几个围绕着标题来展开的

**无序列表 `ul li`**

基本格式：

<ul>
       <li>这是内容一</li>
       <li>这是内容二</li>
       <li>这是内容三</li>
    </ul>

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

`ul`标签中的`type`属性可以修改的，默认的情况下，它是一个实心小圆点。我们可以控制它变成其他样式。

>  *  `disc` 实心圆
>  *  `square` 实心小正方形
>  *  `circle` 空心圆

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

**有序列表 `ol li`**

<ol>
      <li>这是有序列表1</li>
      <li>这是有序列表2</li>
      <li>这是有序列表3</li>
      <li>这是有序列表4</li>
    </ol>

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

同样，`ol`标签中具有`type`属性和`start`属性，type属性和无序列表一样，都是展示左边序号的样式，start属性则决定列表从几号开始。

`type`属性的设置如下：

>  *  a 表示小写英文字母编号
>  *  A 表示大写英文字母编号
>  *  i 表示小写罗马数字编号
>  *  I 表示大写罗马数字编号
>  *  1 表示数字编号（默认）

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

**自定义列表`dl (总标签) dt (小标题) dd (围绕标题来说明)`**

<h1>这是自定义列表</h1>
    <dl>
        <dt> 自定义列表显示内容
            <dd>自定义列表内容1</dd>
            <dd>自定义列表内容2</dd>
            <dd>自定义列表内容3</dd>
        </dt>
    </dl>

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

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

### 7. 表单标签 form、input ###

**表单**是让用户输入信息的重要途径，表单分成两个部分：

>  *  `表单域`: 包含表单元素的区域. 重点是 form 标签.
>  *  `表单控件`: 输入框, 提交按钮等. 重点是 input 标签

**`form`标签**

form描述了要把数据按照什么方式，提交到哪个页面中，关于 form 需要结合 `服务器` & `网络编程` 来进一步理解，后面再详细研究。

**`input`标签**

各种输入控件, 单行文本框, 按钮, 单选框, 复选框，下面是input标签的一些属性：

>  *  **`type`**(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio等.
>  *  **`name`**: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
>  *  **`value`**: input 中的默认值.
>  *  **`checked`**: 默认被选中. (用于单选按钮和多选按钮)
>  *  **`maxlength`**: 设定最大长度.

*  **文本框**

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

*  **密码框**

![在这里插入图片描述][d850284ce65443e7b66a8b42a85be59a.png]  
当我们在密码框中输入密码时，显示的是一种加密的状态。

*  **单选框**

性别:
    <input type="radio" name="sex">男
    <input type="radio" name="sex" checked="checked">女

在这里`type`属性表示它是一个单选框，`name`属性设置为相同的字符串就可以保证只能有一个被选中，`checked`属性设置到哪个选项，哪个选项就是被默认选中的。  
![在这里插入图片描述][5443de471596483a89121edfd8863b4b.png]

*  **复选框**

爱好:
    <input type="checkbox"> 吃饭 
    <input type="checkbox"> 睡觉 
    <input type="checkbox">打游戏

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

*  **普通按钮**

![在这里插入图片描述][1a853d1d38664f388c56ee7ea6ad074b.png]  
这个按钮按下去之后没有任何反应，这是因为它需要搭配 `JS` 使用(后面会重点研究)，下面我们先来演示一下：

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

*  **提交按钮、清空按钮和选择文件按钮**

`提交按钮`必须放到 form 标签内. 点击后就会尝试给服务器发送。

`清空按钮`必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置。

`选择文件按钮`

举例演示一下：

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

*  **label标签**  
    搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验。`for` 属性: 指定当前 **label** 和哪个相同 `id` 的 **input** 标签对应. (此时点击才是有用的)

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

*  **select 标签——下拉菜单**  
    select标签的作用是制作一个下拉菜单。`select`标签一般会搭配`option`标签使用，`option`标签会展示出你可以选择的选项。默认选中为第一项，当然，option 中定义 selected=“selected” 表示默认选中。select标签具有`size`和`multiple`属性，如果**select标签中定义`multiple = "multiple"`时**，下拉菜单具有多项选择的功能，方法为按住Ctrl键选择多次。size属性则指定下拉菜单的可见选项数。

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

*  **textarea标签——文本域**  
    文本域中的内容, 就是默认内容，注意，空格也会有影响。rows表示的是文本域中可容纳的行数，cols表示的是文本域中可容纳的列数。

<textarea rows="20" cols="50">
        Redis入门到实战
    </textarea>

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

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

### 8. 无语义标签 div & span ###

无语义表示没有固定的用途，拿着这个标签啥都可以干。`div`标签, division的缩写, 含义是 分割。`span`标签, 含义是跨度。就是两个盒子. 用于**网页布局**

>  *  `div` 是独占一行的, 是一个大盒子.
>  *  `span` 不独占一行, 是一个小盒子

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

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

## 五、实战案例 ##

### 1. 个人简历展示 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>陈某某</h1>
        <div>
            <h2>基本信息</h2>
            <img src="./图片.png" alt="" width="300" height="200">
            <span><p>求职意向: Java后端开发</p></span>
            <span><p>联系方式: xxx-xxxx-xxxx</p></span>
            <span><p>个人邮箱: xxxxxxxxxx@qq.com</p></span>
            <span><p><a href="https://gitee.com/">我的Gitee</a></p></span>
            <span><p><a href="https://www.csdn.net/">我的博客</a></p></span>
        </div>
        <div>
            <h2>教育经历</h2>
            <ol>
                <li>xxxx年-xxxx年, 幼儿园</li>
                <li>xxxx年-xxxx年, 小学</li>
                <li>xxxx年-xxxx年, 初中</li>
                <li>xxxx年-xxxx年, 高中</li>
                <li>xxxx年-xxxx年, 大学</li>
            </ol>
        </div>
        <div>
            <h2>专业技能</h2>
            <ul>
                <li>Java基础语法扎实,已经刷了800道力扣</li>
                <li>常见的数据结构可以独立实现并熟练应用</li>
                <li>熟知计算机网络理论,并且可以独立排查常见问题</li>
                <li>掌握Web开发能力,并且独立的开发了学校的留言墙功能</li>
            </ul>
        </div>
        <div>
            <h2>个人项目</h2>
            <ol>
                <h3><li>留言墙</li></h3>
                <p>开发时间:2023年4月1日~2023年4月28日</p>
                <p>功能介绍</p>
                <ul>
                    <li>支持留言发布</li>
                    <li>支持匿名留言</li>
                </ul>
    
                <h3><li>学习小助手</li></h3>
                <p>开发时间:2008年9月到2008年12月</p>
                <p>功能介绍</p>
                <ul>
                    <li>支持错题检索</li>
                    <li>支持同学探讨</li>
                </ul>
            </ol>
        </div>
        <div>
            <h2>个人评价</h2>
            <p>热爱生活,热爱编程</p>
        </div>
    </body>
    </html>

**效果如下：**

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

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

### 2. 个人简历填写页面 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <table>
            <thead><h3>请填写简历信息</h3></thead>
            <tr>
                <td>
                    <label for="name">姓名</label>
                </td>
                <td>
                    <input type="text" id="name">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" checked="checked" id="male">
                    <label for="male">
                        <img src="./male.png" alt="" width="25" height="25">男
                    </label>
                    <input type="radio" name="sex" id="female">
                    <label for="female">
                        <img src="./female.png" alt="" width="25" height="25">女
                    </label>
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <select name="" id="">
                        <option value="">--请选择年份--</option>
                        <option value="">2000</option>
                        <option value="">2001</option>
                        <option value="">2002</option>
                        <option value="">2003</option>
                        <option value="">2004</option>
                        <option value="">2005</option>
                        <option value="">2006</option>
                        <option value="">2007</option>
                        <option value="">2008</option>
                        <option value="">2009</option>
                        <option value="">2010</option>
                    </select>
                    <select name="" id="">
                        <option value="">--请选择月份--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                    </select>
                    <select name="" id="">
                        <option value="">--请选择日期--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                        <option value="">3</option>
                        <option value="">4</option>
                        <option value="">5</option>
                        <option value="">6</option>
                        <option value="">7</option>
                        <option value="">8</option>
                        <option value="">9</option>
                        <option value="">10</option>
                        <option value="">11</option>
                        <option value="">12</option>
                        <option value="">13</option>
                        <option value="">14</option>
                        <option value="">15</option>
                        <option value="">16</option>
                        <option value="">17</option>
                        <option value="">18</option>
                        <option value="">19</option>
                        <option value="">20</option>
                        <option value="">21</option>
                        <option value="">22</option>
                        <option value="">23</option>
                        <option value="">24</option>
                        <option value="">25</option>
                        <option value="">26</option>
                        <option value="">27</option>
                        <option value="">28</option>
                        <option value="">29</option>
                        <option value="">30</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="school">就读学校</label>
                </td>
                <td>
                    <input type="text" id="school">
                </td>
            </tr>
            <tr>
                <td>应聘岗位</td>
                <td>
                    <input type="checkbox" id="fe">
                    <label for="fe">前端开发</label>
                    <input type="checkbox" id="server">
                    <label for="server">后端开发</label>
                    <input type="checkbox" id="test">
                    <label for="test">测试开发</label>
                    <input type="checkbox" id="yunwei">
                    <label for="yunwei">运维开发</label>
                </td>
            </tr>
            <tr>
                <td>掌握的技能</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>项目经历</td>
                <td>
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="read">
                    <label for="read">我已仔细阅读公司的招聘要求</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">查看我的状态</a></td>
            </tr>
            <tr>
                <td></td>
                <td><h3>请应聘者确认信息</h3></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <ul>
                        <li>以上信息真实有效</li>
                        <li>能够尽早去公司实习</li>
                        <li>能接受公司的加班文化</li>
                    </ul>
                </td>
            </tr>
        </table>
    </body>
    </html>

**效果如下：**

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

**这里再举几个HTML中的特殊字符**

有些特殊的字符在 html 文件中是不能直接表示的, 例如

*  `空格:  `
 *  `小于号: <`
 *  `大于号: >`
 *  `按位与: &`

注意：html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆。

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

[dcfb951f282c490bb39acad6d3f4aa38.png]: https://img-blog.csdnimg.cn/dcfb951f282c490bb39acad6d3f4aa38.png
[54e2da9826d34e60a3f51aec17b7c18e.png]: https://img-blog.csdnimg.cn/54e2da9826d34e60a3f51aec17b7c18e.png
[6a87b0bc97a14e1fa20f953d581c999a.png]: https://img-blog.csdnimg.cn/6a87b0bc97a14e1fa20f953d581c999a.png
[fff9de2ceca2493d8b21b556215173d2.png]: https://img-blog.csdnimg.cn/fff9de2ceca2493d8b21b556215173d2.png
[bf0905eb06ca4d1282ab6428e971bc3e.png]: https://img-blog.csdnimg.cn/bf0905eb06ca4d1282ab6428e971bc3e.png
[989fb85f508747d2bc568451cf587160.png]: https://img-blog.csdnimg.cn/989fb85f508747d2bc568451cf587160.png
[036e8fe5d052497fb3607c9fcb5f37c4.png]: https://img-blog.csdnimg.cn/036e8fe5d052497fb3607c9fcb5f37c4.png
[b87e73569543415b9a170458271bed63.png]: https://img-blog.csdnimg.cn/b87e73569543415b9a170458271bed63.png
[ea68f7b4c1a24348ab6b209b02aef8f1.png]: https://img-blog.csdnimg.cn/ea68f7b4c1a24348ab6b209b02aef8f1.png
[1ea212d075d642268f7879e1ed92a04e.png]: https://img-blog.csdnimg.cn/1ea212d075d642268f7879e1ed92a04e.png
[729aa294bc2c4d7cacb72fe991f0c160.png]: https://img-blog.csdnimg.cn/729aa294bc2c4d7cacb72fe991f0c160.png
[03ad7b9c020b4b998998c8aedbaae4e8.png]: https://img-blog.csdnimg.cn/03ad7b9c020b4b998998c8aedbaae4e8.png
[eb8bada388ae4eb198f09a804bc582b7.png]: https://img-blog.csdnimg.cn/eb8bada388ae4eb198f09a804bc582b7.png
[3f9de5f70ebf4eae948e8ddf72cc787c.png]: https://img-blog.csdnimg.cn/3f9de5f70ebf4eae948e8ddf72cc787c.png
[3c5fc3d25d9d4bc59e62bdd57d2b6576.png]: https://img-blog.csdnimg.cn/3c5fc3d25d9d4bc59e62bdd57d2b6576.png
[73801e3be7ac47449c50bbf22f21e0c2.png]: https://img-blog.csdnimg.cn/73801e3be7ac47449c50bbf22f21e0c2.png
[df8c019c237a4c158c84c184a00aba61.png]: https://img-blog.csdnimg.cn/df8c019c237a4c158c84c184a00aba61.png
[ed4bb6a8946a43fc94fe358deb3adbde.png]: https://img-blog.csdnimg.cn/ed4bb6a8946a43fc94fe358deb3adbde.png
[6bf7853cec1741fb9eba265aad240a56.png]: https://img-blog.csdnimg.cn/6bf7853cec1741fb9eba265aad240a56.png
[195f4be4e1d34ce2b88bf57d4058ae3e.png]: https://img-blog.csdnimg.cn/195f4be4e1d34ce2b88bf57d4058ae3e.png
[5a80794f82aa48779eee1d1a1d29d437.png]: https://img-blog.csdnimg.cn/5a80794f82aa48779eee1d1a1d29d437.png
[89114dc4b486474ba812562f98d93de1.png]: https://img-blog.csdnimg.cn/89114dc4b486474ba812562f98d93de1.png
[f001a4d5af754147b239cbb48a59408a.png]: https://img-blog.csdnimg.cn/f001a4d5af754147b239cbb48a59408a.png
[ff60ee09fff64baab00e4e8f481d5e71.png]: https://img-blog.csdnimg.cn/ff60ee09fff64baab00e4e8f481d5e71.png
[b84df0b22d6d418289fe495b6f8ecbaa.png]: https://img-blog.csdnimg.cn/b84df0b22d6d418289fe495b6f8ecbaa.png
[aa20ca58443b4a949a8172c643b90383.png]: https://img-blog.csdnimg.cn/aa20ca58443b4a949a8172c643b90383.png
[32018efe0f7f4e9e9b7356cae137fc29.png]: https://img-blog.csdnimg.cn/32018efe0f7f4e9e9b7356cae137fc29.png
[41d711439c4f48b1a1a1a6df61a47e14.png]: https://img-blog.csdnimg.cn/41d711439c4f48b1a1a1a6df61a47e14.png
[ca46ec4205354defa1ca96754991c918.png]: https://img-blog.csdnimg.cn/ca46ec4205354defa1ca96754991c918.png
[fa9e9937bdb84b02814803f3254e12b7.png]: https://img-blog.csdnimg.cn/fa9e9937bdb84b02814803f3254e12b7.png
[f717af37fd994bf29b8d0c9586678f9b.png]: https://img-blog.csdnimg.cn/f717af37fd994bf29b8d0c9586678f9b.png
[e7fd3ba8d5744bcab879b322d3bfc3f7.png]: https://img-blog.csdnimg.cn/e7fd3ba8d5744bcab879b322d3bfc3f7.png
[26562d6e17bb4d08a67843aef65b7fc4.png]: https://img-blog.csdnimg.cn/26562d6e17bb4d08a67843aef65b7fc4.png
[a31b30483d8941e688a7c2080d4fa53b.png]: https://img-blog.csdnimg.cn/a31b30483d8941e688a7c2080d4fa53b.png
[27ab195a1b8f445f856d390232297e6e.png]: https://img-blog.csdnimg.cn/27ab195a1b8f445f856d390232297e6e.png
[5af885cb5c6e4413906accae36b2a59d.png]: https://img-blog.csdnimg.cn/5af885cb5c6e4413906accae36b2a59d.png
[21ee28d956904bc68afd07396f81b12f.png]: https://img-blog.csdnimg.cn/21ee28d956904bc68afd07396f81b12f.png
[73c9e205f9244ec88707d84f57546f15.png]: https://img-blog.csdnimg.cn/73c9e205f9244ec88707d84f57546f15.png
[4b30360a138140f58429de1b1e179f72.png]: https://img-blog.csdnimg.cn/4b30360a138140f58429de1b1e179f72.png
[2677c25a632e460b9778649dda124047.png]: https://img-blog.csdnimg.cn/2677c25a632e460b9778649dda124047.png
[36175cb7ea1b45fb823f1925f1f8d281.png]: https://img-blog.csdnimg.cn/36175cb7ea1b45fb823f1925f1f8d281.png
[824d7300b4bb4762a462fe31cc28bf3d.png]: https://img-blog.csdnimg.cn/824d7300b4bb4762a462fe31cc28bf3d.png
[3360924fd7f54ac1b4c614a9990d7d34.png]: https://img-blog.csdnimg.cn/3360924fd7f54ac1b4c614a9990d7d34.png
[b728556e441d4a4a99f95f329f30cdbe.png]: https://img-blog.csdnimg.cn/b728556e441d4a4a99f95f329f30cdbe.png
[e44c9585af1a47e287c13cb7b97d8351.png]: https://img-blog.csdnimg.cn/e44c9585af1a47e287c13cb7b97d8351.png
[744d80701c774f5faa98dbaab8cb5609.png]: https://img-blog.csdnimg.cn/744d80701c774f5faa98dbaab8cb5609.png
[d850284ce65443e7b66a8b42a85be59a.png]: https://img-blog.csdnimg.cn/d850284ce65443e7b66a8b42a85be59a.png
[5443de471596483a89121edfd8863b4b.png]: https://img-blog.csdnimg.cn/5443de471596483a89121edfd8863b4b.png
[4a0a3e1ce72942129716d91a3e5a77c1.png]: https://img-blog.csdnimg.cn/4a0a3e1ce72942129716d91a3e5a77c1.png
[1a853d1d38664f388c56ee7ea6ad074b.png]: https://img-blog.csdnimg.cn/1a853d1d38664f388c56ee7ea6ad074b.png
[557331c04840425997ea048f01a1edb1.png]: https://img-blog.csdnimg.cn/557331c04840425997ea048f01a1edb1.png
[f3a4d841bd294225b2c4ebc2f93ea9db.png]: https://img-blog.csdnimg.cn/f3a4d841bd294225b2c4ebc2f93ea9db.png
[7d581bc3ffab4816bebaae2688653b62.png]: https://img-blog.csdnimg.cn/7d581bc3ffab4816bebaae2688653b62.png
[2ff5ca6afed949cea3b7b1c3970c4ca4.png]: https://img-blog.csdnimg.cn/2ff5ca6afed949cea3b7b1c3970c4ca4.png
[7a9090d20ab144e0a8fbbc74c0147532.png]: https://img-blog.csdnimg.cn/7a9090d20ab144e0a8fbbc74c0147532.png
[1c7f0875432848009794115ad87662db.png]: https://img-blog.csdnimg.cn/1c7f0875432848009794115ad87662db.png
[dc0629ba90864d12bac82ac3bd7145f7.png]: https://img-blog.csdnimg.cn/dc0629ba90864d12bac82ac3bd7145f7.png
[9c69ea16d4c843bd8c585f49bd166371.png]: https://img-blog.csdnimg.cn/9c69ea16d4c843bd8c585f49bd166371.png