趣是最好的老师，HelloGitHub 就是帮你找到兴趣！

简介

分享 GitHub 上有趣、入门级的开源项目。

这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊，月刊的内容包括：各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等，这些开源项目大多都是非常容易上手，而且非常 Cool。主要是希望大家能动手用起来，加入到开源社区中。

在浏览、参与这些项目的过程中，你将学习到更多编程知识、提高编程技巧、找到编程的乐趣。

最后 HelloGitHub 这个项目就诞生了

以下为本期内容｜每个月 28 号发刊

C 项目

1、ngx_waf：一个 Nginx 防火墙模块。我差点就错过了的宝藏项目，它使用简单不需要复杂的配置，支持的功能直戳我的痛点。你看：

C++ 项目

2、fast-cpp-csv-parser：读取 CSV 文件的 C++ 库（仅头文件）。示例代码：

# include "csv.h"

int main(){
  io::CSVReader<3> in("ram.csv");
  in.read_header(io::ignore_extra_column, "vendor", "size", "speed");
  std::string vendor; int size; double speed;
  while(in.read_row(vendor, size, speed)){
    // 对 ram.csv 文件中的数据，做你想做的事情吧！
  }
}

3、UNO：使用 C++ 编写的命令行 UNO 纸牌游戏。操作方便支持人机或联机对战，游戏基于 Asio 网络库和现代 C++ 开发，也有对 C++17 的尝试。分别实现了服务端、客户端，代码简单对 C++ 新手友好，UNO 的爱好者快来玩一玩吧！

4、godot：一款功能丰富的开源游戏引擎。最初它只是一款 2D 引擎，近期拓展了 3D 部分的能力。相较于 UE4 或者 Unity 这样的成熟商业引擎来说，Godot 还很年轻不够成熟，尤其 3D 方面的能力。但它拥有简易的开发方式，上手简单。而且社区活跃、文档覆盖全面、有较为丰富的示例代码，对于刚入门的游戏开发者友好。同时开源引擎底层代码完全开源，开发者可以阅读和贡献代码，而不是只停留在游戏逻辑开发层面。总而言之 Godot 是一个极有潜力的游戏引擎，推荐给想学习游戏开发的同学

CSS 项目

5、water.css：一个专门为简单页面和示例网页准备的 CSS 框架

Go 项目

6、fyne：一款 Go 语言跨平台 UI 库。想用 Go 写图形界面应用的小伙伴，快速上手：

安装
$ go get fyne.io/fyne
运行一个 demo
$ go get fyne.io/fyne/cmd/fyne_demo/
$ fyne_demo

7、golearn：Go 写的机器学习框架。来，跑个模型试试吧：

cd $GOPATH/src/github.com/sjwhitworth/golearn/examples/knnclassifier
go run knnclassifier_iris.go

Java 项目

8、keepass2android：一个开源的 Android 密码管理器。下载地址，功能：

9、PrettyZoo：一款 Java 写的高颜值 ZooKeeper 客户端桌面应用。该项目使用了 JDK11 以及 JavaFX 编写的 GUI 客户端，代码量适中适合想学习 JavaFX 编写应用的朋友。需要连接 ZK 服务端查看数据的话，手边有这么个工具还是挺方便的。实用和颜值集一身的项目

10、vueblog：一款轻量级 Java 博客项目。基于 SpringBoot+Vue 实现并附有详细开发文档和讲解视频，让刚学会 Java 的同学也能搞定。每个体面的技术人员可能都有一个自己说了算的博客吧

JavaScript 项目

11、x-spreadsheet：基于 JavaScript 实现的轻量级 Web 电子表格库。它功能齐全，包含表格的基本操作和函数等，还有详细的中文文档，在线尝试

12、h5-Dooring：一款功能齐全的 H5 页面可视化配置平台。让你通过可视化的方式制作出 H5 页面，技术栈以 React 为主，后台采用 Node.js 实现。虽然网上有很多这种工具，但本项目免费开源、功能齐全值得一试

13、Ant-Forest：基于 Auto.js 的蚂蚁森林能量自动收获脚本。它是个“绿色环保”的项目，我能从中感受到满满的爱和想把它做好的决心！来看看作者开发 Ant-Forest 时解决了哪些难题：

1. 能量球识别无法使用控件信息（使用基于霍夫变换的图像识别）
2. 脚本执行逻辑易被打断（使用事件监听及扩展模块增强鲁棒性）
3. 每次只能运行一次（完善的复查及定时循环功能）
4. 不同设备分辨率及屏幕比例不同（使用等比缩放/定宽缩放等进行适配）

14、tui.image-editor：功能齐全的图片编辑器。支持图片剪裁、旋转、涂鸦等功能，实现了 Vue 和 React 封装的组件，便于整合进你的项目

15、windows95：基于 Electron 实现的 Windows 95 操作系统。它实现了该操作系统下的所有东西，对！所有！想体验下 Windows 95 版的扫雷吗？下载安装即可

Objective-C 项目

16、LuLu：免费开源的 macOS 防火墙软件

PHP 项目

17、humhub：用 PHP 写的开源社交平台。看过《社交网络》的小伙伴，都知道大名鼎鼎的 Facebook 最早就是扎克伯格用 PHP 语言写出来的，humhub 能够让不会编程的小伙伴也可以用创建出一个社交平台啦。跟着提示一步步操作，不到 1 分钟我的社交平台就建好了

18、phpbrew：一个编译、安装、管理多版本 PHP 的工具。有了它就可以方便地在不同 PHP 版本之间自由切换啦，特性：

Python 项目

19、python-patterns：Python 设计模式和使用场景的集合

20、pgcli：支持语法高亮和自动补全的 Postgres 数据库客户端命令行工具。它安装简单上手快速，如果你用过 Postgres 数据库自带的命令行工具，就一定能感受到 pgcli 的迷人之处

21、15-minute-apps：基于 PyQt 框架写的小型桌面应用程序的集合。想用 Python 写桌面应用的小伙伴，这个项目应该可以帮到你。比如写个扫雷游戏：

Swift 项目

22、Pine：一个免费、轻量、简洁的 macOS Markdown 编辑器。功能：

23、Publish：专为 Swift 开发人员准备的静态网站生成器。让你实现整个网站都是用 Swift 构建的工具，支持多种主题、插件以及更多强大的自定义选项。示例网站，安装和快速开始：

$ git clone https://github.com/JohnSundell/Publish.git
$ cd Publish
$ make
$ mkdir MyWebsite
$ cd MyWebsite
$ publish new

其它

24、open-source-rover：NASA 面向科技爱好者开源的火星漫游车设计方案和代码。通过该项目你可以使用便宜的树莓派做出自己的火星漫游车，所需的零件很容易就可以买到，遥控部分是使用现成的 Xbox 手柄或者手机，减少花销。喜欢动手和硬件的小伙伴们，这个东西够酷吗？

25、bat：替代 cat 的命令行工具。你还在命令行用 cat 查看文件吗？那你就 out 啦！今天推荐的 bat 它不仅支持语法高亮，还能展示 Git 的改动。macOS 下安装命令：brew install bat 相信你用过 bat 后就不会再想用回 cat 了

26、Web-Dev-For-Beginners：微软开源的 Web 开发教程。该教程共有 24 节课，但目前只有英文版

27、neofetch：展示操作系统信息的命令行工具，支持将近 150 种操作系统

28、jpeg_tutorial：教你编写 JPEG 解码器的教程，示例为 Rust 代码

29、sql-style-guide：一份 SQL 语句编写风格建议。比如：

-- Good
select *
from users
where email = 'example@domain.com'

-- Bad
select *
from users
where email = "example@domain.com"

开源书籍

30、pure-bash-bible：该书有好多复制就能用的 bash 函数，我愿称其为 bash 的“奇技淫巧”。比如把字母转为大写的函数：

upper() {
    # Usage: upper "string"
    printf '%s\n' "${1^^}"
}

$ upper "hello"
HELLO

机器学习

31、pulse：根据包含马赛克的人脸图像，生成一张相似容貌的结果。注意不是复原哦，仅可用于人脸

32、Surface-Defect-Detection：该项目整理了目前大量靠谱的表面缺陷检测数据集，还有最新的顶会论文以及作者的解读笔记。从事视觉方向的小伙伴，心动了吗？

最后

迎留言告诉我本期你最喜欢那个项目，如果觉得本文还不错的话，就点赞、转发一波吧～

天来说下HTML语言CSS样式字体的文本缩进 text-indent

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。来看下语法使用:

div {

text-indent:10px;

}

来看下使用效果,使用前:

每一行没有缩进

使用后:

每个段落的第一行都缩进了20px，具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: 20px;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>

需要缩进的像素可以是任意值，除了正的px,还可以是负的值，可以看下效果:

这不是我的浏览器坏了，展示不了段落首部，是将px修改为-20px

具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: -20px;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>

根据大家写文章段落的习惯，一般都是缩进两个字，但是20px或者10px是不是2个字的长度呢，回答不是的。缩进字数长度有专门的单位: em

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

em是一个相对单位，就是当前元素 font-size 1个文字的大小，如果当前元素没有设置大小，则会按照1个父元素文字大小。

我们来看下效果:

确实是缩进了2个字的长度，看下对应代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: 2em;

}

</style>

</head>

<body>

<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，

在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>

<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>

</body>

</html>

每个段落第一行如果想要三个字间距，就是3em

今天就先到这里，大家周末快乐~

小白从头开始学所做的笔记）

Web标准构成

主要包括：结构、表现和行为三个方面

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页；

lang用来定义当前文档显示的语言；

字符集（cahracter set）是多个字符的集合，以便计算机能够识别和存储各种文字；

charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符集。

HTML常用标签

标题标签：<h1></h1>,<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>（字体大小依次来变小）

段落标签：<p></p>

换行标签：<br/>

加粗标签：<strong></strong>或<b></b>(推荐使用strong标签,因为atrong效果更好)

倾斜标签：<em></em>;<i></i>(推荐使用em标签,因为em效果更好)

删除线标签： <del></del>或<s></s>(推荐使用del标签,因为del效果更好)

下划线标签：<ins></ins>或<u></u>(推荐使用ins标签,因为ins效果更好)

div和span标签：是一个盒子，用来装内容，div是块级标签，span是行内标签

图像标签：<img src="图像 URL"/>

水平线标记：<hr/>

图像路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

超链接标签：<a href="跳转地址" target="目标窗口的弹出方式"> </a>作用从一个页面跳转到另外一个页面

描点连接：配合id选择器使用

注释：<!-- --!>

/**/

//

特殊字符： (空格)等

表格标签：<table></table> 作用于展示数据

<th></th>----表头单元格

<tr></tr> ----行

<td></td>----单元格，列

row="行数" cols="每行的字数"

<thead></thead>标签用于表格的头部区域；<tbody></tbody>标签用于表格的主题区域

无序列表：<ul><li></li></ul>

有序列表：<ol><li></li></ol>

自定义列表：<dl><dt><dd></dd></dt></dl>-----------dt是用于标题，dd是内容

表单的组成：

在HTML中，表单通常由表单域、表单控件和表单信息

from用于定义表单域，以实现用户信息的收集和传递

表单域标签：<from action="url地址" method="提交方式" name="表单域名称"></form>

<input type="属性值"/>

其中name属性是表单的名字，相同的名字可以实现多选一

<lable>标签：用于绑定一个表单元素，当点击《lable》标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

<select>表单元素：下拉表单元素，

<select>

<option></option>

</select>

select中至少包含一对option

textarea表单元素：<textarea></textarea>-----文本域标签

做登录界面可以用表格来做，能直接对齐

后续会更新后面的知识