動畫互動網頁程式入門 | 筆記查找

# 動畫互動網頁程式入門 | 筆記查找這是「動畫互動網頁程式入門」課程的共筆筆記。有別於[動畫互動網頁程式入門 | 資源整理^](https://hackmd.io/KRmqKbhbS7S-s83fSZgGeg)的共筆此筆記主要紀錄各堂課中開發時可能會需要查找的資料或理出的概念並盡可能系統性列出來 p.s.如果你看到表格第一列有星號，那是為了撐開表格所加入的 (持續新增中) ## Sublime Hotkey on Codepad * 單元範圍：ch12 * 所謂熱鍵，其匹配其實跟例外狀況是很像的！當我們使用瀏覽器開啟應用程式，按下熱鍵時，會先尋找「應用」中有沒有匹配的熱鍵，若沒有則跳出來找「瀏覽器」有沒有匹配的熱鍵，若沒有責再跳出來找「作業系統」有沒有匹配的熱鍵。 * 為何需要此文件？例如Ctrl-Shift-V在Sublime能「依據縮排貼上」，但Codepad中沒有提供；又例如Sublime中不能用「Tab」一次縮排，但Codepad可以。換言之，Codepad提供的Sublime熱鍵是「Sublime Like Hotkey」(像Sublime的熱鍵組合)，因此需要這份文件完整實際能用的熱鍵。 * 測試環境的配置為win10/chrome/codepad-sublime hotkey > ### 一般操作 > |熱鍵|概要|動作/說明| > |-|-|-| > |*******| > | Ctrl-S | 存檔 | 很重要，要變反射動作 | > | Ctrl-P | 開新 | 開新檔案，會覆蓋本頁 要先存檔，不然悲劇 | > | Ctrl-C | 複製 | 未選取標的&游標在句首時，標的為整行(含換行) 未選取標的&游標非句首時，標的為整行(不含換行) | > | Ctrl-V | 貼上 | 若有選取標的，標的會被覆蓋 | > | Ctrl-X | 剪下 | 未選取標的&非末句時，標的為整行(含換行) 未選取標的&為末句時，標的為整行(不含換行) 未選取標的時，標的範圍相當於先按Ctrl-L 能當刪除使用 | > | Ctrl-R F5 | 刷新 | 重新載入瀏覽器 沒升級到Codepad Pro就沒有Liveview可用 想多視窗檢視就必須靠它了 > | Ctrl-Z | 回復 | 返回上一個狀態(不含選取動作) | > | Ctrl-U | 回復 | 返回上一個狀態(包括選取動作) 例如用Ctrl-D選取時手滑超出範圍時回復 | > | Ctrl-Y | 重作 | 取消回復效果 | > > ### 程式/排版 > |熱鍵|概要|動作/說明| > |-|-|-| > | Tab (有標的) | 縮排 | 標的以「行」為單位，未滿一行以一行計 | > | Shift-Tab | 反縮排 | 標的以「行」為單位，未滿一行以一行計 | > | Ctrl-/ | 註解 反註解 | 標的以「行」為單位，未滿一行以一行計 (橫跨註解/未註解片段會有問題) | > | Tab (無標的) | 補完 | 在部分資料後按Tab，會自動補完 詳見「[Emmet符號概表](#Emmet符號概表)」 > > ### 刪除 > |熱鍵|概要|動作/說明| > |-|-|-| > | Ctrl-K | 特殊 | Ctrl-K是組合鍵，就像熱鍵版的跳脫字元 按完後須再按另一組按鈕，才是完整熱鍵 通常用在稍微少用/沒這麼直覺的快速鍵上| > | Ctrl-K Ctrl-Del | 刪除 | 刪除游標後方連續命名字元 若有選取標的，退化為Del(只刪標的) | > | Ctrl-K Ctrl-K | 刪除 | 刪除游標後方所有文字 若有選取標的，會刪除標的 | > | Ctrl-K Ctrl-Bs | 刪除 | 刪除游標前方所有文字 若有選取標的，不會刪除標的 | > > ### 搜尋/取代/選取/批量修改 > |熱鍵|概要|動作/說明| > |-|-|-| > | Ctrl-F | 搜尋 | 第一次搜尋使用 由游標處向後搜尋，匹配第一個結果 游標移動到匹配結果末端 若要再次進行相同條件搜尋，使用Ctrl-G | > | Ctrl-G | 搜尋 | 重複搜尋使用 每按一次便以相同條件向後匹配結果 | > | Ctrl-H | 取代 | 取代單一、特定或全部匹配使用 匹配順序以游標為起始 Yes：取代下一個匹配結果，移動游標 No：跳過下一個匹配結果，移動游標 All：取代全部匹配結果(不管游標位置) Stop：停止取代(無匹配會自動停止) | > | Ctrl-D | 選取 | 批量修改相同內容使用 需先選取標的，否則以游標該「行」為標的 每按一次增加一個匹配標的的游標 (以「行」為標的時，整行相同才會匹配) | > | Ctrl-L | 選取 | 選取該行使用 未選取標的&非末句時，標的為整行(含換行) 未選取標的&為末句時，標的為整行(不含換行) | > > ### 行處理 > |熱鍵|概要|動作/說明| > |-|-|-| > | Ctrl-Enter Ctrl-Shift-Enter | 插入行 | 下插一行 上插一行 | > | Ctrl-Shift-↑ Ctrl-Shift-↓ | 移動行 | 上移一行 下移一行 ## 工具 * 所以...那個W3School怎麼可以這麼亂？ * 分中文/英文，教程/參考，甚至網站間介面還不一樣... * 這裡圖解說明怎麼用 * [W3School.com](https://www.w3schools.com) * [W3School.cn](http://www.w3school.com.cn/) ===編輯中=== ## 定義 * 歸類一下本筆記中的語彙用法 > ### 私定義 > 自己假定的名稱定義，為了方便稱呼、縮減篇幅 > * 命名字元：在大部分程式語言中，通常允許的合法變數名稱必須由「字母」、「數字」、「下底線」組成，因此在此定義：[A-Za-z0-9_]集合中任意字元皆屬於命名字元。 > * 連續命名字元：在此定義由標的依方向計算能找到的(最長)連續命名字元組成的字串。只要遇到「空格」、「換行」或任意非命名字元即屬中斷連續。 > * 標的：用滑鼠或鍵盤將程式碼選取起來，被選取起來之程式碼稱為標的 > ### 簡寫與名稱定義 > 維基、W3School上的定義名稱 > * HTML Format > ![HTML Format](https://i.imgur.com/SJWvWxI.png) > * CSS Format > ![CSS Format](https://i.imgur.com/bI0Re4J.png) > > |簡寫|名稱|說明| > |-|-|-| > | elm | [元素^](http://www.w3school.com.cn/html/html_elements.asp) [Element^](https://www.w3schools.com/html/html_elements.asp) | HTML中標籤開頭到結尾(含標籤) 元素內能包含多元素形成巢狀 | > || [標籤^](http://www.w3school.com.cn/html/html_jianjie.asp) [Tag^](https://www.w3schools.com/html/html_intro.asp) | HTML中角括號包圍的關鍵詞 [W3S Search^](https://www.w3schools.com/tags/default.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/index.asp)(字母) [W3S Search^](https://www.w3schools.com/tags/ref_byfunc.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_byfunc.asp)(類別) | > || [選擇器^](http://www.w3school.com.cn/css/css_syntax.asp) [Selector^](https://www.w3schools.com/css/css_syntax.asp) | 讓CSS知道這個樣示要套在誰身上的方法 [W3S Search^](https://www.w3schools.com/cssref/css_selectors.asp)   [W3S 搜尋^](http://www.w3school.com.cn/cssref/css_selectors.asp) [參考筆記](#CSS選擇器) | > || [聲明/特性^](http://www.w3school.com.cn/css/css_syntax.asp) [Declaration^](https://www.w3schools.com/css/css_syntax.asp) | CSS中ppt, val合稱之 | > | attr | [屬性^](http://www.w3school.com.cn/html/html_attributes.asp) [Attribute^](https://www.w3schools.com/html/html_attributes.asp) | HTML中標籤內的屬性 [W3S Search^](https://www.w3schools.com/tags/ref_attributes.asp)(字母) [W3S Search^](https://www.w3schools.com/tags/ref_standardattributes.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_standardattributes.asp)(全局) [W3S Search^](https://www.w3schools.com/tags/ref_eventattributes.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_eventattributes.asp)(事件) | > | ppt | [屬性^](http://www.w3school.com.cn/css/css_syntax.asp) [Oroperty^](https://www.w3schools.com/css/css_syntax.asp) | CSS中樣式內的屬性 [W3S Search^](https://www.w3schools.com/cssref/default.asp)   [W3S 搜尋^](http://www.w3school.com.cn/cssref/index.asp) | > | val | 值 Value | 屬性(attr/ppt)的參數值 | > | id | 身份 [Identity^](https://www.w3schools.com/html/html_id.asp) | 特化的HTML屬性，其值只能出現一次 [參考Q&A](#id-vs-class) | > | cls | [類^](http://www.w3school.com.cn/html/html_classes.asp) [Class^](https://www.w3schools.com/html/html_classes.asp) | 特化的HTML屬性，作為格式化樣式之用 [參考Q&A](#id-vs-class) | > | | 預處理器 Preprocessor | 將文檔預先依據格式編譯處理的工具 根據其格式能加速開發速度 [參考Q&A](#Emmet-vs-Preprocessor) > ### 顏色意涵 > 範例格式中使用顏色來方便閱覽 > 因此這裡制定本文中顏色規範意義 > * 符號、固定語法 > * 自訂名稱 > * 變量 > * 語法 > * etc > ### 標記 > * 本文的超連結，若末端有「^」符號，表示連外，反之為本文內連結 ## 示範格式 * 示範格式能方便理解各語言語法結構 > * HTML > <標籤 id=id class=cls cls... 屬性="值" 屬性="值"...>內容</標籤> > * HTML+Jade(pug) > 標籤#id.cls.cls...(屬性="值", 屬性="值"...) 內容 > * Emmet on HTML > 標籤#id.cls.cls...[屬性=值 屬性=值...]{內容} > * CSS > 選擇器{屬性:值; 屬性:值;...} > * CSS+Saas > $變數:值 @mixin 模組   屬性:值 選擇器   +模組   屬性:值   屬性:變數   &選擇器... > * Emmet on CSS > 各種縮寫，請參考[CSS 屬性概表](#CSS-屬性概表) > * JS??? > [參考資料](https://www.quora.com/What-do-you-prefer-and-why-TypeScript-CoffeeScript-or-ES6-with-Babel-compiler) ## Emmet 與槪表 * 單元範圍：ch24 * 標籤與屬性槪表僅列常用 * 還分不清Emmet跟Preprocessor？[參考Q&A](#Emmet-vs-Preprocessor) > ### Emmet符號概表 > * 這些是通用於HTML, CSS的概念 > * 請參閱 [Emmet Cheet Sheet^](https://docs.emmet.io/cheat-sheet/)查看詳細Emmet用法 > > |符號|項目|描述/說明| > |-|-|-| > | > + ^ | 位階變動 | 標示下一個標籤的位階 >: 縮排 +: 並排 ^: 反縮排 > | * | 乘法 | 將前面標籤或群組生成數個 > | $ | 變數 | 在使用乘法時的輸出加入計數 > | () | 群組 | 將多標籤合為一體 > | [] {} | 欄位 | []內資料會被放在標籤的屬性部分 {}內資料會被放在標籤的文字部分 | > | . # | 特化屬性 | 因太常用而特化出的屬性 符號前為標籤，默認為div 符號後為屬性值，可連續使用 .: class屬性 #: id屬性 | > ### HTML 標籤概表 > * 說明中的「生成」為使用Emmet生成結果 > * 除了「!」以外，其他都是生成單一標籤 > * 因為規範在演進，未來的 HTML 版本中，不允許使用沒有結束標籤的 HTML 元素，因此提供了一個「建議打」的樣式 > * 搜尋可參考列表 > [W3S Search^](https://www.w3schools.com/tags/default.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/index.asp)(字母) [W3S Search^](https://www.w3schools.com/tags/ref_byfunc.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_byfunc.asp)(類別) > > |標籤|項目|描述/說明/Emmet| > |-|-|-| > | ! | 範本 | 生成關鍵範本HTML 有header、body的範本 | > | 未定義的 命名字元 | 名稱 | 生成\<x>\</x> | > | h1 p | 標題 段落 | 生成\<h1>\</h1> 生成\<p>\</p> > | a | 超連結 | 生成\<a href="">\</a> | > | img | 圖片 | 生成\<img src="" alt=""> 建議打\<img src="" alt="" /> | > | video | 影片 | 生成\<video src="">\</video> > | br | 換行 | 生成\<br>，建議打<br /> > | hr | 水平線 | 生成\<hr>，建議打<hr /> > ### HTML 屬性槪表 > * 有些屬性可以跟著標籤用Emmet一起生成，但其他要自己打 > * 搜尋可參考列表 > [W3S Search^](https://www.w3schools.com/tags/ref_attributes.asp)(字母) [W3S Search^](https://www.w3schools.com/tags/ref_standardattributes.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_standardattributes.asp)(全局) [W3S Search^](https://www.w3schools.com/tags/ref_eventattributes.asp)   [W3S 搜尋^](http://www.w3school.com.cn/tags/html_ref_eventattributes.asp)(事件) > > |屬性|描述/說明| > |-|-| > | alt | 無法載入圖片時顯示的文字 | > | class | 方便HTML套上CSS樣式的類別 | > | disabled | 讓輸入元素不給輸入 | > | href | 超連結目的地 | > | id | 元素的獨特身分標記 | > | src | 圖片來源連結 | > | style | 行內樣式。HTML內嵌CSS樣式 | > | title | hover時顯示的文字說明 | > ### CSS 屬性概表 > * 搜尋可參考列表 > [W3S Search^](https://www.w3schools.com/cssref/default.asp)   [W3S 搜尋^](http://www.w3school.com.cn/cssref/index.asp) > > |類別|縮寫|屬性/語法|說明| > |-|-|-|-| > ===建造中=== > ## CSS選擇器 * 選擇器是啥？就是讓CSS知道這個樣示要套在誰身上的方法 * 你可以用「標籤」、「屬性」或「萬用字元」來做選擇 * 想更精確的選擇，可以使用組合選擇器來混合基本選擇器 * 還有一些選擇條件，並不是直接選取，我們稱之「偽類」、「偽元素」。例如「牽扯到元素狀態」、「進階的階層探索需求」以及「排除條件」等 > ### 基本選擇器 > * 萬事起頭難，但有了基本選擇器就能匹配很多選擇了 > > | 示例 | 說明/匹配 | > |-|-| > | Tag | 使用標籤做選擇，可以是h1, p或div等 匹配「含Tag標籤」的元素 稱為「標籤選擇器」、「元素選擇器」 | > | .cls | 使用類別屬性做選擇 匹配「含cls類別」的元素 無法單純匹配「.」，可以屬性選擇器[class]代替 (但權重不同) 稱為「類別選擇器」 | > | #id | 使用ID屬性做選擇 匹配「ID為id」的元素 無法單純匹配「#」，可以屬性選擇器[id]代替 (但權重不同) 稱為「ID選擇器」 | > | [attr] [attr="val"] [attr~="val"] [attr\|="val"] [attr^="val"] [attr$="val"] [attr*="val"] | 使用其他屬性做選擇 匹配屬性與值，詳見下 稱為「屬性選擇器」、「萬用字元選擇器」 無: 匹配「含attr屬性」的元素 =: 匹配「含attr屬性」且「值為val」的元素 ~=: 匹配「含attr屬性」且「值以空白分隔中含val」的元素 \|=: 匹配「含attr屬性」且「值為val或以val-開頭」的元素 ^=: 匹配「含attr屬性」且「值以val開頭」的元素 $=: 匹配「含attr屬性」且「值以val結尾」的元素 *=: 匹配「含attr屬性」且「值的字串含val」的元素 | > | * | 匹配所有元素 稱為「萬用選擇器」 | > ### 選擇器的組合與組合選擇器 > * 基本選擇器有時候無法滿足我們想匹配的項目，所以組合他們吧 > * A, B為選擇器。下表中原意中表達「滿足A選擇器」轉換為「滿足A」以縮短篇幅 > > | 示例 | 說明/匹配 | > |-|-| > | A | 匹配「滿足A選擇器」的元素 | > | AB | 匹配「滿足A與B」的元素 例：「Tag.cls」匹配「含Tag標籤且含有cls class」的元素 例：「cls1.cls2」匹配「含cls1跟cls2 class」的元素 | > | A, B | 匹配「滿足A」或「滿足B」的元素。多選擇器用「,」隔開 稱為「群組選擇器」 | > | A B | 匹配「直系上層滿足A」且「滿足B」的元素 上層不限父層，中間有隔幾層也沒關係 稱為「後代選擇器」、「派生選擇器」 | > | A>B | 匹配「父層滿足A」且「滿足B」的元素 稱為「子代選擇器」。上層限父層 | > | A~B | 匹配「同層滿足A」且「滿足B」的元素 稱為「全體兄弟選擇器」。雖說同層，但只往後看不往回找 | > | A+B | 匹配「相鄰同層滿足A」且「滿足B」的元素 稱為「相鄰兄弟選擇器」。不往回找，也就是剛好跟在A後的B | * 相關資料 + [W3S Search^](https://www.w3schools.com/cssref/css_selectors.asp) + [W3S 搜尋^](http://www.w3school.com.cn/cssref/css_selectors.asp) + [A菜哥K設計選擇器 Part I (基本、組合、偽類)^](http://archerworkshop.info/css%E9%81%B8%E6%93%87%E5%99%A8/) + [A菜哥K設計選擇器 Part II (偽元素)^](http://archerworkshop.info/css-selectors%E9%81%B8%E6%93%87%E5%99%A8-part-ii-first-line-first-letter-first-child-last-child-nth-childn/) + [中文維基 (基本、屬性、組合)^](https://zh.wikipedia.org/wiki/层叠样式表#基本選擇器) * [英文維基 (清單呈現)^](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) ## Q & A ### 找不到Jade > * 請選取Pug ### id vs. class > * id是作為辨識唯一元素之用，單一元素最多一個，不同元素id不能重複 > * class是作為格式化之用，單一元素能有複數格式，不同元素能套用相同格式 > * id與class是特化的屬性，因為常用而獨立出來。能用屬性選擇器替代他們 ### Emmet vs. Preprocessor > * Emmet是一種補完系統，能協助我們更快「打出」想輸入的東西 > * Preprocessor是一種編譯器，餵入對應格式，編譯出符合需求的輸出 > 在這裡的輸出就是HTML/CSS/JS，而pug, saas都是Preprocessor的一種 ```graphviz digraph graphname{ rankdir=LR "輸入\nInput" -> "Emmet 格式\nEmmet Format" [label="使用Emmet", fontcolor=tomato] "Emmet 格式\nEmmet Format" -> "預處理器格式\nPreprocessor Format" [label="使用Preprocessor", fontcolor=tomato] "輸入\nInput" -> "預處理器格式\nPreprocessor Format" [label="不使用Emmet\n使用Preprocessor", fontcolor=tomato] "預處理器格式\nPreprocessor Format" -> "輸出\nOutput" [label="編譯\nCompile", fontcolor=darkgreen] "輸入\nInput" -> "輸出\nOutput" [label="不使用Emmet\n不使用Preprocessor", fontcolor=tomato] "Emmet 格式\nEmmet Format" -> "輸出\nOutput" [label="不使用Preprocessor", fontcolor=tomato] } ``` ### 論那些功能相同的標籤 b vs strong i vs em https://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em u vs ins vs style https://stackoverflow.com/questions/12148517/whats-the-difference-between-the-u-tag-and-the-ins-tag s vs strike vs del

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.