您是否曾經想過在開始一個新的網路專案時從「空白頁」開始是多麼的簡單？
請注意缺少任何樣式或自訂屬性。
<html>
<body>
<h1>Hello world!</h1>
<p>
This is my new project, and it's still under construction.
Please be indulgent 😊
</p>
<p>
Also, check out my work on <a href="https://github.com/octocat">GitHub</a>!
</p>
<blockquote>
<p>
Imagination is more important than knowledge
</p>
<cite>Albert Einstein</cite>
</blockquote>
<menu>
<li>Home</li>
<li>
About me
<menu>
<li>My works</li>
<li>My passions</li>
</menu>
</li>
<li>Contact</li>
</menu>
<form>
<h2>Contact me</h2>
<label>
Your email:
<input type="email" name="email" placeholder="Your email" required>
</label>
<label>
Your message:
<small>255 characters max</small>
<textarea name="message" placeholder="Your message" required></textarea>
</label>
<button type="submit">Send</button>
</form>
</body>
</html>哎喲!如果你向你的朋友展示這一點，同時聲稱你是網頁開發人員，他們會開始質疑你到底在做什麼...
預設瀏覽器樣式表通常非常簡單，當您製作應用程式原型、生成靜態 HTML 頁面、Markdown 生成的文件等並且不想深入研究時，如果沒有“視覺上不錯”的東西，可能會令人沮喪過早地接觸CSS 的複雜性。
好訊息！我有一些適合你的東西： matcha.css ！
只需將以下內容加入到您的文件中即可看到奇蹟發生：
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
沒有真正做任何事情，我們就得到了一個尊重用戶對淺色/深色模式的偏好、漂亮的字體和適當的間距的頁面，我們的<menu>實際上看起來像一個菜單，而且我們的<form>甚至還有「必填欄位」也相當不錯所需投入的指標。
所有這些都無需任何建置步驟、JavaScript、配置或重構。
這是因為matcha.css使用語意樣式。例如，它假設嵌套在另一個<menu>中的<menu>應產生一個子選單，而<label><input required></label>應向使用者澄清輸入是強制性的。
還有一些「嵌入式」CSS 庫，但我相信這是最完整的一個，因為它提供了額外的開箱即用的現代樣式，如語法突出顯示、簡單佈局、實用程式類別等。
matcha.css也很容易自訂（它沒有任何!important規則，甚至提供了建立自訂建置的幫助器），同時也是可逆的（如果您決定遷移出去，只需刪除樣式表）。
最後但並非最不重要的一點是，它是完全免費和開源的！
https://github.com/lowlighter/matcha
請參閱matcha.mizu.sh了解完整概述！
原文出處：https://dev.to/lowlighter/make-naked-websites-look-great-with-matchacss-4ng7
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式