前端开发知识点整理

吃土小2叉
6,919 阅读18分钟

Growth Front-End Knowledge Summary

前言： 本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。

初衷。写这篇文章主要有以下几个初衷：

  • 梳理知识体系。网上虽然有许多类似的内容，但每个人都有各自独特的思维方式，适合自己的才是最好的。

  • 探索不足之处。明确自己到底掌握了哪些，哪些本应掌握但还没有学习。

  • 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。

  • 希望借此激发大家的一点思考。我们都在路上，我不是成功的例子，我写下我的思考，希望借此激发大家的一点思考。

  • 一个梗。自 2012 年以来，我知乎上获赞最多的答案却是引用他人的答案……有点尴尬：《一名合格的前端工程师的知识结构是怎样的？》

目录

  • 专业技能

    • 前端理论

      • 浏览器

      • HTML

      • CSS

      • JavaScript

      • 编程通用

      • SEO 数据统计 数据分析

      • 网络基础

    • 交叉领域理论

      • 产品设计相关

      • 后端基础

    • 前端实践

      • 解决实际问题

      • 学习型项目

      • 前端工程

      • 第一阶段：框架应用

      • 第二阶段：简单自动构建优化

      • 第三阶段：JS/CSS模块化开发

      • 第四阶段：组件化开发与资源管理

      • 项目技术选型

      • 造轮子

  • 版本规划

  • 致谢

  • 联系方式

  • 结语

  • 许可

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理

    • HTML 解析器

    • CSS 解析器

    • JavaScript 引擎

    • 渲染流程

      • 加载

      • 解析（确定结构、计算样式）

      • 构建 DOM 树、应用样式

      • 绘制

      • 回流

      • 重绘

  • 浏览器调试

    • 工具

      • F12

      • 扩展插件

      • 浏览器常用快捷键

    • 调试内容

      • 元素

        • 结构

        • 属性

      • 样式

      • 脚本

        • 日志

        • 断点

        • 事件

        • 变量监听

        • 调用堆栈

      • 性能

        • snapshot

        • 耗时

      • 网络请求

        • 模拟请求

        • 审查网络

        • 模拟网络环境

      • 内存

      • 本地存储信息

        • cookie

        • local storage

        • cache

    • 调试技巧

  • 浏览器事件

    • 常见事件

      • 鼠标事件

      • 表单元素事件

      • 键盘事件

      • 文档事件

      • CSS 事件

      • ……

    • 事件处理、添加、移除

  • 浏览器任务调度机制

    • micro queue

    • macro queue

  • 浏览器兼容性

    • 各平台浏览器的坑（家家有个难填的坑，有的坑深，有的坑浅）

      • 移动端浏览器

        • UC

        • Safari

        • 微信浏览器

        • 百度

        • ……

      • PC 端浏览器

        • Chrome

        • Firefox

        • IE

        • Edge

        • ……

      • 小程序

    • 不同浏览器内核差异

      • CSS 私有属性前缀（注：建议使用 postcss 自动化补全）

      • Polyfill

    • HTML、CSS、Javascript 特性支持度

      • MDN

      • Can I use ?

  • 常见问题

    • 请求跨域

    • iframe 跨域通信

    • 各种兼容性问题

    • 网页加载速度慢

    • 按钮点击没反应……

HTML

吃土小2叉：据说 HTML 和 CSS 一起学习体验最佳哦

  • 语法 & 语义

    • !DOCTYPE HTML 文档标准

      • 怪异模式

      • 标准模式

    • head

      • meta 元数据标签

      • 网页描述

      • 设备描述

      • HTTP 请求描述

      • HTTP Client Hints

    • body

      • 装饰型标记（不推荐、部分已废弃）

      • 功能型标记

        • 无语义容器（div、span）

      • 用户交互（交互型标记）

        • 输入框

        • 选择器

        • 多选框

        • 单选框

        • 按钮

      • 数据可视化（展示型标记）

        • 列表

          • 定义列表

          • 无序列表

          • 有序列表

        • 表格

        • 结构化数据标记、微数据

        • 多媒体

          • 图片

          • 视频

          • 音频

        • SVG、Canvas

        • 文章（正文、摘要、段落、章节、前言、结语、引用）

  • 规范

    • 标签类型

    • HTML 代码规范

    • HTML 使用规范（标签嵌套规则）

  • 可访问性、无障碍体验

  • 常见问题

    • 图片空 src 导致页面加载两次

    • iframe 空 src 导致无限循环加载本页面

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉：用设计师的思维去理解 CSS，用程序员的思维去写 CSS

  • 语法（CSS 从入门到放弃）

    • 基本用法

    • 选择器

      • 基础选择器

      • 组合选择器

      • 伪类选择器

    • 媒体查询

    • 简写属性

    • 注释

    • 属性运算 calc()

  • 规范（编写可读性良好的 CSS）

    • 用例规范

      • 权限控制

      • 最佳实践

      • 不良习惯

    • 格式规范

      • 风格

      • 复用

      • BEM 规范

  • 逻辑特性（在 CSS / Less 中运用 OO 思想和设计模式）

    • 权重（优先级）

    • 作用域

    • 封装（mixins）

    • 组合（mixins+）

    • 扩展（:extend）

    • 继承（mixins）

    • CSS 变量、Less 变量

    • 模块化（import）

  • 视觉设计（单一状态设计）

    • 布局（分久必合、合久必分）

      • 盒模型（高度、宽度、边框、外边距、内边距、溢出控制）

      • 定位方式

      • 层叠上下文（z-index）

      • display 类型（table、inline、inline-block、block、flex、grid）

      • 浮动

      • 伪元素：:after、:before

    • 字体排印（厉害了 word 哥）

      • 字体（字体族、网络字体）

      • 文本（删除线、下划线、斜体、粗细、字号）

      • 段落（行高、缩进、断句方式、换行方式）

      • 对齐

      • 方向

    • 装饰（神说，要有光）

      • 颜色

      • 背景

      • 边框（border、outline）

      • 圆角

      • 阴影

      • 渐变

      • 透明度

      • 变形（旋转、缩放、矩阵变化）

  • 交互设计（多状态设计）

    • hover 状态

    • 结合 Javascript

    • CSS 动画

    • active、checked 状态

    • 过渡效果

    • 动画关键帧

    • 动画（运动和静止是对立的统一）

    • 反馈

    • 引导

    • 互动

  • 多设备设计

    • 最小固定宽度布局

    • 百分比布局

    • 栅格布局、弹性布局

    • js + rem 方案（rpx）

    • 媒体查询

    • 响应式设计（多套代码，多种设备）

    • 自适应设计（一套代码，多种设备）

  • 常见问题

    • 权重控制

    • 嵌套层级

    • 语义性

    • transition “失效”？

    • z-index “失效”？

    • 视觉还原度

    • 调试技巧

    • 属性“失效”问题

    • 外边距合并

    • 边框 1px 问题

    • 垂直居中

    • 大屏幕 rem 小屏幕 px

    • 图片适配

    • 可维护性

  • 扩展内容

    • 预处理器：Less、Sass

    • 后处理器：postcss

    • 小程序的 WXSS

    • Weex、RN 中的 CSS

JavaScript

吃土小2叉：至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了：《The Modern JavaScript Tutorial》http://javascript.info/ ，推荐阅读。

  • JavaScript 标准

    • 严格模式

    • 兼容模式

  • 开发工具

    • IDE

    • 轻量编辑器

  • 基础语法

    • 数据类型

      • 基本数据类型 number、 string、 boolean、 null、undefined、object、symbol

      • 数据类型检测

      • 解构赋值

        • 数组

        • 对象

      • date 与时间

      • JSON

        • 格式说明

        • 序列化

        • 反序列化

      • 数组

        • 数组操作（增、删、改、遍历、复制）

        • 多维数组

    • 变量

      • 声明 var、let、const

      • 声明提升

      • 作用域

    • 逻辑控制

      • 循环

      • 分支

      • 判断

    • 对象（基础部分）

      • 对象操作（增、删、改、查、复制）

      • Symbols

      • 类型转换

      • 垃圾回收机制

      • 对象方法中的 this

      • new

    • 函数

      • 函数默认值

      • 函数声明

      • 立即执行函数

      • 箭头函数

    • 运算符

      • 数值运算

      • 逻辑运算

    • 事件

      • 浏览器事件

      • 冒泡、捕获

      • 事件捕获

      • 浏览器默认行为

    • 文档

      • DOM 树

      • 节点

        • 节点类型

        • 节点标签

        • 节点内容

      • window 对象

    • DOM 操作

      • 元素节点（增、删、移、换、复制）

      • 元素属性（增、删、改、查）

      • 文本内容（增、删、改、查）

    • 网络请求

      • ajax（回调函数）

      • Promise

      • async、await

  • 深入细节

    • 对象、类、继承

      • 属性标记与属性描述

      • 原型、原型链

      • 继承

      • 属性定义

      • 对象混合

      • 类型检测

    • 数据类型

      • 基本类型

      • 复杂类型

    • 函数进阶

      • 递归、调用堆栈

      • 闭包

      • 函数绑定、上下文

      • 剩余参数、扩展语法

      • 函数对象

      • 任务调度：定时器

      • 柯里化

      • 深入箭头函数

      • 函数式

    • 错误处理

      • 异常捕获

  • 代码质量

    • 注释

    • 相关工具

      • ESLint、JSLint

      • Standard.js

      • Prettify

      • 自动化测试工具：Jest、Mocha

    • 用例规范

      • 最佳实践

      • 不良习惯

    • 格式规范

      • 风格

  • 正则表达式

    • 普通字符、转义字符

    • 元字符

    • 字符类

    • 分支条件

    • 分组

    • 反义

    • 贪婪与懒惰

    • 后向引用

    • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读：来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

  • 达标（语法、词法）

    • 正确拼写

    • 准确用词

    • 注意单复数

    • 不要搞错词性

    • 处理缩写

    • 用对时态和语态

  • 熟练（语义、可用性）

    • 单一职责

    • 避免副作用

    • 代码一致性

    • 合理设计函数参数

    • 合理运用函数重载

    • 使返回值可预期

    • 固话术语表

    • 遵循一致的代码风格

  • 卓越（系统性、大局观）

    • 版本控制

    • 确保向下兼容

    • 设计扩展机制（易于扩展）

    • 控制 API 的抽象级别

    • 设计模式

    • 注释

    • DRY

    • 编码规范

    • 解耦

    • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉：尽人事，听天命（天者，用户也）

  • SEO

    • 影响因素

      • 相关性

        • title

        • 关键词密度

      • 权威性

        • 外链

        • 内链

        • 域名年限

        • 网站收录

        • 安全性

      • 用户体验

        • 广告

        • 加载速度

        • 内容质量：内容真实性、内容原创性、内容有益性

        • 用户反馈

    • 不良行为

      • 堆叠关键词

      • 抄袭、作弊

      • 大量低价值外链

      • 广告、木马、病毒 

  • 数据统计

    • 工具

      • 统计、埋点工具：Google Analytics、百度统计、Piwik……

      • 站长工具：Google Webmaster 、百度站长工具

      • 其他工具：百度指数、SEO 各项指标助手工具……

  • 数据分析

    • 工具

      • 同数据统计工具

      • 脑子是个好东西

    • 分析方法

      • 归因、排查

      • 细分

        • 来源、渠道

        • 用户属性

          • 人口统计学

          • 用户终端、型号

        • 用户行为

          • 站内搜索关键词

          • 自定义事件（埋点事件）

          • 浏览频率、时间、跳出页

          • 访问内容

          • 访问漏斗

        • 站点属性

      • 对比

        • 时间维度

        • 统计指标维度

    • 目标设置

      • 转化路径

      • 转化目标

      • 转化价值

网络基础

此处是不是又要出现，经典问题：当你在浏览器输入 URL 并回车（非单页应用的传统网站），直到你看见这个页面，此时经历了哪些过程（略去浏览器渲染环节）。

  • TCP / IP

    • HTTP

      • 请求

        • 请求头

        • 请求正文

      • 响应

        • HTTP 状态码（2xx、3xx、4xx、5xx）

        • 响应头

        • 响应正文

      • 过程：三次握手

    • HTTP2

    • HTTPS

    • Web Socket

    • CORS

    • Session、Cookie

    • RESTful / RPC

  • DNS 、域名、IP

    • 域名劫持

    • 内网、公网地址段

  • 缓存

    • 服务端缓存

    • 客户端缓存

  • 常用工具

    • F12 Network Panel

    • Advanced REST client

    • EditThisCookie

    • Wireshark

    • Fiddler、Charles

  • 常见问题

    • HTTP 迁移到 HTTPS 站点部署问题

      • HTTPS 证书部署

        • TLS 版本问题

        • 证书作用域（是否包含子域名）

        • 证书、秘钥配置文件

      • 资源加载同协议

        • error 级

          • 外部 JavaScript 加载

          • iframe

        • warning 级

          • img

          • CSS

      • 网络请求同协议

        • error 级

          • ajax

          • jsonp

交叉领域理论

吃土小2叉：学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉：学会优雅地质疑设计 => 给用户更好的体验

  • 与设计师的沟通、协作

  • 设计理念 => 用户体验

    • 一致性

    • 可用性

    • 易用性

    • 反馈

  • 提升审美

    • 单反穷三代 // 单身狗 XX：也许学好摄影就能追到女神了呢？

    • 竞品分析 // 知己知彼，重视对手

  • 常用工具

    • 雪碧图生成工具（http://www.spritecow.com/）

    • 图片有损压缩工具（https://tinypng.com/）

    • .psd 智能标注（http://www.fancynode.com.cn/pxcook）

    • 强烈建议设计师使用 Sketch 进行设计

后端基础

吃土小2叉：只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 （迷之微笑）

XX 的观点：时刻谨记编程语言只是一种工具，分别有不同适用的场景罢了。理性、客观、结合实际。

  • 与后端开发工程师的沟通、协作

    • 明确分工

    • 文档先行

    • mock 数据

  • 简单了解一门后端语言 // XX 注：如果你已经自己搭建了个人博客站点，后端语言的语法层面足够了。

  • 了解前端路由与后端路由的区别

  • 简单应用数据库（MySQL）

    • 增、删、改、查

    • 备份、导出

  • 了解作用与概念

    • GraphQL

    • Nginx

    • Redis

    • 负载均衡

    • CDN

    • 数据库主从备份

  • 计算机相关基础知识 // 有时间多重温（预习）重温（预习）

    • 数据库

    • 操作系统

    • 编译原理

    • 离散数学

    • 数字逻辑

前端实践

实践是检验真理的唯一标准，在此引用 Vue.js 作者尤雨溪的一段话：

技术方案都是先有问题，再有思路，同时伴随着取舍。在选择衡量技术的时候，尽量去思考这个技术背后是在解决什么问题，它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术，也为以后哪天你遇到业务中的特殊情况，需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉：写下这篇文章的时候恰逢今年高考，很感谢高一的英语老师当时给我们布置的一个作业：整理考试错题集。因为经历过太多次，同样类型的题目这次错，下次仍然错。而我又是一个比较较真的人，每次整理错题的时候，不单单只记录做错的问题和答案，还会去分析这里的 考点，所涉及的知识点，去试着换位思考如果我是出题人，会怎么出这道题，考哪些知识点可以坑一下考生。而这一过程，又有着考试做错题的心理愧疚感，记忆会特别深刻。另一方面，在复习阶段，也可以更具有针对性地复习，为自己减压。要尽量把大脑当成 CPU 来用，或者倒排索引，而非硬盘、数据库。

Learn from your practice.

而在编程过程中，也是比较接近。我们可以记录下自己犯过的错误，不良的编码案例。同时，我们也可以像经常收集一些名人名言、固定搭配等写作套路一样，去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化，那就更好了。

Learn from your worry & adversity.

另外，抱着积极的态度、强大的内心去面对开发过程中的任何困惑、困境，都是助力快速 成长的好机会。

前阵子我在 GitHub 上也开了一个项目，专门记录、收集我最近在前端开发过程中遇到的一些问题，有已经解决的，也有仍待解决的。

https://github.com/xunge0613/front-end-practice-collections

目前整理的已解决问题有：

仍待解决的问题：

  • 如何优雅地监听元素高度变化？

  • 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论，包括：

  • 如何解决问题？

  • 如何提问题？

后续我也会不断完善这一块内容。重点是：形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是：

拥有一个完全属于自己的博客、域名、网站、服务器，并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title：前端工程师

以下引用张云龙 dalao 的文章：前端工程 —— 基础篇

第一阶段：库/框架选型 第二阶段：简单构建优化 第三阶段：JS/CSS模块化开发 第四阶段：组件化开发与资源管理

由于先天缺陷，前端相比其他软件开发，在基础架构上更加迫切的需要组件化开发和资源管理，而解决资源管理的方法其实一点也不复杂：

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段：框架应用

吃土小2叉：只要是一个文档友好的框架，遇到不会的问题，去翻翻文档，如果解决不了，再去认真翻一次。因此，第一阶段，亦可认为是：面向文档编程。

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线：

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

  • jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档

    • 核心

      • 对象访问

      • 数据缓存

      • 队列控制

      • 插件机制

      • 多库共存

    • 事件

      • 页面载入

      • 事件处理

      • 事件委托

      • 事件切换

      • 常用事件

        • 鼠标事件（click、dbclick、hover、mouse*……）

        • 键盘事件（key*……）

        • 表单事件（blur、change、focus、submit、select）

        • 浏览器事件（error、resize、scroll）

        • 触摸事件（touch*……）

    • 选择器

      • 基本

      • 组合

      • 伪类

      • 内容

      • 可见性

      • 属性

      • 表单

    • 筛选器

      • 过滤

      • 查找

      • 串联

    • CSS

      • CSS

      • 位置

      • 尺寸

    • DOM 操作

      • 元素节点（增、删、移、换、复制）

      • 元素属性（增、删、改、查）

      • 文本内容（增、删、改、查）

    • 网络请求

      • Ajax

      • when

      • deferred

    • 特效

      • 基本（显示、隐藏）

      • 滑动

      • 淡入淡出

      • 自定义动画控制

    • 辅助工具（类似于 lodash）

      • 数组、对象操作

      • 函数操作

      • 字符串操作

      • 浏览器及特性检测

      • 类型检测

      • JSON 序列化

  • artTemplate

    • 模板引擎

  • Vue.js

    • MVVM 思想

    • 声明式渲染

    • 条件与循环

    • 处理用户输入

    • 数据绑定、响应式数据

    • 组件化应用构建

      • 组件间通信

      • 状态管理

  • lodash.js // 提供各种 helper 方法，专注于数据处理

    • 数据类型

      • 数组

      • 集合

      • 日期

      • 函数

      • 数值

      • 对象

      • 字符串

    • 语言特性    

      • 类型检测

      • 类型比较

      • 复制

    • 数学运算

    • 辅助工具

XX：

  • 学你会用 artTemplate 以后，会发现 Vue.js 很容易上手

  • 当你学会 Vue.js 以后，你会发现小程序真的很容易上手

第二阶段：简单自动构建优化

专注业务开发

  • 工具

    • Grunt

    • Gulp

  • 预处理

    • Less

    • Babel

    • TypeScript

  • 后处理

    • PostCSS

  • 校验

    • ESLint

  • 压缩

    • 代码

    • 图片

  • 合并

  • 打包

  • 自动化测试

  • mock 接口调试

第三阶段：JS/CSS模块化开发

张云龙：分治、分治、分治

  • AMD

  • CommonJS

  • UMD

  • ES6 Module

  • ……

第四阶段：组件化开发与资源管理

核心目的：提高开发效率 & 兼顾运行性能

  • 分治、解耦、自由组合、就近维护

  • Vue.js 组件化开发

    • 抽象业务逻辑组件

      • 组合基础 UI 组件形成业务组件

      • 独立编写业务相关组件

      • ……

    • 定制基础 UI 组件库

      • 轮播图组件

      • 弹窗组件

      • ……

  • 资源管理

    • 推荐阅读：静态网页资源的管理和优化

项目技术选型

理性、客观、避免偏见

  • 预计投入

    • 开发资源

      • 时间

      • 人手

      • 技术储备

    • 项目资源

    • 产品资源

      • 用户群体

        • 浏览器兼容性

        • 浏览器局限性

        • SEO 问题

  • 期望回报

    • 开发人员自我成长

    • 公司技术栈

    • 开发效率

    • 可维护性

    • 性能、稳定性

    • 易于测试

    • 易于把控项目周期

  • 应急预案

    • 兼容方案

    • 回退方案

    • A / B Test

    • 渐进增强

    • Plan B

造轮子

吃土小2叉：要么站在巨人的肩膀上，要么自己成为巨人

未完待续……

  • UI 组件库

  • 前端工具

  • 前端微服务

  • 前端框架

    • （以下内容是 XX 的 YY 内容）

    • 学习优秀框架源码

    • 仿写核心内容

    • 掌握山寨一个框架的套路

    • 发现问题

    • 具备扎实的前端基础 + 运气 + 灵感

    • 解决问题

  • ？

版本规划

本文会在 GitHub 上持续维护，欢迎大家提 issue ~

地址是：https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-front-end-summary.md

v x.x.x

  • 更新 造轮子

  • 考虑翻译成英文？

  • 加入重要性评分功能

    • 引导目前阶段应该掌握哪些

    • 分为：初级、中级、高级

===== 当前版本分割线 =====

v 0.0.3 内容迭代

  • 更新 编程通用

    • 条目更新

  • 更新 JavaScript

  • 更新 前端实践

    • 新增引导语

  • 更新支付宝图标、微信图标……

v 0.0.2 内容迭代

  • 新增 后端基础

  • 新增 前端工程 第一阶段 jQuery、Vue.js 介绍

  • 新增 常见问题

  • 更新 前言

  • 更新 网络基础

  • 更新 学习型项目

致谢

  1. 前端工程 —— 基础篇 by 张云龙

  2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队

  3. The Modern JavaScript Tutorial by Ilya Kantor

  4. jQuery 1.4 中文文档 by 张鑫旭

  5. MDN Web 开发 // 这里有个小彩蛋，这个页面右上角有某 XX

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

https://github.com/xunge0613

亦可关注我的微信公众号：清风迅来

结语

作为一个老菜鸟，我只是知识的搬运工

本文大多讨论的是有哪些知识点（what），至于如何学习与应用这些知识点（how & why），敬请期待我之后的一系列文章，目前已完成一些雏形，仅供试阅：

  • Growth CSS

  • Growth Vue

若有帮助，尽情打赏！^_^

ps: 好像图片有点大=。=

许可

MIT

感谢您一路看到这里，欢迎点击阅读原文在我的博客上进行留言一同探讨，如果遇到无法打开，请点击屏幕最下方访问原网页~~ （小透明表示公众号至今未开通留言功能……）

avatar
文章
阅读
粉丝