gin 框架：Web 前端开发基础
|
146
|
0
|
Gin 框架,前端

2924 字
|
40 分钟

1 Web前端开发基础

我们想要掌握前端就需要学习以下技能

  • HTML

  • CSS

  • JavaScript

  • JavaScript库：jQuery

1.1 网页组成

例如一个index.html页面：

  • HTML标记语言：组成网页架构的元素组件

  • CSS 样式语言：美化网页的样式，例如让网页的字体有颜色等

  • JavaScript 程式语言：控制网页的动态效果

  • JQuery 程式语言：协助及加强JavaScript的实现


例如：大家所熟知的百度首页，右击->查看网页源代码即可看到HTML内容，这些都是通过 HTML 构建的

下面为网页代码结构：

2 HTML 标记语言

  • HTML介绍

  • 文本格式化标签

  • 列表标签

  • 超链接标签

  • 图片标签

  • 表格标签

  • 表单标签

  • 列表标签

  • 按钮标签

  • <div>标签

2.1 HTML 介绍

HTML：是一种用于创建网页的标记语言, 可以使用HTML创建网页，用浏览器打开会自动解析。

HTML是由标签和内容构成。

HTML 伪代码结构：

<!-- 
第一级为 html
第二级为 head、body
    head 用于编写当前页面的属性信息，比如该页面叫什么名字、比如这个页面还有那些描述、还可引入 JavaScript、CSS 等
    body 是整个页面的主要内容，如前端页面中所看到的整个内容都是写入到 body 中的
-->

<html> 
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容...
</body>
</html>

2.1.1 HTML 程序初体验

1 在 Goland 上创建一个 HTML 文件

2 编写下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
你好！世界！！
</body>
</html>

3 点击 run 运行该 html 文件

4 默认会打开浏览器，默认走的是 goland 的代理从而实现该网页

3 HTML 常用标签

在下面的内容中是在 HTML 种必须掌握的标签必须孰能熟能生巧

3.1 HTML：文本格式化标签

文本格式的标签主要用来修饰文字，比如刚才上面示例的 你好，世界！ 的展示中就是对这类文字的修饰

比如将字体变大或者引用字体、加粗、斜线等

3.1.1 换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
你好！世界！
你好！Go！
你好！Vue！
</body>
</html>

虽然我们在代码中是将每个内容进行了换行分割，但是通过浏览器可以看到他默认是没有换行的而是一行进行渲染

但是我们可以通过 <br> 标签实现对代码块中的内容进行换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
你好！世界！<br>
你好！Go！<br>
你好！Vue！
</body>
</html>

已经实现换行

或者通过 <p> 标签，该标签表示一个段落，从而也能够实现换行的这么一个效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <p>你好！世界</p>
    <p>你好！Go</p>
    <p>你好！Vue！</p>
</body>
</html>

但是可以看到间距相对较大，应为 p 标签表示一个段落

3.1.2 标题

比如当我们在浏览网页的时候经常可以看到一些大的标题，所以我们可以通过 <h> 标签来实现

默认有 1-6 ，6 种标签，分别代表着由大到小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>学习前端开发</h1>
    <h2>学习前端开发</h2>
    <h3>学习前端开发</h3>
    <h4>学习前端开发</h4>
    <h5>学习前端开发</h5>
    <h6>学习前端开发</h6>
    <p>你好！世界</p>
    <p>你好！Go</p>
    <p>你好！Vue！</p>
</body>
</html>

3.1.3 斜体

通过 <i> 标签实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>学习前端开发</h1>
    <h2>学习前端开发</h2>
    <h3>学习前端开发</h3>
    <h4>学习前端开发</h4>
    <h5>学习前端开发</h5>
    <h6>学习前端开发</h6>
    <p>你好！世界</p>
    <p>你好！Go</p>
    <p>你好！Vue！</p>
    <i>你好 gin！</i>
</body>
</html>

可以看到是一个斜体

3.1.4 加粗

通过 <b> 标签实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>学习前端开发</h1>
    <h2>学习前端开发</h2>
    <h3>学习前端开发</h3>
    <h4>学习前端开发</h4>
    <h5>学习前端开发</h5>
    <h6>学习前端开发</h6>
    <b>你好！世界</b>
    <p>你好！Go</p>
    <p>你好！Vue！</p>
    <i>你好 gin！</i>
</body>
</html>

可以看到已经加粗

3.1.5 删除线

通过 <del> 实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>学习前端开发</h1>
    <h2>学习前端开发</h2>
    <h3>学习前端开发</h3>
    <h4>学习前端开发</h4>
    <h5>学习前端开发</h5>
    <h6>学习前端开发</h6>
<!--    删除线-->
    <del>你好！世界</del>
    <p>你好！Go</p>
    <p>你好！Vue！</p>
    <i>你好 gin！</i>
</body>
</html>

3.2 HTML：列表标签

3.2.1 ul 无序列表

ul 标签是一个无序的列表，例如显示项目符号，而不像有序列表一样显示 1.2.3 这样的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
        <ul>
            <!--    li 实现对列表的分列-->
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ul>
</body>
</html>

可以看到浏览器就已经实现了分列，但是看到的是一个实心圆圈，我们可以通过 square、circle 来实现其他的展示效果

3.2.1.1 调整分列效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
        <!--  type="square" 调整为实心方块  -->
        <ul type="square">
            <!--    li 实现对列表的分列-->
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ul>
</body>
</html>

可以看到已经变味了方块

3.2.2 ol 有序列表

可以通过 type=1 默认数字排序，其他排序: A/a/l/i/1 等

<ol> 是有顺序的将列表进行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
        <!--  type="square" 调整为实心方块  -->
        <ul type="square">
            <!--    li 实现对列表的分列-->
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ul>
    ol有序！<br>
        <ol>
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ol>
</body>
</html>

浏览器访问可以看到默认就由数字来进行排序

3.2.2.1 调整分列效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
        <!--  type="square" 调整为实心方块  -->
        <ul type="square">
            <!--    li 实现对列表的分列-->
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ul>
    ol有序！<br>
        <!--   type="i" 类实现有序展示  -->
        <ol type="i">
            <li>HTML</li>
            <li>JavaScript</li>
            <li>CSS</li>
        </ol>
</body>
</html>

3.3 HTML：超链接标签

超链接标签：<a href="网址" ></a>

所谓超链接就是点击该标签从而实现跳转到其他的页面

3.3.1 超链接跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <a href="https://www.baidu.com">跳转标签</a>
</body>
</html>

当我们点击跳转标签的时候就会跳转到百度

但是通过这种方式跳转会发现它默认在当前的 web 页面打开一个百度，那么我想让他重新打开一个 web 页面就需要通过 target 标签实现

3.3.2 打开新标签

通过 target="_blank" 从而实现开启一个新的 web 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <a href="https://www.baidu.com" target="_blank">跳转标签</a>
</body>
</html>

可以看到是打开了一个新的窗口，这样的话原有窗口还没有关闭

3.4 HTML：图片标签

<img src=“图片文件路径”alt=“图片提示”>


1 创建 image 目录，一般用来存放图片

$ mkdir images

# 上次图片
$ ls
testIMG.png

2编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <img src="./images/testIMG.png">
</body>
</html>

3 浏览器访问图片已经渲染

3.4.1 alt 图片加载失败标签

该标签用于当对应的图片无法正常渲染的时候就会提示该文字，并让用户知道该文字无法加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <!-- test.png 没有该图片 -->
    <img src="./images/test.png" alt="无法加载">
</body>
</html>

3.5 HTML：表格标签

数据表格是我们相对较常用，比如我们希望能够更为直观的展示我们的数据，想要达到这种效果有两种方式：

  1. 如 xslx 表格
  2. 如可视化图表展示

表格标签常用字段：

  • table 表格标签

  • thead 表格标题

  • tr 行标签

  • th 列名

  • tbody 表格内容

  • tr 列标签

  • td 列内容

数据表格是我们在写管理后台中最为常见的一种展示方式，有条理让我们能够一目了然的就能够知道对应的数据

1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <!-- 第一级是一个 table 用来定义表格类型 -->
    <table border="1">
        <!-- 二级标签 thead 就是该标签的头部用来定义头部数据表格的显示-->
        <thead>
            <!-- 三级标签 称为行标签 ，表格地一行一般都是头部标签 -->
            <tr>
                <!-- 四级标签 列名称 -->
                <th>主机名</th>
                <th>IP</th>
                <th>操作系统</th>
            </tr>
        </thead>

        <!-- 对应面第二级标签，这是该表格的内容 -->
        <tbody>
            <!-- 行标签 -->
            <tr>
                <!-- 四级标签 行内容 -->
                <td>www.baidu.com</td>
                <td>10.0.0.1</td>
                <td>Centos 7</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2 浏览器

3 假如现在我还想添加一行就可以直接在 <tr> 标签下添加即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>前端开发技术栈</h1>
    <!-- 第一级是一个 table 用来定义表格类型 -->
    <table border="1">
        <!-- 二级标签 thead 就是该标签的头部用来定义头部数据表格的显示-->
        <thead>
            <!-- 三级标签 称为行标签 ，表格地一行一般都是头部标签 -->
            <tr>
                <!-- 四级标签 列名称 -->
                <th>主机名</th>
                <th>IP</th>
                <th>操作系统</th>
            </tr>
        </thead>

        <!-- 对应面第二级标签，这是该表格的内容 -->
        <tbody>
            <!-- 行标签 -->
            <tr>
                <!-- 四级标签 行内容 -->
                <td>www.baidu.com</td>
                <td>10.0.0.1</td>
                <td>Centos 7</td>
            </tr>
            <!-- 添加第二段内容 -->
            <tr>
                <!-- 四级标签 行内容 -->
                <td>www.xxx.com</td>
                <td>192.0.0.1</td>
                <td>Centos 8</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

4 可以看到我们又新加入了一条数据

3.6 表单标签

表单标签：<form></form>，在 form 就可以写多个表单

所谓的表单其实就是在网页上输入一个东西、或者选择一个东西就是一个表单

表单项标签：<input> ，在 input 中可以写多个表单项

3.6.1 表单范例

这里通过代码模拟一个用户登录系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>欢迎访问用户管理系统</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        用户名:<input type="text"> <br>
        密  码:<input type="password"> <br>
        <!-- input type="submit" 提交按钮 -->
        <input type="submit" >
    </form>
</body>
</html>

可以看到密码是隐式的，因为在密码中使用了 password 类型，如果当我们点了提交就会直接提交到 <form action="提交地址"></form> action 中

3.6.1.1 radio 单选

当然我们还可以在 input 标签中通过 radio 类型来实现单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="text"> <br>
        所在地:<br>
            <!-- name 就会保存我们在 web 页面上选择的这个值 -->
            <input type="radio" name="city" value="北京">北京 <br>
            <input type="radio" name="city" value="上海">上海 <br>
            <input type="radio" name="city" value="深圳">深圳 <br>
        <!-- input type="submit" 提交按钮 -->
        <input type="submit" >
    </form>
</body>
</html>

可以看到当前浏览器只能选择一个

3.6.1.2 checkbox 多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="text"> <br>
        兴趣爱好:<br>
            <!-- name 就会保存我们在 web 页面上选择的这个值 -->
            <input type="checkbox" name="aihao" value="玩游戏">玩游戏 <br>
            <input type="checkbox" name="aihao" value="看书">看书 <br>
            <input type="checkbox" name="aihao" value="看电影">看电影 <br>
        <!-- input type="submit" 提交按钮 -->
        <input type="submit" >
    </form>
</body>
</html>

可以看到当前可以选择多个并且默认为方框

3.7 HTML：列表标签

所谓的列表标签其实就是一个对应的下拉框，其实下拉框也可以分为单选和多选

下拉列表标签：<select></select>

下拉列表选项标签：<option> </option>

3.7.1 列表单选范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="password"> <br>
        性别:<br>
            <!-- 通过 select 来进行做列表标签 name 保存我们所选择的值 -->
            <select name="sex" id="">
                <!-- 列表选项的标签为 option -->
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        <!-- input type="submit" 提交按钮 -->
        <input type="submit" >
    </form>
</body>
</html>

可以看到默认选择为男

3.7.2 列表多选范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="password"> <br>
        咨询的项目:<br>
            <!-- 通过 select 来进行做列表标签 -->
            <select name="project" id="" multiple>
                <!-- 列表选项的标签为 option -->
                <option value="睡觉">睡觉</option>
                <option value="吃饭">吃饭</option>
                <option value="逛街">逛街</option>
            </select>
        <!-- input type="submit" 提交按钮 -->
        <input type="submit" >
    </form>
</body>
</html>

默认为单选，但是当我们按住 ctrl 键就是多选

3.8 HTML：按钮标签

按钮标签：<button type="submit"></botton>

type可选值：

  • button：普通，可以在任何地方使用

  • submit：提交，该按钮只有在表单里面才有

  • reset：重置

3.8.1 button 普通按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="password"> <br>
        <!-- input type="button" 提交按钮 value 的值对应浏览器上按钮的提示 -->
        <input type="button" value="提交按钮">
    </form>
        <!--  也能够实现普通按钮  -->
        <button >普通按钮2</button>
</body>
</html>

上面的两种普通按钮的写法都可以，一般情况下在 form 中都是用 input 来做普通按钮，而在 form 之外则使用 <button> 来实现

3.8.2 reset 重置按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <h1>提交个人信息</h1>
    <!-- action 是要提交的地址，这里写 # 表示暂时不提交-->
    <form action="#">
        <!-- input 定义输入什么，或者选择什么 -->
        姓名:<input type="text"> <br>
        年龄:<input type="password"> <br>
        <!-- input type="reset" 重置按钮 -->
        <input type="reset">
    </form>
</body>
</html>


当我们点击重置按钮之后会将我们在表单中填入的信息全部重置掉

所以在 form 中的 reset 按钮就是将我们所选择或填入的内容重置掉

3.9 HTML：<div>标签使用较多

<div> 标签用于在HTML文档中定义一个区块。常用于将标签集中起来，然后用样式对它们进行统一排版。

所谓的 div 我们可以将其理解为把一个个 html 代码块进行了逻辑的分区，

如下图我们可以看到将百度的首页各个不同的位置通过红框表示为多个不同的区域，所以为了方便对这些各个区域中挨个的调控或排版布局样式等，我们就需要使用 div 标签，下图中一个红框就可以理解为不同的 div 来进行包裹，从而我们将想要实现的前端页面代码写入到不同的 div 中就可以实现不同的区域调控

3.9.1 div 范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
    <div>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
    <div>
        <p>这是第二个段落</p>
        <p>这是第二个段落</p>
        <p>这是第二个段落</p>
    </div>
    <div>
        <p>这是三个段落</p>
        <p>这是三个段落</p>
        <p>这是三个段落</p>
    </div>
</body>
</html>

现在可以看到并没有什么两样

3.9.2 区分不同 div

由此可见 div 直接使用的话在页面渲染的时候并不会有其他效果，但是我们可以通过加入style 标签来区分不同的 div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    title 就是web 页面上的-->
    <title>测试</title>
</head>
<!--    网页主体这里面写的内容浏览都会显示-->
<body>
<!-- 蓝色背景 -->
    <div style="background: aqua">
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
        <p>这是第一个段落</p>
    </div>
<!-- 红色背景 -->
    <div style="background: red">
        <p>这是第二个段落</p>
        <p>这是第二个段落</p>
        <p>这是第二个段落</p>
    </div>
<!-- 青色背景 -->
    <div style="background: greenyellow">
        <p>这是三个段落</p>
        <p>这是三个段落</p>
        <p>这是三个段落</p>
    </div>
</body>
</html>

由此可见 div 就是实现对不同代码块区域的管理和逻辑上的分区

暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇