eb前端-HTML

• HTML作用： 负责搭建页面结构和内容 （盖房子）
• 学习HTML主要学习的就是有哪些标签

文本相关标签

• h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗
• p 段落标签, 特点: 独占一行,自带上下间距
• hr 水平分割线
• br 换行
• b 加粗
• i 斜体
• u 下划线
• s 删除线

列表标签

• 无序列表: ul和li 组合 unordered list list item 列表项
• 有序列表: ol和li 组合 ordered list
• 列表嵌套: 有序列表和无序列表可以任意无限嵌套 .

图片标签img

• src: 资源路径
• 相对路径: 访问站内资源

1. 图片和页面在同级目录: 直接写图片名
2. 图片在页面的上级目录: ../图片名
3. 图片在页面的下级目录: 文件夹名/图片名

• 绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险

1. alt: 图片不能正常显示时显示的文本
2. title: 图片标题
3. width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放①像素②上级元素百分比

超链接a

• href: 资源路径, 作用类似图片标签的src
• a标签包裹文本为文本超链接, 包裹图片为图片超链接
• 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href="#xxx"

表格table

• 相关标签: table tr表示行 td表示列 th表头 caption标题
• 相关属性: border边框 colspan跨列 rowspan跨行

表单form

• 作用: 获取用户输入的各种信息 并提交给服务器
• 学习form表单主要学习的就是有哪些控件

分区标签

• 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
• 块级分区标签div: 特点是独占一行
• 行内分区标签span: 特点是共占一行
• 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
• HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签

1. header头
2. footer脚
3. main主体
4. section区域
5. nav 导航

CSS 层叠样式表

• Cascading Style Sheet
• 作用: 美化页面(装修)

如何在HTML页面中添加CSS样式代码

• 三种引入方式:

1. 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
2. 内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用
3. 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离

选择器

• 作用: 通过选择器找到页面中的元素之后再添加样式
• 1.标签名选择器: 选取页面中所有同名标签 格式: 标签名{样式代码}
• 2.id选择器: 当需要选择页面中某一个元素时使用 格式: #id{样式代码}
• 3.类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择 格式: .class{样式代码}
• 4.分组选择器: 分组选择器可以将多个选择器合并成一个 格式: h4,#id,.class{样式代码}
• 5.属性选择器: 通过元素的属性选择元素 格式: 标签名[属性名="属性值"]{样式代码}
• 6.任意元素选择器: 选择页面中所有标签 格式: *{样式代码}

复制整行快捷键 ctrl+D

注释快捷键 ctrl+shift+/

快速进入下一行 shift+回车

选择器续

• 1.子孙后代选择器: 通过元素之间的层级关系选择元素 格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p标签(包括后代)
• 2.子元素选择器: 通过元素之间的层级关系选择元素 格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)
• 3.伪类选择器: 选择的是元素的状态, 元素有哪些状态? 包括:未访问状态,访问过状态,悬停状态,点击状态 格式: a:link/visited/hover/active:{样式代码}

颜色赋值

三原色: 红绿蓝 ,red green blue rgb ,每个颜色的取值范围0-255

颜色赋值的几种方式:

• 颜色单词: 常见颜色单词都可以使用
• 6位16进制赋值: #ff0000
• 3位16进制赋值: #f00
• 3位10进制赋值: rgb(255,0,0)
• 4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度

背景图片

• background-image:url("路径") 设置背景图片
• background-size:100px 200px 设置背景图片尺寸
• background-repeat:no-repeat; 禁止重复
• background-position: 横向 纵向; 设置背景图片的位置,两种方式: 1像素 2百分比

文本和字体相关样式

• text-align:left/right/center; 文本水平对齐方式
• line-height:20px; 设置行高, 多行文本时可以控制行间距, 单行文本时可以控制垂直居中(因为文本默认是在当前所在行内居中)
• text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰
• text-shadow:颜色 x偏移值 y偏移值 浓度; 阴影
• font-size:20px; 设置字体大小
• font-weight:bold加粗/normal去掉加粗
• font-style:italic; 设置斜体
• font-family: xxx,xxx,xxx; 设置字体
• font:20px xxx,xxx,xxx; 这只字体大小+字体

元素的显示方式display

• block: 块级元素的默认值, 特点: 独占一行 可以修改宽高, 包括: h1-h6 , p, div
• inline: 行内元素的默认值, 特点: 共占一行 不可以修改宽高, 包括: span, b,i,s,u,超链接a
• inline-block:行内块元素默认值, 特点: 共占一行 并且可以修改宽高, 包括: img,input
• none: 隐藏元素
• 行内元素不能直接修改宽高, 如必须修改则先将元素的显示方式改成block或inline-block

盒子模型

• 盒子模型用来控制元素的显示效果包括: 元素内容content+外边距margin+边框border+内边距padding
• 元素内容content:控制元素的显示尺寸
• 外边距margin:控制元素的显示位置
• 边框border:控制边框效果
• 内边距padding:控制元素内容的位置

盒子模型之内容content

• 包括:width和height
• 赋值方式有两种:①像素②上级元素的百分比
• 行内元素不能直接修改宽高

盒子模型之外边距margin

• 作用: 控制元素的显示位置
• 赋值方式:

1. margin-left/right/top/bottom:10px; 单独某个方向赋值
2. margin:10px; 四个方向赋值
3. margin:10px 20px; 上下10 左右20
4. margin:10px 20px 30px 40px; 上右下左 顺时针赋值

• 行内元素上下外边距无效
• 上下相邻彼此添加外边距 取最大值
• 左右相邻彼此添加外边距 两者相加
• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

盒子模型之边框border

• 赋值方式:

1. border:1px solid red; 给四个方向添加边框
2. border-left/right/top/bottom:1px solid red; 单独给某个方向添加边框
3. border-radius:10px; 值越大越圆 当值超过宽高的一半时为正圆(前提是正方形)

盒子模型之内边距padding

• 作用: 控制元素内容的位置
• 赋值方式: 和外边距类似

1. padding-left/right/top/bottom:10px; 单独某个方向赋值
2. padding:10px; 四个方向赋值
3. padding:10px 20px; 上下和 左右赋值
4. padding:10px 20px 30px 40px; 上右下左顺时针赋值

• 给元素添加内边距会影响元素的显示宽高

CSS的三大特性

• 继承: 元素可以继承上级元素文本和字体相关的样式,部分标签自带的效果不受继承影响, 比如超链接字体颜色
• 层叠:多个选择器可能选择到同一个元素,如果添加的样式不同则全部层叠有效,如果作用的样式相同 则由优先级决定哪个生效
• 优先级: 指CSS中的选择器具有优先级, 作用范围越小优先级越高, !important>id>class>标签名>继承(属于间接选中)

元素的定位方式

• 五种定位方式:

1. 静态定位: position:static;
2. 相对定位: position:relative;
3. 绝对定位:
4. 固定定位: position: fixed;
5. 浮动定位: float:left/right

静态定位(文档流定位)

• 格式: position:static; (默认的定位方式)
• 特点: 元素以左上为基准, 块级元素从上往下排列,行内元素从左向右依次排列, 默认情况下 无法实现元素的层叠效果
• 如何控制元素的位置? 通过外边距控制元素的位置

相对定位

• 格式: position:relative;
• 特点: 元素不脱离文档流(仍然占着原来的位置) ,可以实现元素的层叠效果
• 如何控制元素的位置? 通过left/right/top/bottom 控制元素的显示位置,参照物是初始位置
• 应用场景: 当希望移动某一个元素其它元素不受影响时使用相对定位, 相对定位可以实现元素的层叠

绝对定位

• 格式:
• 特点: 元素脱离文档流(不占原来的位置),可以实现元素层叠
• 如何控制元素的位置? 通过left/right/top/bottom控制位置,参照物为窗口(默认)或某一个上级元素(需要在上级元素中添加position:relative作为参照物)
• 应用场景: 当需要往页面中添加一个元素并且不影响其它元素的显示位置,并且可以实现层叠效果

固定定位

• 格式: position:fixed;
• 特点: 脱离文档流
• 如何控制元素的位置? 通过left/right/top/bottom相对于窗口做偏移
• 应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动定位

• 格式: float:left/right;
• 特点: 脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止.
• 浮动元素一行装不下时会自动折行, 折行时有可能被卡住
• 当元素的所有子元素全部浮动时,自动识别的高度会为0,后面元素会顶上来导致显示异常,通过给元素添加overflow:hidden可以解决此问题
• 应用场景: 当需要将纵向排列的元素改成横向排列时使用.

溢出设置overflow

• visible超出部分显示(默认)
• hidden超出部分隐藏
• scroll 超出部分滚动显示

行内元素垂直对齐方式vertical-align

• top 上对齐
• middle中间对齐
• bottom下对齐
• baseline基线对齐(默认)

元素的显示层级z-index

当两个元素非静态定位时可能存在层叠的问题 通过z-index样式控制显示层级, 值越大显示越靠前

JavaScript

• 作用: 负责给页面添加动态效果
• 语言特点:

1. 属于脚本语言(不需要编译直接由浏览器解析执行)
2. 基于面向对象
3. 属于弱类型语言
4. 安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.
5. 交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些

如何在HTML页面中添加JS语言

• 三种引入方式:
• 内联: 在标签的事件属性中添加js代码,当事件触发时执行.

1. 事件: 是系统提供的一系列时间点.
2. 点击事件: 当点击元素时触发的时间点

• 内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码
• 外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面

变量, 数据类型,运算符,各种语句,方法,面向对象

变量

• JS属于弱类型语言
• let和var关键字的区别, 作用域有区别

1. 使用let声明的变量,作用域和Java语言的作用域类似
2. 使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量

数据类型

• JavaScript中只有对象类型
• 常见的对象类型包括:

1. 字符串: string 可以用单引号或双引号修饰
2. 数值: number 相当于Java中所有数值类型的总和
3. 布尔值: boolean true和false
4. 未定义: undefined 当变量只声明不赋值时属于未定义

• 获取变量类型的方法 typeof 变量;

运算符

• 算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数
• 关系运算符: > < >=<=!===和===
• ==: 先统一两个变量的类型 再比较值 "666"==666 true
• ===:先比较类型,类型相同后再比较值 "666"===666 false
• 逻辑运算符: && || !
• 赋值运算符:=+=-=*=/=%=++ --
• 三目运算符: 条件?值1:值2

各种语句:

• if else
• for
• while
• do while
• switch case

方法

• java: public 返回值类型 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 常见的四种方法:

1. 无参无返回值
2. 有参无返回值
3. 无参有返回值
4. 有参有返回值

• 三种声明方法的格式:

1. function 方法名(参数列表){方法体}
2. let 方法名=function (参数列表){方法体}
3. let 方法名=new Function("参数1","参数2","方法体");

和页面相关的方法

• 1.通过选择器获取页面中的元素对象

let 元素对象=document.querySelector("选择器")

• 2.获取和修改元素的文本内容

1. 元素对象.innerText="xxx"; 修改文本内容
2. 元素对象.innerText 获取文本内容

• 3.获取和修改input控件的值

1. 控件对象.value="xxx"; 修改
2. 控件对象.value 获取

NaN

• Not a Number: 不是一个数
• isNaN(x) 判断变量是否是NaN

JavaScript对象分类

• 内置对象:包括string,number,boolean等
• BOM: Browser Object Model, 浏览器对象模型, 包括和浏览器相关的内容
• DOM: Document Object Model, 文档对象模型,包括和页面标签相关的内容

BOM浏览器对象模型

• window: 此对象里面的属性和方法称为全局的属性和方法,访问时可以省略掉window.
• window中常见的方法:

1. alert("xxx")弹出提示框
2. confirm("xxx") 弹出确认框
3. prompt("xxx") 弹出文本框
4. isNaN(x) 判断变量是否是NaN
5. parseInt()和parseFloat() 把字符串转成整数或小数
6. console.log() 控制台输出
7. let timer=setInterval(方法,时间间隔) 开启定时器
8. clearInterval(timer) 停止定时器
9. setTimeout(方法,时间间隔) 开启只执行一次的定时器

• window对象中常见的属性
• location位置

1. location.href 获取和修改浏览器的请求地址
2. location.reload() 刷新页面

• history历史

1. history.length 获取历史页面数量
2. history.back() 返回上一页面
3. history.forward() 前往下一页面
4. history.go(n) n=1是前往下1页面 n=-1 返回上一页面 n=2 前往下2个页面 n=0代表刷新

DOM文档对象模型

• 包含和页面元素相关的内容

• 1.通过选择器获取页面中的元素对象

let 元素对象=document.querySelector("选择器")

• 2.获取和修改元素的文本内容

1. 元素对象.innerText="xxx"; 修改文本内容
2. 元素对象.innerText 获取文本内容

• 3.获取和修改input控件的值

1. 控件对象.value="xxx"; 修改
2. 控件对象.value 获取

• 4.创建元素对象

let 元素对象=document.createElement("标签名");

• 5.添加元素对象到某个元素里面

1. document.body.appendChild(元素对象);
2. 父元素.appendChild(元素对象);
3. 父元素.append(元素对象,元素对象,元素对象);

前端MVC设计模式

• MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
• Model: 模型, 指数据模型,这个数据一般来自于服务器
• View: 视图, 指页面标签内容
• Controller:控制器, 指将数据展示到视图中的过程代码
• 前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.

M,V,VM设计模式

• Model: 模型, 指数据模型,这个数据一般来自于服务器
• View: 视图, 指页面标签内容
• ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

Vue

• Vue框架是目前最流行的前端框架
• Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.
• 相关指令:

1. {{变量}}:插值, 让此处的文本内容和变量进行绑定
2. v-text="变量", 让元素的文本内容和变量进行绑定
3. v-html="变量", 让元素的html内容和变量进行绑定
4. v-bind:属性名="变量", 让元素的xxx属性和变量进行绑定 可以省略掉v-bind
5. v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.
6. v-on:事件名="方法", 事件绑定 简写@事件名="方法" , 调用的方法必须声明在Vue里面的methods里面

Vue指令(续)

• v-for="(变量,i) in 数组"; 遍历数组 同时重复生成当前标签,数量和数组中对象的数量一致
• v-if="变量" , 变量值为true时显示元素 ,为false时 删除元素
• v-else 和v-if结合使用 取反
• v-show="变量" , 变量值为true时显示元素 ,为false时 隐藏元素(需要频繁切换显示状态时使用)

ElementUI

• 官网地址: https://element.eleme.cn

笔记保留，如有侵权请联系删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

eb标准：

由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：

结构标准：

结构用于对网页元素进行整理和分类，主要指的是HTML。

表现标准：

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：

行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。

初识HTML：

html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。

HTML发展：

XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。

HTML中的注释：

 <!-- 注释标签：注释的内容 -->

条件注释：

条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。

    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
    <head> <!-- 网页的头部 -->
        <meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
        <meta name='description' content='this is description'> <!-- 描述网站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!--  网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
        <link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
        <title>标题</title> <!-- 网站的标题 -->
        <style type="text/CSS">  /* 用来写CSS代码，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 网页的主体 -->
        <h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
        <p>段落</p> <!-- 段落标签 -->
        <hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
        <br/> <!-- 换行标签 -->
        </div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
        <span>span</span> <!-- 无语义化标签分割用 -->                
        <strong>加粗</strong> <!-- 加粗标签 -->
        <b>加粗</b> <!-- 加粗标签 -->
        <i>倾斜</i> <!-- 倾斜标签 -->
        <em>倾斜</em> <!-- 倾斜标签 -->
        <s>删除线</s> <!-- 删除标签 -->
        <del>删除线</del> <!-- 删除标签 -->
        <u>下划线</u> <!-- 下划线标签 -->
        <ins>下划线</ins> <!-- 下划线标签 -->
        <img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
        <a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
        <ul> <!-- 无序列表 -->
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
            <li>中国</li>
            <li>美国</li>
            <li>英国</li>
        </ol>
        <dl> <!-- 自定义列表 -->
            <dt>分类1</dt> <!-- 分类名称 -->
            <dd>分类1第1项</dd> <!-- 类的项 -->
            <dd>分类1第2项</dd>
            <dt>分类2</dt>
            <dd>分类2第1项</dd>
            <dd>分类2第2项</dd>
        </dl>
        <table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
        <caption>信息表</caption> <!-- 表格标题 -->
        <tr> <!-- 定义行 -->
            <th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr> <!-- 定义行 -->
            <td>小明</td> <!-- 定义单元格，表格里面没有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan