趣是最好的老師，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>-----文本域標簽

做登錄界面可以用表格來做，能直接對齊

后續會更新后面的知識