###### tags: `六角筆記王` `HTML` `CSS` `jQuery` `Emmet`
# EMMET快捷鍵大全
[教學網頁](https://pjchender.blogspot.com/2016/07/emmet.html)
使用重點：
- 輸入EMMET的關鍵字後，按下TAB鍵，即可產生相對應的語法。
- 關鍵字之間不能為了整潔或其他目的而使用空格。
---
## HTML
- 子層: `>`
- 同層: `+`
- 不帶樣式的div: `div`
- 跳回上層: `^`
- 重複的標籤: `*次數`
- 綁在一起:`()`
把同層的槽狀結構分開
- `lorem20` :可以寫出20個假字
如果在一列式的話可以打 p>lorem20
<br>
## 在HTML增加屬性
- 標籤選擇器命名: `.className`
產生元素時直接加上指定的 .className，例如：h1.title
- 有class選擇器的div: `.名字`

- 有id屬性的div: `#名字`

- 自定義屬性和內容attribute: `[]`

- 設定編號: `$`

- 起始值: `@`
有時候連續符號不是從1開始

- 內容: `{}`
<br>

## CSS縮寫
### margin
- margin 0 auto: `m0-a`
- margin-top: 10px :`mt10`
- margin-bottom:auto : `mb-a`
### padding
- padding: 10% 20% : `p10p20p`
- padding: 10px 20px : `p10px20px`
- padding-right: 10px : `pt10`
### box Sizing＆長寬
- box-sizing:border-box : `bxz:bb`
- box-shadow: `bzsh`
- width:30px : `w30`
- height:20px : `h20`
- max-width:10px :`maw10`
- max-height:20px :`mah20`
### border
- border-right: `bdr`
- border: 3px solid #ffff :`bd3-s#ffff`
### Background
- background: `bg`
- background: #000 : `bg#000`
- background-repeat:no-repeat : `bgrn`
### font-size
- font-size:`fz`
- font-weight:10px : `fw10`
- font-weight:bold : `fwb`
- font-weight:bolder : `fwbr`
- font-weight:lighter : `fwl`
- font-size:16px : `fz16`
- font-family : `ff`
### text
- text-align:center : `tac`
- text-decoration:none : `tdn`
- text-decoration:underline 下底線 : `tdu`
- line-height: 20px 行高 : `lh20`
- letter-spacing: 2px 字元間距控制 : `lts2`
- white-space: nowrap 空白區域處理(強制不換行,在同一行內顯示所有內容) : `whsnw`
- word-wrap:break-word 單字折行設定(過長的單字會自動折到下一行) : wowb
### float: `fl`
- float:left : `fll`
### Lists清單ul.li系列
- list-style:none : `lisn`
- list-style-type:none : `listn`
- list-style-type:disc : `listd`
### display
- display:none : `dn`
- display:block : `db`
- display:flex : `df`
- display:inline : `di`
- display:inline-block : `dib`
### overflow
- overflow:hidden : `oh`
<br>

## Flex系列
### flex direction
- flex-direction:column 直為行 : `fxdc`
- flex-direction:row 恆為列: `fxdr`
### justify-content
- justify-content:center : `jcc`
- justify-content:flex-start : `jcfs`
- justify-content:flex-end : `jcfe`
- justify-content:space-around : `jcsa`
- justify-content:space-between : `jcsb`
### align-items
- align-items:center : `aic`
- align-items:flex-start : `aifs`
- align-items:flex-end : `aife`
<br>

## 直式橫式寫
- writing-mode: horizontal-tb 預設是水平顯示(上到下)
- writing-mode: vertical-rl 垂直顯示(右到左)
- writing-mode: vertical-lr 垂直顯示(左到右)
<br>

## jQuery

- `jdr`:jqDocReady(基礎環境起手式)
- 大部分的語法都是:`jqXXX`
例如點擊效果是:`jqclick` 、顯示效果:`jqshow`