正確來說是：
讀完全知1&2->不行我要接著英文版看->但不想要被查單字打斷->先來複習之前存的300多個單字好了->來試試看傳說中的Anki->不行太醜了我要自己寫版面

參考網站：
（之前ptt簡群的文章都刪光了滿可惜的）
醫學生的K書法：Anki使用心得（上）-基礎概念＆模版分享. 向各位分享我目前最喜歡的讀書工具 — —…...醫學生的K書法：Anki使用心得（下）- 製作卡片模板. 在上篇：醫學生的K書法：Anki使用心得（上）...【Anki】編輯卡片模板時的Cheat Sheet（HTML, CSS, Anki內建語法） | by ...

備份資料夾路徑：
/Users/Username/Application Support/Anki2
放背景圖片路徑：
/Users/Username/Library/Application Support/Anki2/使用者 1/collection.media

＊電腦版應用而已，意在建立大概念大方向
＊研究到差點睡掉萌夯時間，我真的盡力了
＊超級不專業，用詞不精確，給自己的筆記

HTML
1. 指派顯示對應的note資料
2. 負責卡片正反面的區塊分割

在Anki常用語法
<br>：換行
<span class="???">行內元素</span>：命名行內元素
<div class="???">區塊元素</div>：命名區塊元素
<!——註解——>（噗浪會吃語法，實為半形）

Anki內建語法
<hr id=answer>：橫向分隔線
{{欄位名稱}}：對應note欄位名稱
{{FrontSide}}：可直接插入卡片正面內容
{{type:欄位名稱}}：需同時出現在卡片正反面才能運作，{{FrontSide}}語法可行，自動比對輸入資料是否符合欄位資料，用於拼字練習

條件：
{{#欄位A}} 如果欄位A是空的，中間這段不顯示 {{/欄位A}}
{{^欄位A}} 如果欄位A是空的，中間這段會顯示 {{/欄位A}}

注意
1. 核心為劃分區塊，讓之後的CSS去處理layout
2. 可一次給予多個class name，<div class="one er trois">，即該段落有one er trois這三個class
3. 去Atom檢查有沒有錯字或缺tag

CSS
總之就是排版。
指定特定區塊、字串等等的樣式。

在Anki常用語法
/＊註解＊/ （噗浪會吃語法，實為半形）

針對整張卡片的設定：
.card{
background-image: url(image.png)
}

CSS常用屬性
.class名稱{
font-family: 字體名稱;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
line-height: 1.5;
text-align: center/left/right;
color: white/#ffffff;

background-color: white/#ffffff;
background-color:
rgba(255, 255, 128, 0.5); hsla(50, 33%, 25%, 0.75);
}

漸層
linear-gradient(red, yellow) 預設為上到下
linear-gradient(180deg,red, yellow)
linear-gradient(to top, yellow, red)
linear-gradient(to bottom, red 0%, yellow 100%)

CSS box常用屬性

.class名稱{
max-width: 35em;
margin: 10px 11px 12px 11px;（上右下左之外距）
margin: 2em auto;（上下留2em，水平置中）
border: 1px dotted red;（粗度 樣式 顏色）
border-style: dashed none（上下dashed 左右none）
border-style: solid dotted none（上solid 左右dotted 下none）
border-radius: 10px;
padding: 10px 11px 12px 11px;（上右下左之內距） }

注意
1. 字體僅支援.ttf
2. 指定資料中間有空格前後引號起來，"font MT"
3. 可一次設定多個class，用,分隔，.one, .er{}
4. 每項設定後面要加; 分隔
5. margin/height/width僅適用於block level的div，無法用於span
6. 優先順序：大集合的值＆集合內指定項目的值相衝突，會採用較後面者的設定
7. 在嘗試＆調整時以註解代替刪除

其他
1. 抓不到深色模式的換色邏輯，可能是在主CSS裡有看到的filter，現在用盒中盒的方式也繞不過那個深色背景會被ban掉的設定
2. vertically centered?（日文字卡）有力氣可以試試假table（但很荒謬為什麼會需要用畫蛇添足的方式去解決？？）

*更多HTML/CSS的新手友善教學
W3Schools Online Web Tutorials教學 | MDN*想不到配色去coolors
Coolors - The super fast color schemes generator!*需要色號去Google就有選色器超好用
*更多CSS的交集差集合集選擇邏輯
（Anki用不到啦） [技術分享] CSS中的多重選擇器（Multiple Selectors）包含空白或逗號

目前先這樣，都是很基本的語法：
（第一個單字是rupture
1. 熟悉字義

2. Spelling

styling只加了一個front division，重點在type的運用

English styling CSS (Plurk Paste)
English Reciting HTML (Plurk Paste)
English Spelling HTML (Plurk Paste)
決定限制他的max-width以方便閱讀

日文ㄉ先這樣：
先隨便寫一個漸層阿捏

日文CSS (Plurk Paste)
日文 HTML (Plurk Paste)
追加圓角，不知道之前怎麼可以忍受他尖角
追加置中，垂直置中待研究

寫到後來發現真的要備份，不然就是養成習慣加註解 已經數度不小心刪掉重要參數快瘋掉