python和前端之HTML的激情

以你之姓@ 2022-10-02 14:51 12阅读 0赞

### python写前端需要啥语言？ ###

a：HTML　　→　　 骨架【类似于创建一个塑料模特】，搭建、调整整个页面布局

b：CSS　　   →　　衣服【类似于给塑料模特穿上衣服，不能那么暴露】，将整个页面美化

c：JS　　　   →　　马达【给模特装一个小马达，这样才能动，才能叫嘛】，让页面动起来

![1364810-20181220002247512-934359161.jpg][]

### 1、初识HTML。 ###

基本概念：

html为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

*  超文本：音频，视频，图片称为超文本。
 *  标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。

**　　作用**：HTML是负责描述文档**语义**的语言。

### 2、HTML的结构。 ###

<!DOCTYPE html>　　　　　　　　　　// 这是文档声明头部，意在指明这是那种HTML规范
    <html lang="en">　　　　　　　　　 // lang=“en” 英语的意思，用谷歌浏览器打开会提示翻译，删除就好
    <head>　　　　　　　　　　　　　　　　// 头标签，是一对的。
        <meta charset="UTF-8">　　　　// meta 提供这个网页的基本信息，默认打开就是 utf-8 编码
        <title>Document</title>　　　 // title 标题名称，就是打开网页最上方的网页名
    </head>
    <body>　　　　　　　　　　　　　　　　// 网页的主体内容，其中包含很多内容。
        
    </body>
    </html>

看注释不爽？看表格呢？

**head****内常用标签**

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>标签</strong></p> </td> 
   <td> <p><strong>意义</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>&lt;title&gt;&lt;/title&gt;</p> </td> 
   <td> <p>定义网页标题</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&lt;style&gt;&lt;/style&gt;</p> </td> 
   <td> <p>定义内部样式表</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&lt;script&gt;&lt;/script&gt;</p> </td> 
   <td> <p>定义JS代码或引入外部JS文件</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&lt;link/&gt;</p> </td> 
   <td> <p>引入外部样式表文件</p> </td> 
  </tr> 
  <tr> 
   <td> <p>&lt;meta/&gt;</p> </td> 
   <td> <p>定义网页原信息</p> </td> 
  </tr> 
 </tbody> 
</table>

**body内常用标签（HTML中的重点）**

<br>br这是换行
    <b>这是加粗</b>
    <i>这是斜体</i>
    <u>这是下划线</u>
    <p>这是独占一个段落</p>
    <s>这是删除</s>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6 最多到6</h6>
    <hr>这是水平线<hr>

**HTML的特点：**

*  对换行、空格 不敏感
 *  空白折叠
 *  对于body的一行超长的内容，会在网页上自动换行

### 3、HTML文件的编写规范。 ###

（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>  
（2）所有的标记都必须小写。  
（3）所有的标记都必须关闭。  
\- 双边标记：<span></span>  
\- 单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />  
（4）所有的属性值必须加引号。<h1 id="head"></h1>  
（5）所有的属性必须有值。<input type="radio" checked="checked" />

### 4、HTML中的特殊符号。 ###

*  ` `：空格 （non-breaking spacing，不断打空格）
 *  `<`：小于号（less than）
 *  `>`：大于号（greater than）
 *  `&`：符号`&`
 *  `"`：双引号
 *  `'`：单引号
 *  `©`：版权`©`
 *  `™`：商标`™`

### 5、pycharm中创建HTML。 ###

![1644107-20190606174030793-656438778.png][]

![1644107-20190606174103549-492676857.png][]

就会创建出一个标准的HTML结构

### 6、标签详解。 ###

标签也被称为标记，分为以下两种：

*  双闭合标签。eg： <html> </html>
 *  单闭合标签。eg：<meta>

标签分类：

*  文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
 *  容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

#### 6.1、head中的标签 ####

Meta标签：主要用于页面的关键字和描述，是写给搜索引擎看的。

title标签：主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

link标签：链接 css 文件。

script标签：链接javascrip文件。

style标签：内嵌样式

#### 6.2、body中的标签 ####

##### 字体标签： #####

###### 1、标题标签：h1~h6 【<h1></h1>】，`<h1>`定义最大的标题，`<h6>`定义最小的标题。 ######

<h1>今天心情好</h1>
    <h2>是不可能的</h2>
    <h3>一天天的b事</h3>
    <h4>那么多</h4>
    <h5>我也只能</h5>
    <h6>小声哔哔</h6>

效果如下：

![1644107-20190606175131084-1300635238.png][]

###### 2、加粗标签 ######

###### ![1644107-20190606175544770-1906689066.png][] ######

###### 3、下划线标签 ######

###### ![1644107-20190606175611218-1777176577.png][] ######

###### 4、斜体标签 ######

![1644107-20190606175629179-1974897725.png][]

####  ----------------------------------------------------------------------------------------------------------------------- ####

##### 排版标签： #####

###### 1、段落标签 <p></p> 【有换行作用，但是有空隙】；**p标签是一个文本级标签，p里面只能放文字、图片、表单元素。** ######

align='属性值'：对齐方式。属性值包括：left、center、right

<p>这是一个段落</p>
    <p align="center">这是另一个段落</p>

![1364810-20180520080845241-107766243.png][]

###### 2、换行标签 <br>【强制换行】 ######

<p>我想涨工资</p>唉
    <p>我想找对象，
    要漂亮的妹纸</p>
    啥时候才能？<br>贫穷

效果自己看吧：p标签包裹了不在同一行的数据，但是显示效果在一行；将br标签添加在一整个句子之中，产生了换行的效果，而且行与行之间的间距比p标签的小。

![1644107-20190606180158727-1279813904.png][]

###### 3、分割线（水平线）标签 <hr> ######

<p>我想涨工资</p>唉
    <p>我想找对象，
    <hr>
    要漂亮的妹纸</p>
    啥时候才能？<br>贫穷

效果用肉眼可见：

![1644107-20190606180418109-874611122.png][]

###### 4、预格式化标签<pre> ######

将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果

<pre>
            鹅鹅鹅
    
                作者：李白
            曲项向天歌
            白毛浮绿水
            
        </pre>

![1364810-20180520085018258-320527008.png][]

###### 5、块级标签<div></div> 和<span> </span> ######

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

**<span>和<div>唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的**

<body>
    
        <div>
            导航栏
        </div>
        <div>
            中心banner
        </div>
        <span>路飞</span>
        <span>alex</span>
        
    </body>

![1364810-20180520082108260-151310827.png][]

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div

####  ----------------------------------------------------------------------------------------------------------------------- ####

#### 超链接标签：<a> 标签 ####

<a> 标签是一个文本级别的标签。

属性：

*  `href`：目标URL
 *  `title`：悬停文本。
 *  `name`：主要用于设置一个锚点的名称。
 *  `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
    
     *  `_self`：在同一个网页中显示（默认值）
     *  `_blank`：**在新的窗口中打开**。
     *  `_parent`：在父窗口中显示
     *  `_top`：在顶级窗口中显示

<a> 标签可以链接外部内容：
    <a href="www.baidu.com">点击进入百度</a>
    
    做锚点作用【在本页面或者其他页面的的不同位置进行跳转】：
    <a name = 'top'>顶部</a>
    <p>
    中间有N个p标签
    </p>
    <a href = "#top">点击回到顶部</a>
    
    --------------------------------------------------
    <a href="网址" target="_self">文本</a>  通过target设置链接网页在哪打开
    默认是_self ，在当前页面打开；_blank 在新的页面打开链接
    
    --------------------------------------------------
     <a>标签自带下划线，可以使用如下参数清除下划线：
    <a href="网址" style="text_decoration:none">文本</a>
    
    --------------------------------------------------
    给<a> 标签设置颜色属性
    <a href="网址" style="color:red">文本</a>
    
    --------------------------------------------------
    鼠标悬浮在 <a> 标签上显示当前文本内容
    <a href="网址" style="tiltle">文本</a>

####  ----------------------------------------------------------------------------------------------------------------------- ####

####  图片标签： ####

img: 代表的就是一张图片。是单边标记。

img是自封闭标签，也称为单标签。

*  能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
 *  不能往网页中插入的图片格式是：psd、ai

##### img标签的常用属性： #####

*  src：路径
 *  width：宽度 一般情况下只调整一个，会自动等比例调整 width 宽度（长）、 height 高度（宽）
 *  `height`：高度
 *  `title`：**提示性文本**。公有属性。也就是鼠标悬停时出现的文本。
 *  `align`：指图片的水平对齐方式，属性值可以是：left、center、right
 *  `alt`：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

![1364810-20180520092542606-792034884.png][]

注意：无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

1：相对路径，就是../ image/ 这种路径【./ 从上一级开始】。从自己出发，找到别人；

2：绝对路径，就是http://开头的路径

####  ----------------------------------------------------------------------------------------------------------------------- ####

#### 列表标签： ####

##### 有序 ordered list <ol></ol> #####

<ol></ol> 默认为数字，也可以使用下面的
    
    <ol type = "a"></ol>
    <ol type = "A"></ol>
    <ol type = "i"></ol>
    <ol type = "I"></ol>
    
    -------------------
    <ol>
        <li>内容</li>
    </ol>

##### 无序 unordered list <ul></ul> #####

默认为实心原点
    
    <ul type = "square"></ul>  实心方块
    
    ---------------
    <ul>
        <li>内容</li>
    </ul>

##### 定义列表<dl>没有属性。dl的子元素只能是dt和dd。 dd是描述dt的。  #####

<dl>
            <dt>第一条规则</dt>
            <dd>不准睡觉</dd>
            <dd>不准交头接耳</dd>
            <dd>不准下神</dd>
    
            <dt>第二条规则</dt>
            <dd>可以泡妞</dd>
            <dd>可以找妹子</dd>
            <dd>可以看mv</dd>
    </dl>

\------------------------------------------------------------------------------------------------------------

#### 表格标签 ####

![1286512-20190528154847496-195825644.png][]

将表格添加边框 border: <table border="1">

![1286512-20190528154919289-1834897202.png][]

调整表格宽度 width：  <table border="1" cellspacing="0" width="400">

![1286512-20190528155539936-481602117.png][]

还可以调整宽度按百分比，这里演示100%： <table border="1" cellspacing="0" width="100%">

![1286512-20190528155815496-1334822542.png][]

\--------------------------------------------------------------------------------------------------------

#### form表单<form action=""></form> ####

##### input  中 txt  password  和submit类型 #####

![复制代码][copycode.gif]

<html>
    <body>
    <form action=""></form>   
    </body>
    </html>
    #右击open in browser ->default 打开使用的是pycharm提供的服务。

![复制代码][copycode.gif]

![1286512-20190528161847357-861630439.png][]

单个文本框<input type="text">

![复制代码][copycode.gif]

<html>
    <body>
    <form action="http:localhost:8080" method="get">  #action 提交的地址  method 请求的方式 默认是get
        <input type="text">
    </form>
    </body>
    </html>

![复制代码][copycode.gif]

![1286512-20190528162329665-364282324.png][]

再添加一个password框，但是不是换行显示，中间有个空格，那是多个空格换成了一个&nbsp好像

![1286512-20190528162609124-281143054.png][]

加个br换行，但是发现两行离得太紧密了：

![1286512-20190528162940335-1972742680.png][]

添加input标签，text和password类型的，用p标签包裹它们之间就没那么紧密了，

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528163314144-201062488.png][]

添加提交按钮，类型submit

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528163650586-772905463.png][]

添加属性value，提交按钮值改变成登录

![1286512-20190528163931731-1407188917.png][]

每次百度搜索是一个s一个？  然后一个id对应一个值

![1286512-20190528165517481-785547575.png][]

我们也提交也需要设置一个name，一个值name="name" value=""      \#<input type="text" name="name" value="">

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528170140808-393054795.png][]

![1286512-20190528170422139-742952750.png][]

结果是input输入框name和第二个name是pwd的分别获取到输入框中提交的值。name value name value 多个输入框内的键值用&来拼接。我的源文件地址是C:\\mcw\\test\\test.html

但是这样提交的密码是明文的，都被显示出来了，登录提交这样的应该用post请求   <form action="" method="post">

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528171621335-533121554.png][]

![1286512-20190528171544678-1741855700.png][]

因为请求方式改为post了，地址栏也不显示提交的数据。想看提交的数据可以在开发者工具中看，Network->all->点击name中的提交的，右边Headers中的From Data中显示我提交的数据。get会显示在地址栏，post不会显示在地址栏。把这些数据提交到服务器后台，这些数据是文本传输，如果是图片那就流式传输。

如果是图片传输，除了提交方式改为post，还要添加enctype属性，默认值是"application/x-www-form-urlencoded"，图片传输改为"multipart/form-data"。如果不改，文件和图片提交不过去

#####  input中的radio单选框 #####

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528173441451-403922414.png][]

但是没有实现单选，两个都选上了。这里需要添加一个相同的name，因为只能提交一个相同的name，这样就实现单选了。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528173749054-1279681705.png][]

单选中添加默认选中哪个   checked=

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528174457911-1337314422.png][]

##### 多选框input中的checkbox #####

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>请选择你的爱好：</h4>
        <p>
            <input type="checkbox" name="a" checked="男">唱歌   #默认选中的checked
            <input type="checkbox" name="b">跳舞
            <input type="checkbox" name="c">学习
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

![1286512-20190528175412861-345898441.png][]

on就是点击登录之后选中了的

![1286512-20190528175613437-1748707988.png][]

a,b是name，有name就给它个value

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>请选择你的爱好：</h4>
        <p>
            <input type="checkbox" name="a" value="唱歌">唱歌 #给它个value
            <input type="checkbox" name="b" value="跳舞">跳舞
            <input type="checkbox" name="c" value="学习">学习
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

选中之后提交 name value都获取到了：

![1286512-20190528175934941-4618635.png][]

network->all->name->头->查询字符串参数

![1286512-20190528180128717-1035557613.png][]

网络编程socket里的recv就能获取到这些字符串，然后分割正则获取每个元素等等 。获得这个唱歌，跳舞后，如果需要写入数据库那就写进去。

##### select 下拉菜单  #####

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>下拉列表 请选择你的爱好：</h4>
        <p>
            <select name="fav" >
                <option value="唱歌">唱歌</option>
                <option value="跳舞">跳舞</option>
                <option value="study">学习</option>
            </select>
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

由下可知：选择下拉列表点击登录后  键值name fav value 跳舞已经获取到了

![1286512-20190528181416069-958946160.png][]

默认选中：selected

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>下拉列表 请选择你的爱好：</h4>
        <p>
            <select name="fav" >
                <option value="唱歌" selected>唱歌</option>
                <option value="跳舞" >跳舞</option>
                <option value="study">学习</option>
            </select>
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

![1286512-20190528181908752-1877222145.png][]

select实现多选添加multiple。选项多的时候滚动条出来了。

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>下拉列表 请选择你的爱好：</h4>
        <p>
            <select name="fav" multiple>  
                <option value="唱歌" selected>唱歌</option>  #selected被选中的
                <option value="跳舞" >跳舞</option>
                <option value="study">学习</option>
                <option value="跳舞" >跳舞</option>
                <option value="跳舞" >跳舞</option>
                <option value="study">学习</option>
            </select>
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

![1286512-20190528182200784-1184880850.png][]

##### input中 的datetime-local类型 #####

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![1286512-20190528182830289-480782287.png][]

##### 多行文本框textarea #####

![复制代码][copycode.gif]

<form action="" method="get" >
        <h4>多行文本框：</h4>
        <p>
            <textarea name="" id="" cols="30" rows="10"></textarea>  #pycharm默认生成的大小
        </p>
        <p><input type="submit" value="登录"></p>
    </form>

![复制代码][copycode.gif]

可以拖动文本框改变大小

![1286512-20190528183331025-297932601.png][]

##### lable 标签 #####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
        <form action="">
            <label for="username">用户名：</label>
            <input type="text" id="username">
            <label for="pwd">密码：</label>
            <input type="text" id="pwd">
        </form>
        </body>
    </html>

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

#### 盒子标签 ####

div　　【独占一行的标签】

把网页分割为不同的逻辑区域

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01 div盒子标签</title>
        <style type="text/css">
            #top{
         
                /*行高等于盒子的高度 实现垂直居中*/
                height: 40px;
                line-height: 40px;
                background-color: #333;
                /* text-align: center; */
            }
            a{
         
                text-decoration: none;
                color: #b0b0b0;
                font-size: 14px;
            }
            /*类选择器
            选择器作用：选中标签
            */
            .sep{
         
                color: #666;
            }
        </style>
    </head>
    <body>
     
        <div id="top">
            <div class="top_l">
                <a href="#">小米商城</a>
                <span class="sep">|</span>
                <a href="#">MIUI</a>
                <span class="sep">|</span>
                <a href="#">lot</a>
                <span class="sep">|</span>
                <a href="#">云服务</a>
                <span class="sep">|</span>
                <a href="#">金融</a>
                <span class="sep">|</span>
                <a href="#">危机</a>
            </div>
            <div class="shop"></div>
            <div class="user_login"></div>
        </div>
        <div id="nav">
            小米导航
        </div>
        <div id="content">
            小米的主体内容
        </div>
        <div id="footer">
            小米的脚
        </div>
    </body>
    </html>

##### span标签 #####

【一行显示的标签】放在一个内容两边，会默认左右有一个空白的间距，并且可以改变其样式，例如颜色等

最后：

人如其名，懒得写，越写越累，各位看官手下留情，感谢来自朋友的帮助https://www.cnblogs.com/machangwei-8/ 允许我复制他的一部分内容。

转载于:https://www.cnblogs.com/langcainiao/p/10985968.html

[1364810-20181220002247512-934359161.jpg]: /images/20220109/56a38b1e1bd549d380333eb5b4836ead.png
[1644107-20190606174030793-656438778.png]: /images/20220109/670955a670674355a48d8b07b962306b.png
[1644107-20190606174103549-492676857.png]: /images/20220109/4ae60abb1f6a4589a96c11496152153f.png
[1644107-20190606175131084-1300635238.png]: /images/20220109/eede9d9f0e1b4de8a338eba25d3d8ae4.png
[1644107-20190606175544770-1906689066.png]: /images/20220109/bb65f898dd8e412b9f42bd70d823dbaa.png
[1644107-20190606175611218-1777176577.png]: /images/20220109/58dc99c0ccf8446ea9245283099a544d.png
[1644107-20190606175629179-1974897725.png]: /images/20220109/75934c1a45284c339e20e48bc1c66efb.png
[1364810-20180520080845241-107766243.png]: /images/20220109/646e0362b8ca4fb0b1071a3ec5cda87a.png
[1644107-20190606180158727-1279813904.png]: /images/20220109/0c6f96cdf37c468881c9e9e38edcfd1c.png
[1644107-20190606180418109-874611122.png]: /images/20220109/738d466eaaf545c9b17cc785bca40043.png
[1364810-20180520085018258-320527008.png]: /images/20220109/5dd85c910f9a48c382573cab1d163c2b.png
[1364810-20180520082108260-151310827.png]: /images/20220109/012af15da0b74e939af1614a9ec6ed21.png
[1364810-20180520092542606-792034884.png]: /images/20220109/c63759de4a704ff9a5c011d64bdf8bf9.png
[1286512-20190528154847496-195825644.png]: /images/20220109/47ea085a12cb4e9a8c2c54bd57fe275c.png
[1286512-20190528154919289-1834897202.png]: /images/20220109/b2017549139845c1be2ffc7dc104d2af.png
[1286512-20190528155539936-481602117.png]: /images/20220109/44946562780b48e3a4edd680ee25e005.png
[1286512-20190528155815496-1334822542.png]: /images/20220109/5353218073394ab5ba2781784c5953bf.png
[copycode.gif]: /images/20220109/a0c9ea972f4e4be59cf428841857f161.png
[1286512-20190528161847357-861630439.png]: /images/20220109/54e8108893f847709452e6c812f033d9.png
[1286512-20190528162329665-364282324.png]: /images/20220109/461d5f25c6554009a2c884553a922d83.png
[1286512-20190528162609124-281143054.png]: /images/20220109/f11b8a43beb64127b941207a8f36448f.png
[1286512-20190528162940335-1972742680.png]: /images/20220109/0982e76c69354133a16c56839ee3ac14.png
[1286512-20190528163314144-201062488.png]: /images/20220109/7103e01bc8a3449c851f344d741dd9ba.png
[1286512-20190528163650586-772905463.png]: /images/20220109/86e0c7dc32524102a8067d50641e500c.png
[1286512-20190528163931731-1407188917.png]: /images/20220109/0fd49f95967740948d056f142ce33c19.png
[1286512-20190528165517481-785547575.png]: /images/20220109/0e3c24abbf5641199ccf4aab35d5c09c.png
[1286512-20190528170140808-393054795.png]: /images/20220109/67b9506d565949dcbf1d6e61ac08b979.png
[1286512-20190528170422139-742952750.png]: /images/20220109/d033d81141834a8b99b989c670e3e61e.png
[1286512-20190528171621335-533121554.png]: /images/20220109/f9d942641acc4841af5f7b233d6d2a83.png
[1286512-20190528171544678-1741855700.png]: /images/20220109/79ffadbc0e554e05b8a53a1c8cdefd7e.png
[1286512-20190528173441451-403922414.png]: /images/20220109/35be867b391c4f909de86454c3f63262.png
[1286512-20190528173749054-1279681705.png]: /images/20220109/41e6b12335d3483a9bac9e96dbf2a6dd.png
[1286512-20190528174457911-1337314422.png]: /images/20220109/42d15d7f125642b6ae6a623fdbe94fe5.png
[1286512-20190528175412861-345898441.png]: /images/20220109/9ca508e21264478a98fd9e2829cff1f6.png
[1286512-20190528175613437-1748707988.png]: /images/20220109/c9a565600f85403892fddadd03429fa4.png
[1286512-20190528175934941-4618635.png]: /images/20220109/b9c619688349461d9855af759e536284.png
[1286512-20190528180128717-1035557613.png]: /images/20220109/4b4df2a8fd814c689b3e7c92c326377a.png
[1286512-20190528181416069-958946160.png]: /images/20220109/3fadede3eabd4cd2a0f65c035f9fa9bf.png
[1286512-20190528181908752-1877222145.png]: /images/20220109/a09f61499cf64f26907d4e2aa3231849.png
[1286512-20190528182200784-1184880850.png]: /images/20220109/a2488f09792f4fc7ae45189db48a14fc.png
[1286512-20190528182830289-480782287.png]: /images/20220109/573aa309855f4cb3ac9b2c9e178726af.png
[1286512-20190528183331025-297932601.png]: /images/20220109/fa88a773412a4bcaac9c2c2a8c8f73ec.png