小白入门之前端网页技术HTML

╰+攻爆jí腚メ 2021-07-16 12:50 459阅读 0赞

### 文章目录 ###

*  前端技术：
 *   *  学习方法
     *   *  前端要怎么学？
         *  前端技术栈
     *  HBuilderX
     *   *  介绍
         *  安装
         *  主题
         *  字体
         *  备注字体颜色
         *  项目结构
         *  jQuery语法支持
     *  Web概述
     *  静态页面HTML
     *   *  概念
         *  结构
         *  入门案例
         *  语法
     *  常用标签
     *   *  标题标签
         *  列表标签
         *  图片标签
         *  超链接标签
         *  Input标签
         *  表格标签
         *  表单标签
         *  其他标签
     *  永和门店管理系统
     *  学生管理系统
     *  H5播放视频

# 前端技术： #

## 学习方法 ##

### 前端要怎么学？ ###

前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-udWFoW0m-1622524547943)(RackMultipart20210601-4-m99z7q\_html\_5588926e3af02795.png)\]][img-udWFoW0m-1622524547943_RackMultipart20210601-4-m99z7q_html_5588926e3af02795.png]

但从整体来看（前端占软件开发总量的百分之十左右，地位可见一斑）；从技术的含金量来看（如：业务功能是核心，远超UI的作用；分布式缓存redis的作用远超vue前端），从职业的发展路径来看（通向架构师之路，大都由后端工程师晋升的，前端几乎没有）；从薪资的天花板来看（随着年头的拉长，后端工程师的薪资是前端的几倍），后端优势远大于前端。所以对于大家而言，千万不要把重心放在前端技术上，会用，会查，会改才是正确的定位！

### 前端技术栈 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEFXt4Ps-1622524547953)(RackMultipart20210601-4-m99z7q\_html\_29c2cd04815f81b1.png)\]][img-mEFXt4Ps-1622524547953_RackMultipart20210601-4-m99z7q_html_29c2cd04815f81b1.png]

*  HTML超文本标记语言实现页面展现，形成静态网页
 *  CSS层叠样式表实现页面美化
 *  JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页
 *  React facebook出品前端、移动端JavaScript框架
 *  Angular google 出品基于TypeScript的开源 Web 应用框架
 *  Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发
 *  NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TcUHCCVZ-1622524547957)(RackMultipart20210601-4-m99z7q\_html\_e60c47cf6b814a43.png)\]][img-TcUHCCVZ-1622524547957_RackMultipart20210601-4-m99z7q_html_e60c47cf6b814a43.png]

目前市场主流是ES6标准，但TypeScript可能会成为趋势，如Vue 3.0选用的语言则为TypeScript。TypeScript将带来JavaScript的华丽转身，迈入强语言行列，所以其发展趋势不容小觑。

Vue Element Admin 是通过Vue框架结合饿了吗的ElementUI，并在其基础上实现了后台管理的基本功能，企业在其基础上，直接二次开发，添加业务，实现敏捷编程。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5YaZPg3w-1622524547959)(RackMultipart20210601-4-m99z7q\_html\_d3c2885520645fec.jpg)\]][img-5YaZPg3w-1622524547959_RackMultipart20210601-4-m99z7q_html_d3c2885520645fec.jpg]

## HBuilderX ##

### 介绍 ###

HBuilder是[DCloud][]（[数字天堂][Link 1]）推出的一款支持[HTML5][]的[Web][]开发[IDE][]。 HBuilder的编写用到了[Java][]、[C][]、Web和[Ruby][]，[本身][Link 2]主体是由Java编写。

它基于[Eclipse][]，所以顺其自然地兼容了[Eclipse][]的[插件][Link 3]，用过Eclipse的开发者使用HBuilder会非常顺手。形成HBuilderX开发前端内容，Eclipse/Idea开发后端内容的格局。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gy8DZUVs-1622524547963)(RackMultipart20210601-4-m99z7q\_html\_cbd41ff6ec1f9ed.png)\]][img-gy8DZUVs-1622524547963_RackMultipart20210601-4-m99z7q_html_cbd41ff6ec1f9ed.png]

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升[HTML][]、[js][]、[css][]的开发效率。

### 安装 ###

官网：https://www.dcloud.io/hbuilderx.html

安装app版本，整体下来近600m。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aCwWb0K7-1622524547965)(RackMultipart20210601-4-m99z7q\_html\_d9384e25bb3db9fc.png)\]][img-aCwWb0K7-1622524547965_RackMultipart20210601-4-m99z7q_html_d9384e25bb3db9fc.png]

### 主题 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LmK9UvgO-1622524547968)(RackMultipart20210601-4-m99z7q\_html\_31078ba115c2b9d6.png)\]][img-LmK9UvgO-1622524547968_RackMultipart20210601-4-m99z7q_html_31078ba115c2b9d6.png]

### 字体 ###

默认字体i和l分不清，换成Verdana字体。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29eA5TsR-1622524547970)(RackMultipart20210601-4-m99z7q\_html\_4c609fba3fe0aabd.png)\]][img-29eA5TsR-1622524547970_RackMultipart20210601-4-m99z7q_html_4c609fba3fe0aabd.png]

### 备注字体颜色 ###

默认灰色看不清晰，可以换成黑色，直接编辑Default.xml，修改下面3行的颜色，重新启动HBuilderX即可。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]

### 项目结构 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcjsbpVq-1622524547979)(RackMultipart20210601-4-m99z7q\_html\_229c5bd6bd7af05.png)\]][img-dcjsbpVq-1622524547979_RackMultipart20210601-4-m99z7q_html_229c5bd6bd7af05.png]

### jQuery语法支持 ###

HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A09oy11O-1622524547982)(RackMultipart20210601-4-m99z7q\_html\_c5965d15cf1b373c.png)\]][img-A09oy11O-1622524547982_RackMultipart20210601-4-m99z7q_html_c5965d15cf1b373c.png]

## Web概述 ##

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jla0yree-1622524547984)(RackMultipart20210601-4-m99z7q\_html\_96371a0fb852cc09.png)\]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMHrS3jT-1622524547985)(RackMultipart20210601-4-m99z7q\_html\_1972cf7982ce6751.png)\]][img-RMHrS3jT-1622524547985_RackMultipart20210601-4-m99z7q_html_1972cf7982ce6751.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]

## 静态页面HTML ##

### 概念 ###

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，类比java这种强语言，那就是一个天上一个地下，但它小而美，网站开发它却是霸主。

HTML历史上有如下版本：

*  HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布
 *  HTML 2.0：1995年11月作为RFC 1866发布
 *  HTML 3.2：1997年1月14日，W3C推荐标准
 *  HTML 4.0：1997年12月18日，W3C推荐标准
 *  HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准
 *  HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手

### 结构 ###

*  文档声明，用来声明HTML文档所遵循的HTML规范。
 *  头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
 *  体部分，用来存放网页要显示的数据。
 *  声明网页标题
 *  用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。

### 入门案例 ###

<!doctype html>
    <html>
    	<head>
    		<title>quickstart</title>
    		
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		hello html ~
    		你好呀
    		
    	</body>
    </html>

### 语法 ###

*  HTML标签

HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。

如果开始和结束中间没有内容，可以合并成一个自闭标签

*  HTML属性

HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

如：<a href="" target="" name="" id=""></a>

*  HTML注释

格式：

注意：不能交叉嵌套！

*  如何在网页中做空格和换行

换行：\<br/\>
    
    空格：在HTML中，多个空格会被当成一个空格来显示。

## 常用标签 ##

### 标题标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3eLuFsRU-1622524547986)(RackMultipart20210601-4-m99z7q\_html\_a749c2ef6bea9da5.png)\]][img-3eLuFsRU-1622524547986_RackMultipart20210601-4-m99z7q_html_a749c2ef6bea9da5.png]

<!doctype html>
    <html>
    	<head>
    		<title>01</title>
    		<meta charset="utf-8"/>
    	</head>
    	<body>
    		
    		<h1 align=”center”>我是1号标题</h1>
    		<h2>我是2号标题</h2>
    		<h3>我是3号标题</h3>
    		<h4>我是4号标题</h4>
    		<h5>我是5号标题</h5>
    		<h6>我是6号标题</h6>
    	</body>
    </html>

### 列表标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FRIqJYes-1622524547989)(RackMultipart20210601-4-m99z7q\_html\_2d8a3b3d4832d231.png)\]][img-FRIqJYes-1622524547989_RackMultipart20210601-4-m99z7q_html_2d8a3b3d4832d231.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>标题标签</title>
    	</head>
    	<body>
    		
    		<ul type="circle">
    			<li>中国</li>
    			<li>美国</li>
    			<li>小日本</li>
    		</ul>
    		<ul type="square">
    			<li>中国</li>
    			<li>美国</li>
    			<li>小日本</li>
    		</ul>
    		<ul type="disc">
    			<li>中国</li>
    			<li>美国</li>
    			<li>小日本</li>
    		</ul>
    	</body>
    </html>

### 图片标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKgW0jTg-1622524547990)(RackMultipart20210601-4-m99z7q\_html\_ac5bdafd79ffcc99.png)\]][img-KKgW0jTg-1622524547990_RackMultipart20210601-4-m99z7q_html_ac5bdafd79ffcc99.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>标题标签</title>
    	</head>
    	<body>
    		
    		
    		<img src="1.jpg" border="10px" width="50%" height="30%">
    	</body>
    </html>

### 超链接标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dAvzn1OD-1622524547992)(RackMultipart20210601-4-m99z7q\_html\_a68b0a50ee70e0c2.png)\]][img-dAvzn1OD-1622524547992_RackMultipart20210601-4-m99z7q_html_a68b0a50ee70e0c2.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>标题标签</title>
    	</head>
    	<body>
    		
    		
    		<a href="http://www.baidu.com" target="_blank">点我</a>
    		<a name="_top">java从入门到精通</a>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    			<h6>你好java</h6>
    		<a href="#_top">回到顶部</a>
    			
    		<br><br><br><br>
    	</body>
    </html>

### Input标签 ###

<input type="text" />      普通文本框
    <input type="password" /> 密码
    <input type="radio"/>男   单选框
    <input type="number" />   数字值
    <input type="week" />	日历
    <input type="checkbox" />杨幂  复选框
    <input type="button" value="点我一下"/>
    <input type="submit" value="提交数据"/>

### 表格标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1cQU74W-1622524547994)(RackMultipart20210601-4-m99z7q\_html\_e87275fbddfa8f12.png)\]][img-A1cQU74W-1622524547994_RackMultipart20210601-4-m99z7q_html_e87275fbddfa8f12.png]  
![在这里插入图片描述][20210601132603693.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>各种标签</title>
    	</head>
    	<body>
    		
    		<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">
    			<tr>
    				<td colspan="2">11</td> 
    				
    				<td>13</td>
    			</tr>
    			<tr>
    				<td>21</td>
    				<td>22</td>
    				<td rowspan="2">23</td> 
    			</tr>
    			<tr>
    				<td>31</td>
    				<td>32</td>
    				
    			</tr>
    		</table>
    	</body>
    </html>

### 表单标签 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xaGk0vCh-1622524547996)(RackMultipart20210601-4-m99z7q\_html\_bad7f2d6e9b5dcb6.png)\]][img-xaGk0vCh-1622524547996_RackMultipart20210601-4-m99z7q_html_bad7f2d6e9b5dcb6.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>form表单</title>
    	</head>
    	<body>
    
    		
    		
    		<form method="post">
    			<table border="1px" bgcolor="bisque" cellspacing="0" width="35%" cellpadding="3">
    				<th colspan="2">注册表单</th>
    				<tr>
    					<td>用户名:</td>
    					<td><input type="text" name="user"/></td>
    				</tr>
    				<tr>
    					<td>密码:</td>
    					<td><input type="password" name="pwd"/></td>
    				</tr>
    				<tr>
    					<td>确认密码:</td>
    					<td><input type="password" name="repwd"/></td>
    				</tr>
    				<tr>
    					<td>昵称:</td>
    					<td><input type="text" name="nick"/></td>
    				</tr>
    				<tr>
    					<td>邮箱:</td>
    					<td><input type="text" name="mail"/></td>
    				</tr>
    				<tr>
    					<td>性别:</td>
    					<td>
    				
    
    						<input type="radio" name="sex" value="1"/>男
    						<input type="radio" name="sex" value="2"/>女
    					</td>
    				</tr>
    				<tr>
    					<td>爱好:</td>
    					<td>
    					
    					<input type="checkbox" name="like" value="1"/>篮球
    					<input type="checkbox" name="like" value="2"/>足球
    					<input type="checkbox" name="like" value="3"/>排球
    					</td>
    				</tr>
    				<tr>
    					<td>城市:</td>
    					<td>
    				<select name="city"> 
    							<option value="1">北京</option> 
    							<option value="2">上海</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td>头像:</td>
    					<td>
    						<input type="file" name="path"/>
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center">
    						<button type="submit">提交</button>
    					</td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>

### 其他标签 ###

<div>大家好</div>
    <div>大家好</div>
    <div>大家好</div>
    
    <p> Nice</p>
    <p> Nice</p>
    <p> Nice</p>
    
    <span> hello</span>
    <span> hello</span>
    <span> hello</span>

## 永和门店管理系统 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]

<!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>永和大王账单</title>
    </head>
    <body>
    	<div>顾客联</div>
    	<div>请您留意取餐账单号</div>
    	<div>自取顾客联</div>
    	<div>永和大王（北三环西路店）</div>
    	<div>010-62112313</div>
    	<div>--结账单--</div>
    	<div>账单号：P000009</div>
    	<div>账单类型：食堂</div>
    	<div>人数：1</div>
    	<div>收银员：张静</div>
    	<div>开单时间：2018-04-17 07:24:11</div>
    	<div>结账时间：2018-04-17 07:24:22</div>
    
    	<hr style="border : 1px dashed ;" />
    	<div>
    		<table>
    		  <tr>
    <td width="40">数量</td>
    <td width="130">品项</td>
    <td>金额</td>
    </tr>
    		  <tr>
    		  	    <td>1</td>
    <td>油条豆浆套餐</td>
    <td>7.00</td>
    		  </tr>
    		  <tr>
    		  	  <td> </td>
    <td>1 X --非矾油条</td>
    <td> </td>
    		  </tr>
    		  <tr>
    		  	   <td> </td>
    <td>1 X --现磨豆浆（热/甜）</td>
    <td> </td>
    		  </tr>
    		</table>
    	</div>
    	<hr style="border : 1px dashed ;" />
    	<div>
    		<table>
    		  <tr>
    		  	    <td width="140">支付宝花呗一元早餐</td>
    <td width="30">1</td>
    <td width="30" align="right">-3.00</td>
    		  </tr>
    		  <tr>
    		  	    <td>合计</td>
    <td> </td>
    <td width="30" align="right">4.00</td>
    		  </tr>
    		  <tr>
    		      	<td>支付宝</td>
    <td> </td>
    <td width="30" align="right">1.00</td>
    		  </tr>
    		  <tr>
    		  	   <td>支付宝补贴</td>
    <td> </td>
    <td width="30" align="right">3.00</td>
    		  </tr>
    		</table>
    	</div>
    	<hr style="border : 1px dashed ;" />
    	<div>打印时间：2018-04-17 07:24:23</div>
    	<hr style="border : 1px dashed ;" />
    	<div>根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
    	<div><img src=""></div>
    	<div>官网：www.yonghe.com.cn</div>
    	<div>加盟热线：86-21-60769397 或 86-21-60799002</div>
    	<br/>
    </body>
    </html>

## 学生管理系统 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]

## H5播放视频 ##

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cCgjolu-1622524547999)(RackMultipart20210601-4-m99z7q\_html\_cb3592d41d9441da.png)\]][img-7cCgjolu-1622524547999_RackMultipart20210601-4-m99z7q_html_cb3592d41d9441da.png]

[img-udWFoW0m-1622524547943_RackMultipart20210601-4-m99z7q_html_5588926e3af02795.png]: /images/20210716/3b2872f78ec44c2a8bc1a78d595d302f.png
[img-mEFXt4Ps-1622524547953_RackMultipart20210601-4-m99z7q_html_29c2cd04815f81b1.png]: /images/20210716/c3e1e22481824dc39a3a78cb2a501094.png
[img-TcUHCCVZ-1622524547957_RackMultipart20210601-4-m99z7q_html_e60c47cf6b814a43.png]: /images/20210716/fb52c596e65f4dfab11b686e3f9ef9ae.png
[img-5YaZPg3w-1622524547959_RackMultipart20210601-4-m99z7q_html_d3c2885520645fec.jpg]: /images/20210716/34692c6b5ec54347831ac1609bc3b842.png
[DCloud]: https://baike.baidu.com/item/DCloud
[Link 1]: https://baike.baidu.com/item/%E6%95%B0%E5%AD%97%E5%A4%A9%E5%A0%82/244387
[HTML5]: https://baike.baidu.com/item/HTML5
[Web]: https://baike.baidu.com/item/Web/150564
[IDE]: https://baike.baidu.com/item/IDE/8232086
[Java]: https://baike.baidu.com/item/Java/85979
[C]: https://baike.baidu.com/item/C/7252092
[Ruby]: https://baike.baidu.com/item/Ruby/11419
[Link 2]: https://baike.baidu.com/item/%E6%9C%AC%E8%BA%AB/126627
[Eclipse]: https://baike.baidu.com/item/Eclipse/61703
[Link 3]: https://baike.baidu.com/item/%E6%8F%92%E4%BB%B6/369160
[img-gy8DZUVs-1622524547963_RackMultipart20210601-4-m99z7q_html_cbd41ff6ec1f9ed.png]: /images/20210716/9f3d8e83f59b406b82e7dbc7e11acdca.png
[HTML]: https://baike.baidu.com/item/HTML
[js]: https://baike.baidu.com/item/js/10687961
[css]: https://baike.baidu.com/item/css/5457
[img-aCwWb0K7-1622524547965_RackMultipart20210601-4-m99z7q_html_d9384e25bb3db9fc.png]: /images/20210716/5d4936b3e534476fbae1939d4a7987c5.png
[img-LmK9UvgO-1622524547968_RackMultipart20210601-4-m99z7q_html_31078ba115c2b9d6.png]: /images/20210716/9019adf2ed1a453685de3c6fc9a9e949.png
[img-29eA5TsR-1622524547970_RackMultipart20210601-4-m99z7q_html_4c609fba3fe0aabd.png]: /images/20210716/84c57646b2cd40b2aa2faabf4d449fec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70]: /images/20210716/89e250e208fe45a4b8dc5488440d8904.png
[img-dcjsbpVq-1622524547979_RackMultipart20210601-4-m99z7q_html_229c5bd6bd7af05.png]: /images/20210716/9e311ce5d13f40e8964ce33eb038442f.png
[img-A09oy11O-1622524547982_RackMultipart20210601-4-m99z7q_html_c5965d15cf1b373c.png]: /images/20210716/23d6c363f1dc49ef9a74853180a64a45.png
[img-RMHrS3jT-1622524547985_RackMultipart20210601-4-m99z7q_html_1972cf7982ce6751.png]: /images/20210716/cc0f9e9507104fa58843d90f59d0e9fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 1]: /images/20210716/891a1aaeb5e640cba3c8e0121310d61e.png
[img-3eLuFsRU-1622524547986_RackMultipart20210601-4-m99z7q_html_a749c2ef6bea9da5.png]: /images/20210716/591ef5bebafc4f0fb9e7c2bbc3b1cf4b.png
[img-FRIqJYes-1622524547989_RackMultipart20210601-4-m99z7q_html_2d8a3b3d4832d231.png]: /images/20210716/744b932941f8443db68ac33d8cf176b1.png
[img-KKgW0jTg-1622524547990_RackMultipart20210601-4-m99z7q_html_ac5bdafd79ffcc99.png]: /images/20210716/9cfc15ffe00f4ebd9bc44ab7f605fe54.png
[img-dAvzn1OD-1622524547992_RackMultipart20210601-4-m99z7q_html_a68b0a50ee70e0c2.png]: /images/20210716/9b996165533f4c89a7fcfed4e0ac5d47.png
[img-A1cQU74W-1622524547994_RackMultipart20210601-4-m99z7q_html_e87275fbddfa8f12.png]: /images/20210716/57f8ecda8ece43a38fa111bcee33534d.png
[20210601132603693.png]: /images/20210716/ea1442903c2b43efbfc49dfaff89e4f8.png
[img-xaGk0vCh-1622524547996_RackMultipart20210601-4-m99z7q_html_bad7f2d6e9b5dcb6.png]: /images/20210716/699b4ebdbc594f55825e0424580793b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 2]: /images/20210716/ae5abce1c2954b4f8a056f2ffd3b2f05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY_size_16_color_FFFFFF_t_70 3]: /images/20210716/02c4bd9784824f2c86cb76341dc561f0.png
[img-7cCgjolu-1622524547999_RackMultipart20210601-4-m99z7q_html_cb3592d41d9441da.png]: /images/20210716/2a630e83b6f944c09a598e2c5ef14a80.png