5701da6e5b
* format: fix markdown * update: fix markdown * update: fix cron problems * update: delete .markdownlintignore * update * chore: add tab -> 4 space * chore: fix tab -> 2 in the .editorconfig
2402 lines
41 KiB
Markdown
2402 lines
41 KiB
Markdown
Emmet 备忘清单
|
|
====
|
|
|
|
[Emmet](https://emmet.io/) 是一个用于提升 [HTML](./html.md) 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。
|
|
|
|
Emmet 语法
|
|
---------------
|
|
|
|
### 入门
|
|
|
|
让我们开始将您的开发提高到光速。
|
|
|
|
- [Visual Studio 代码中的 Emmet](https://code.visualstudio.com/docs/editor/emmet) _(code.visualstudio.com)_
|
|
- [Sublime Text 的 Emmet 2](https://github.com/emmetio/sublime-text-plugin) _(github.com)_
|
|
- [Emmet for Coda](https://emmet.io/download/coda/) _(emmet.io)_
|
|
- [Emmet for Atom](https://github.com/emmetio/emmet-atom#readme) _(github.com)_
|
|
|
|
### 乘法：*
|
|
|
|
`ul>li*5`
|
|
|
|
```html
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
```
|
|
|
|
### 孩子: >
|
|
|
|
`nav>ul>li`
|
|
|
|
```html
|
|
<nav>
|
|
<ul>
|
|
<li></li>
|
|
</ul>
|
|
</nav>
|
|
```
|
|
|
|
### 自定义属性
|
|
<!--rehype:wrap-class=col-span-2-->
|
|
|
|
`p[title="Hello world"]`
|
|
|
|
```html
|
|
<p title="Hello world"></p>
|
|
```
|
|
|
|
`td[rowspan=2 colspan=3 title]`
|
|
|
|
```html
|
|
<td rowspan="2" colspan="3" title=""></td>
|
|
```
|
|
|
|
`[a='value1' b="value2"]`
|
|
|
|
```html
|
|
<div a="value1" b="value2"></div>
|
|
```
|
|
|
|
### 文本: {}
|
|
|
|
a{Click me}
|
|
|
|
```html
|
|
<a href="">Click me</a>
|
|
```
|
|
|
|
p>{Click }+a{here}+{ 继续}
|
|
|
|
```html
|
|
<p>Click <a href="">here</a> 继续</p>
|
|
```
|
|
|
|
### ID 和 CLASS 属性
|
|
<!--rehype:wrap-class=row-span-2-->
|
|
|
|
\# header
|
|
|
|
```html
|
|
<div id="header"></div>
|
|
```
|
|
|
|
.title
|
|
|
|
```html
|
|
<div class="title"></div>
|
|
```
|
|
|
|
form#search.wide
|
|
|
|
```html
|
|
<form id="search" class="wide"></form>
|
|
```
|
|
|
|
p.class1.class2.class3
|
|
|
|
```html
|
|
<p class="class1 class2 class3"></p>
|
|
```
|
|
|
|
### 隐式标签名称
|
|
<!--rehype:wrap-class=row-span-2-->
|
|
|
|
.class
|
|
|
|
```html
|
|
<div class="class"></div>
|
|
```
|
|
|
|
em>.class
|
|
|
|
```html
|
|
<em><span class="class"></span></em>
|
|
```
|
|
|
|
ul>.class
|
|
|
|
```html
|
|
<ul>
|
|
<li class="class"></li>
|
|
</ul>
|
|
```
|
|
|
|
table>.row>.col
|
|
|
|
```html
|
|
<table>
|
|
<tr class="row">
|
|
<td class="col"></td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
|
|
### 兄弟: +
|
|
|
|
div+p+bq
|
|
|
|
```html
|
|
<div></div>
|
|
<p></p>
|
|
<blockquote></blockquote>
|
|
```
|
|
|
|
### $
|
|
<!--rehype:wrap-class=row-span-2-->
|
|
|
|
ul>li.item$*3
|
|
|
|
```html
|
|
<ul>
|
|
<li class="item1"></li>
|
|
<li class="item2"></li>
|
|
<li class="item3"></li>
|
|
</ul>
|
|
```
|
|
|
|
h$[title=item$]{Header $}*3
|
|
|
|
```html
|
|
<h1 title="item1">Header 1</h1>
|
|
<h2 title="item2">Header 2</h2>
|
|
<h3 title="item3">Header 3</h3>
|
|
```
|
|
|
|
ul>li.item$$$*3
|
|
|
|
```html
|
|
<ul>
|
|
<li class="item001"></li>
|
|
<li class="item002"></li>
|
|
<li class="item003"></li>
|
|
</ul>
|
|
```
|
|
|
|
ul>li.item$@-*3
|
|
|
|
```html
|
|
<ul>
|
|
<li class="item3"></li>
|
|
<li class="item2"></li>
|
|
<li class="item1"></li>
|
|
</ul>
|
|
```
|
|
|
|
ul>li.item$@2*3
|
|
|
|
```html
|
|
<ul>
|
|
<li class="item2"></li>
|
|
<li class="item3"></li>
|
|
<li class="item4"></li>
|
|
</ul>
|
|
```
|
|
|
|
### 上一层: ^
|
|
|
|
div+div>p>span+em^bq
|
|
|
|
```html
|
|
<div></div>
|
|
<div>
|
|
<p><span></span><em></em></p>
|
|
<blockquote></blockquote>
|
|
</div>
|
|
```
|
|
|
|
div+div>p>span+em^^bq
|
|
|
|
```html
|
|
<div></div>
|
|
<div>
|
|
<p><span></span><em></em></p>
|
|
</div>
|
|
<blockquote></blockquote>
|
|
```
|
|
|
|
### 分组: ()
|
|
|
|
div>(header>ul>li*2>a)+footer>p
|
|
|
|
```html
|
|
<div>
|
|
<header>
|
|
<ul>
|
|
<li><a href=""></a></li>
|
|
<li><a href=""></a></li>
|
|
</ul>
|
|
</header>
|
|
<footer>
|
|
<p></p>
|
|
</footer>
|
|
</div>
|
|
```
|
|
|
|
(div>dl>(dt+dd)*4)+footer>p
|
|
|
|
```html
|
|
<div>
|
|
<dl>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
</dl>
|
|
</div>
|
|
<footer>
|
|
<p></p>
|
|
</footer>
|
|
```
|
|
|
|
HTML
|
|
---
|
|
|
|
### HTML 1
|
|
|
|
`!` 或者 `html:5`
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
a
|
|
|
|
```html
|
|
<a href=""></a>
|
|
```
|
|
|
|
a:link
|
|
|
|
```html
|
|
<a href="http://"></a>
|
|
```
|
|
|
|
a:mail
|
|
|
|
```html
|
|
<a href="mailto:"></a>
|
|
```
|
|
|
|
abbr
|
|
|
|
```html
|
|
<abbr title=""></abbr>
|
|
```
|
|
|
|
acronym, acr
|
|
|
|
```html
|
|
<acronym title=""></acronym>
|
|
```
|
|
|
|
base
|
|
|
|
```html
|
|
<base href="" />
|
|
```
|
|
|
|
basefont
|
|
|
|
```html
|
|
<basefont />
|
|
```
|
|
|
|
br
|
|
|
|
```html
|
|
<br />
|
|
```
|
|
|
|
frame
|
|
|
|
```html
|
|
<frame />
|
|
```
|
|
|
|
hr
|
|
|
|
```html
|
|
<hr />
|
|
```
|
|
|
|
bdo
|
|
|
|
```html
|
|
<bdo dir=""></bdo>
|
|
```
|
|
|
|
bdo:r
|
|
|
|
```html
|
|
<bdo dir="rtl"></bdo>
|
|
```
|
|
|
|
bdo:l
|
|
|
|
```html
|
|
<bdo dir="ltr"></bdo>
|
|
```
|
|
|
|
col
|
|
|
|
```html
|
|
<col />
|
|
```
|
|
|
|
link
|
|
|
|
```html
|
|
<link rel="stylesheet" href="" />
|
|
```
|
|
|
|
link:css
|
|
|
|
```html
|
|
<link rel="stylesheet" href="style.css" />
|
|
```
|
|
|
|
link:print
|
|
|
|
```html
|
|
<link rel="stylesheet" href="print.css" media="print" />
|
|
```
|
|
|
|
link:favicon
|
|
|
|
```html
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
|
|
```
|
|
|
|
link:touch
|
|
|
|
```html
|
|
<link rel="apple-touch-icon" href="favicon.png" />
|
|
```
|
|
|
|
link:rss
|
|
|
|
```html
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
link:atom
|
|
|
|
```html
|
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
link:import, link:im
|
|
|
|
```html
|
|
<link rel="import" href="component.html" />
|
|
```
|
|
|
|
meta
|
|
|
|
```html
|
|
<meta />
|
|
```
|
|
|
|
meta:utf
|
|
|
|
```html
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
```
|
|
|
|
meta:win
|
|
|
|
```html
|
|
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
meta:vp
|
|
|
|
```html
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
meta:compat
|
|
|
|
```html
|
|
<meta http-equiv="X-UA-Compatible" content="IE=7" />
|
|
```
|
|
|
|
style
|
|
|
|
```html
|
|
<style></style>
|
|
```
|
|
|
|
script
|
|
|
|
```html
|
|
<script></script>
|
|
```
|
|
|
|
script:src
|
|
|
|
```html
|
|
<script src=""></script>
|
|
```
|
|
|
|
img
|
|
|
|
```html
|
|
<img src="" alt="" />
|
|
```
|
|
|
|
img:srcset, img:s
|
|
|
|
```html
|
|
<img srcset="" src="" alt="" />
|
|
```
|
|
|
|
img:sizes, img:z
|
|
|
|
```html
|
|
<img sizes="" srcset="" src="" alt="" />
|
|
```
|
|
|
|
picture
|
|
|
|
```html
|
|
<picture></picture>
|
|
```
|
|
|
|
source, src
|
|
|
|
```html
|
|
<source />
|
|
```
|
|
|
|
source:src, src:sc
|
|
|
|
```html
|
|
<source src="" type="" />
|
|
```
|
|
|
|
source:srcset, src:s
|
|
|
|
```html
|
|
<source srcset="" />
|
|
```
|
|
|
|
source:media, src:m
|
|
|
|
```html
|
|
<source media="(min-width: )" srcset="" />
|
|
```
|
|
|
|
source:type, src:t
|
|
|
|
```html
|
|
<source srcset="" type="image/" />
|
|
```
|
|
|
|
source:sizes, src:z
|
|
|
|
```html
|
|
<source sizes="" srcset="" />
|
|
```
|
|
|
|
source:media:type, src:mt
|
|
|
|
```html
|
|
<source media="(min-width: )" srcset="" type="image/" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
source:media:sizes, src:mz
|
|
|
|
```html
|
|
<source media="(min-width: )" sizes="" srcset="" />
|
|
```
|
|
|
|
source:sizes:type, src:zt
|
|
|
|
```html
|
|
<source sizes="" srcset="" type="image/" />
|
|
```
|
|
|
|
iframe
|
|
|
|
```html
|
|
<iframe src="" frameborder="0"></iframe>
|
|
```
|
|
|
|
embed
|
|
|
|
```html
|
|
<embed src="" type="" />
|
|
```
|
|
|
|
object
|
|
|
|
```html
|
|
<object data="" type=""></object>
|
|
```
|
|
|
|
param
|
|
|
|
```html
|
|
<param name="" value="" />
|
|
```
|
|
|
|
map
|
|
|
|
```html
|
|
<map name=""></map>
|
|
```
|
|
|
|
area
|
|
|
|
```html
|
|
<area shape="" coords="" href="" alt="" />
|
|
```
|
|
|
|
area:d
|
|
|
|
```html
|
|
<area shape="default" href="" alt="" />
|
|
```
|
|
|
|
area:c
|
|
|
|
```html
|
|
<area shape="circle" coords="" href="" alt="" />
|
|
```
|
|
|
|
area:r
|
|
|
|
```html
|
|
<area shape="rect" coords="" href="" alt="" />
|
|
```
|
|
|
|
area:p
|
|
|
|
```html
|
|
<area shape="poly" coords="" href="" alt="" />
|
|
```
|
|
|
|
form
|
|
|
|
```html
|
|
<form action=""></form>
|
|
```
|
|
|
|
form:get
|
|
|
|
```html
|
|
<form action="" method="get"></form>
|
|
```
|
|
|
|
form:post
|
|
|
|
```html
|
|
<form action="" method="post"></form>
|
|
```
|
|
|
|
label
|
|
|
|
```html
|
|
<label for=""></label>
|
|
```
|
|
|
|
input
|
|
|
|
```html
|
|
<input type="text" />
|
|
```
|
|
|
|
inp
|
|
|
|
```html
|
|
<input type="text" name="" id="" />
|
|
```
|
|
|
|
input:hidden, input:h 别名 input[type=hidden name]
|
|
|
|
```html
|
|
<input type="hidden" name="" />
|
|
```
|
|
|
|
input:text, input:t 别名 inp
|
|
|
|
```html
|
|
<input type="text" name="" id="" />
|
|
```
|
|
|
|
input:search 别名 inp[type=search]
|
|
|
|
```html
|
|
<input type="search" name="" id="" />
|
|
```
|
|
|
|
input:email 别名 inp[type=email]
|
|
|
|
```html
|
|
<input type="email" name="" id="" />
|
|
```
|
|
|
|
### HTML 2
|
|
|
|
input:url 别名 inp[type=url]
|
|
|
|
```html
|
|
<input type="url" name="" id="" />
|
|
```
|
|
|
|
input:password, input:p 别名 inp[type=password]
|
|
|
|
```html
|
|
<input type="password" name="" id="" />
|
|
```
|
|
|
|
input:datetime 别名 inp[type=datetime]
|
|
|
|
```html
|
|
<input type="datetime" name="" id="" />
|
|
```
|
|
|
|
input:date 别名 inp[type=date]
|
|
|
|
```html
|
|
<input type="date" name="" id="" />
|
|
```
|
|
|
|
input:datetime-local 别名 inp[type=datetime-local]
|
|
|
|
```html
|
|
<input type="datetime-local" name="" id="" />
|
|
```
|
|
|
|
input:month 别名 inp[type=month]
|
|
|
|
```html
|
|
<input type="month" name="" id="" />
|
|
```
|
|
|
|
input:week 别名 inp[type=week]
|
|
|
|
```html
|
|
<input type="week" name="" id="" />
|
|
```
|
|
|
|
input:time 别名 inp[type=time]
|
|
|
|
```html
|
|
<input type="time" name="" id="" />
|
|
```
|
|
|
|
input:tel 别名 inp[type=tel]
|
|
|
|
```html
|
|
<input type="tel" name="" id="" />
|
|
```
|
|
|
|
input:number 别名 inp[type=number]
|
|
|
|
```html
|
|
<input type="number" name="" id="" />
|
|
```
|
|
|
|
input:color 别名 inp[type=color]
|
|
|
|
```html
|
|
<input type="color" name="" id="" />
|
|
```
|
|
|
|
input:checkbox, input:c 别名 inp[type=checkbox]
|
|
|
|
```html
|
|
<input type="checkbox" name="" id="" />
|
|
```
|
|
|
|
input:radio, input:r 别名 inp[type=radio]
|
|
|
|
```html
|
|
<input type="radio" name="" id="" />
|
|
```
|
|
|
|
input:range 别名 inp[type=range]
|
|
|
|
```html
|
|
<input type="range" name="" id="" />
|
|
```
|
|
|
|
input:file, input:f 别名 inp[type=file]
|
|
|
|
```html
|
|
<input type="file" name="" id="" />
|
|
```
|
|
|
|
input:submit, input:s
|
|
|
|
```html
|
|
<input type="submit" value="" />
|
|
```
|
|
|
|
input:image, input:i
|
|
|
|
```html
|
|
<input type="image" src="" alt="" />
|
|
```
|
|
|
|
input:button, input:b
|
|
|
|
```html
|
|
<input type="button" value="" />
|
|
```
|
|
|
|
isindex
|
|
|
|
```html
|
|
<isindex />
|
|
```
|
|
|
|
input:reset 别名 input:button[type=reset]
|
|
|
|
```html
|
|
<input type="reset" value="" />
|
|
```
|
|
|
|
select
|
|
|
|
```html
|
|
<select name="" id=""></select>
|
|
```
|
|
|
|
select:disabled, select:d 别名 select[disabled.]
|
|
|
|
```html
|
|
<select name="" id="" disabled="disabled"></select>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
option, opt
|
|
|
|
```html
|
|
<option value=""></option>
|
|
```
|
|
|
|
textarea
|
|
|
|
```html
|
|
<textarea name="" id="" cols="30" rows="10"></textarea>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
marquee
|
|
|
|
```html
|
|
<marquee behavior="" direction=""></marquee>
|
|
```
|
|
|
|
menu:context, menu:c 别名 menu[type=context]>
|
|
|
|
```html
|
|
<menu type="context"></menu>
|
|
```
|
|
|
|
menu:toolbar, menu:t 别名 menu[type=toolbar]>
|
|
|
|
```html
|
|
<menu type="toolbar"></menu>
|
|
```
|
|
|
|
video
|
|
|
|
```html
|
|
<video src=""></video>
|
|
```
|
|
|
|
audio
|
|
|
|
```html
|
|
<audio src=""></audio>
|
|
```
|
|
|
|
html:xml
|
|
|
|
```html
|
|
<html xmlns="http://www.w3.org/1999/xhtml"></html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
keygen
|
|
|
|
```html
|
|
<keygen />
|
|
```
|
|
|
|
command
|
|
|
|
```html
|
|
<command />
|
|
```
|
|
|
|
button:submit, button:s, btn:s 别名 button[type=submit]
|
|
|
|
```html
|
|
<button type="submit"></button>
|
|
```
|
|
|
|
button:reset, button:r, btn:r 别名 button[type=reset]
|
|
|
|
```html
|
|
<button type="reset"></button>
|
|
```
|
|
|
|
button:disabled, button:d, btn:d 别名 button[disabled.]
|
|
|
|
```html
|
|
<button disabled="disabled"></button>
|
|
```
|
|
|
|
fieldset:disabled, fieldset:d, fset:d, fst:d 别名 fieldset[disabled.]
|
|
|
|
```html
|
|
<fieldset disabled="disabled"></fieldset>
|
|
```
|
|
|
|
bq 别名 blockquote
|
|
|
|
```html
|
|
<blockquote></blockquote>
|
|
```
|
|
|
|
fig 别名 figure
|
|
|
|
```html
|
|
<figure></figure>
|
|
```
|
|
|
|
figc 别名 figcaption
|
|
|
|
```html
|
|
<figcaption></figcaption>
|
|
```
|
|
|
|
pic 别名 picture
|
|
|
|
```html
|
|
<picture></picture>
|
|
```
|
|
|
|
ifr 别名 iframe
|
|
|
|
```html
|
|
<iframe src="" frameborder="0"></iframe>
|
|
```
|
|
|
|
emb 别名 embed
|
|
|
|
```html
|
|
<embed src="" type="" />
|
|
```
|
|
|
|
obj 别名 object
|
|
|
|
```html
|
|
<object data="" type=""></object>
|
|
```
|
|
|
|
cap 别名 caption
|
|
|
|
```html
|
|
<caption></caption>
|
|
```
|
|
|
|
colg 别名 colgroup
|
|
|
|
```html
|
|
<colgroup></colgroup>
|
|
```
|
|
|
|
fst, fset 别名 fieldset
|
|
|
|
```html
|
|
<fieldset></fieldset>
|
|
```
|
|
|
|
btn 别名 button
|
|
|
|
```html
|
|
<button></button>
|
|
```
|
|
|
|
optg 别名 optgroup
|
|
|
|
```html
|
|
<optgroup></optgroup>
|
|
```
|
|
|
|
tarea 别名 textarea
|
|
|
|
```html
|
|
<textarea name="" id="" cols="30" rows="10"></textarea>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
leg 别名 legend
|
|
|
|
```html
|
|
<legend></legend>
|
|
```
|
|
|
|
sect 别名 section
|
|
|
|
```html
|
|
<section></section>
|
|
```
|
|
|
|
art 别名 article
|
|
|
|
```html
|
|
<article></article>
|
|
```
|
|
|
|
hdr 别名 header
|
|
|
|
```html
|
|
<header></header>
|
|
```
|
|
|
|
ftr 别名 footer
|
|
|
|
```html
|
|
<footer></footer>
|
|
```
|
|
|
|
adr 别名 address
|
|
|
|
```html
|
|
<address></address>
|
|
```
|
|
|
|
dlg 别名 dialog
|
|
|
|
```html
|
|
<dialog></dialog>
|
|
```
|
|
|
|
str 别名 strong
|
|
|
|
```html
|
|
<strong></strong>
|
|
```
|
|
|
|
prog 别名 progress
|
|
|
|
```html
|
|
<progress></progress>
|
|
```
|
|
|
|
mn 别名 main
|
|
|
|
```html
|
|
<main></main>
|
|
```
|
|
|
|
tem 别名 template
|
|
|
|
```html
|
|
<template></template>
|
|
```
|
|
|
|
datag 别名 datagrid
|
|
|
|
```html
|
|
<datagrid></datagrid>
|
|
```
|
|
|
|
datal 别名 datalist
|
|
|
|
```html
|
|
<datalist></datalist>
|
|
```
|
|
|
|
kg 别名 keygen
|
|
|
|
```html
|
|
<keygen />
|
|
```
|
|
|
|
out 别名 output
|
|
|
|
```html
|
|
<output></output>
|
|
```
|
|
|
|
det 别名 details
|
|
|
|
```html
|
|
<details></details>
|
|
```
|
|
|
|
### HTML 3
|
|
|
|
cmd
|
|
Alias of command
|
|
|
|
```html
|
|
<command />
|
|
```
|
|
|
|
doc 别名 html>(head>meta[charset=${charset}]+title{${1:Document}})+body
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
doc4 别名 html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{${1:Document}})+body
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
ri:dpr, ri:d 别名 img:s
|
|
|
|
```html
|
|
<img srcset="" src="" alt="" />
|
|
```
|
|
|
|
ri:viewport, ri:v 别名 img:z
|
|
|
|
```html
|
|
<img sizes="" srcset="" src="" alt="" />
|
|
```
|
|
|
|
ri:art, ri:a 别名 pic>src:m+img
|
|
|
|
```html
|
|
<picture>
|
|
<source media="(min-width: )" srcset="" />
|
|
<img src="" alt="" />
|
|
</picture>
|
|
```
|
|
|
|
ri:type, ri:t 别名 pic>src:t+img
|
|
|
|
```html
|
|
<picture>
|
|
<source srcset="" type="image/" />
|
|
<img src="" alt="" />
|
|
</picture>
|
|
```
|
|
|
|
html:4t 别名 !!!4t+doc4[lang=${lang}]
|
|
|
|
```html
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
html:4s 别名 !!!4s+doc4[lang=${lang}]
|
|
|
|
```html
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
html:xt 别名 !!!xt+doc4[xmlns=<http://www.w3.org/1999/xhtml> xml:lang=${lang}]
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
html:xs 别名 !!!xs+doc4[xmlns=<http://www.w3.org/1999/xhtml> xml:lang=${lang}]
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
html:xxs 别名 !!!xxs+doc4[xmlns=<http://www.w3.org/1999/xhtml> xml:lang=${lang}]
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
html:5 别名 !!!+doc[lang=${lang}]
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Document</title>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
ol+ 别名 ol>li
|
|
|
|
```html
|
|
<ol>
|
|
<li></li>
|
|
</ol>
|
|
```
|
|
|
|
ul+ 别名 ul>li
|
|
|
|
```html
|
|
<ul>
|
|
<li></li>
|
|
</ul>
|
|
```
|
|
|
|
dl+ 别名 dl>dt+dd
|
|
|
|
```html
|
|
<dl>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
</dl>
|
|
```
|
|
|
|
map+ 别名 map>area
|
|
|
|
```html
|
|
<map name="">
|
|
<area shape="" coords="" href="" alt="" />
|
|
</map>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
table+ 别名 table>tr>td
|
|
|
|
```html
|
|
<table>
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
```
|
|
|
|
colgroup+, colg+ 别名 colgroup>col
|
|
|
|
```html
|
|
<colgroup>
|
|
<col />
|
|
</colgroup>
|
|
```
|
|
|
|
tr+ 别名 tr>td
|
|
|
|
```html
|
|
<tr>
|
|
<td></td>
|
|
</tr>
|
|
```
|
|
|
|
select+ 别名 select>option
|
|
|
|
```html
|
|
<select name="" id="">
|
|
<option value=""></option>
|
|
</select>
|
|
```
|
|
|
|
optgroup+, optg+ 别名 optgroup>option
|
|
|
|
```html
|
|
<optgroup>
|
|
<option value=""></option>
|
|
</optgroup>
|
|
```
|
|
|
|
pic+ 别名 picture>source:srcset+img
|
|
|
|
```html
|
|
<picture>
|
|
<source srcset="" />
|
|
<img src="" alt="" />
|
|
</picture>
|
|
```
|
|
|
|
!!!
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
```
|
|
|
|
!!!4t
|
|
|
|
```html
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
!!!4s
|
|
|
|
```html
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
!!!xt
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
!!!xs
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
!!!xxs
|
|
|
|
```html
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
c
|
|
|
|
```html
|
|
<!-- ${child} -->
|
|
```
|
|
|
|
cc:ie6
|
|
|
|
```html
|
|
<!--[if lte IE 6]>
|
|
${child}
|
|
<![endif]-->
|
|
```
|
|
|
|
cc:ie
|
|
|
|
```html
|
|
<!--[if IE]>
|
|
${child}
|
|
<![endif]-->
|
|
```
|
|
|
|
cc:noie
|
|
|
|
```html
|
|
<!--[if !IE]><!-->
|
|
${child}
|
|
<!--<![endif]-->
|
|
```
|
|
|
|
CSS
|
|
--------
|
|
|
|
### 视觉格式
|
|
<!--rehype:wrap-class=row-span-4-->
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`pos` | position:relative;
|
|
`pos:s` | position:static;
|
|
`pos:a` | position:absolute;
|
|
`pos:r` | position:relative;
|
|
`pos:f` | position:fixed;
|
|
`t` | top:;
|
|
`t:a` | top:auto;
|
|
`r` | right:;
|
|
`r:a` | right:auto;
|
|
`b` | bottom:;
|
|
`b:a` | bottom:auto;
|
|
`l` | left:;
|
|
`l:a` | left:auto;
|
|
`z` | z-index:;
|
|
`z:a` | z-index:auto;
|
|
`fl` | float:left;
|
|
`fl:n` | float:none;
|
|
`fl:l` | float:left;
|
|
`fl:r` | float:right;
|
|
`cl` | clear:both;
|
|
`cl:n` | clear:none;
|
|
`cl:l` | clear:left;
|
|
`cl:r` | clear:right;
|
|
`cl:b` | clear:both;
|
|
`d` | display:block;
|
|
`d:n` | display:none;
|
|
`d:b` | display:block;
|
|
`d:f` | display:flex;
|
|
`d:if` | display:inline-flex;
|
|
`d:i` | display:inline;
|
|
`d:ib` | display:inline-block;
|
|
`d:li` | display:list-item;
|
|
`d:ri` | display:run-in;
|
|
`d:cp` | display:compact;
|
|
`d:tb` | display:table;
|
|
`d:itb` | display:inline-table;
|
|
`d:tbcp` | display:table-caption;
|
|
`d:tbcl` | display:table-column;
|
|
`d:tbclg` | display:table-column-group;
|
|
`d:tbhg` | display:table-header-group;
|
|
`d:tbfg` | display:table-footer-group;
|
|
`d:tbr` | display:table-row;
|
|
`d:tbrg` | display:table-row-group;
|
|
`d:tbc` | display:table-cell;
|
|
`d:rb` | display:ruby;
|
|
`d:rbb` | display:ruby-base;
|
|
`d:rbbg` | display:ruby-base-group;
|
|
`d:rbt` | display:ruby-text;
|
|
`d:rbtg` | display:ruby-text-group;
|
|
`v` | visibility:hidden;
|
|
`v:v` | visibility:visible;
|
|
`v:h` | visibility:hidden;
|
|
`v:c` | visibility:collapse;
|
|
`ov` | overflow:hidden;
|
|
`ov:v` | overflow:visible;
|
|
`ov:h` | overflow:hidden;
|
|
`ov:s` | overflow:scroll;
|
|
`ov:a` | overflow:auto;
|
|
`ovx` | overflow-x:hidden;
|
|
`ovx:v` | overflow-x:visible;
|
|
`ovx:h` | overflow-x:hidden;
|
|
`ovx:s` | overflow-x:scroll;
|
|
`ovx:a` | overflow-x:auto;
|
|
`ovy` | overflow-y:hidden;
|
|
`ovy:v` | overflow-y:visible;
|
|
`ovy:h` | overflow-y:hidden;
|
|
`ovy:s` | overflow-y:scroll;
|
|
`ovy:a` | overflow-y:auto;
|
|
`ovs` | overflow-style:scrollbar;
|
|
`ovs:a` | overflow-style:auto;
|
|
`ovs:s` | overflow-style:scrollbar;
|
|
`ovs:p` | overflow-style:panner;
|
|
`ovs:m` | overflow-style:move;
|
|
`ovs:mq` | overflow-style:marquee;
|
|
`zoo, zm` | zoom:1;
|
|
`cp` | clip:;
|
|
`cp:a` | clip:auto;
|
|
`cp:r` | clip:rect(top right bottom left);
|
|
`rsz` | resize:;
|
|
`rsz:n` | resize:none;
|
|
`rsz:b` | resize:both;
|
|
`rsz:h` | resize:horizontal;
|
|
`rsz:v` | resize:vertical;
|
|
`cur` | cursor:${pointer};
|
|
`cur:a` | cursor:auto;
|
|
`cur:d` | cursor:default;
|
|
`cur:c` | cursor:crosshair;
|
|
`cur:ha` | cursor:hand;
|
|
`cur:he` | cursor:help;
|
|
`cur:m` | cursor:move;
|
|
`cur:p` | cursor:pointer;
|
|
`cur:t` | cursor:text;
|
|
|
|
### 边距和填充
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`m` | margin:;
|
|
`m:a` | margin:auto;
|
|
`mt` | margin-top:;
|
|
`mt:a` | margin-top:auto;
|
|
`mr` | margin-right:;
|
|
`mr:a` | margin-right:auto;
|
|
`mb` | margin-bottom:;
|
|
`mb:a` | margin-bottom:auto;
|
|
`ml` | margin-left:;
|
|
`ml:a` | margin-left:auto;
|
|
`p` | padding:;
|
|
`pt` | padding-top:;
|
|
`pr` | padding-right:;
|
|
`pb` | padding-bottom:;
|
|
`pl` | padding-left:;
|
|
|
|
### 盒子尺寸
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`bxz` | box-sizing:border-box;
|
|
`bxz:cb` | box-sizing:content-box;
|
|
`bxz:bb` | box-sizing:border-box;
|
|
`bxsh` | box-shadow:inset hoff voff blur color;
|
|
`bxsh:r` | box-shadow:inset hoff voff blur spread rgb(0, 0, 0);
|
|
`bxsh:ra` | box-shadow:inset h v blur spread rgba(0, 0, 0, .5);
|
|
`bxsh:n` | box-shadow:none;
|
|
`w` | width:;
|
|
`w:a` | width:auto;
|
|
`h` | height:;
|
|
`h:a` | height:auto;
|
|
`maw` | max-width:;
|
|
`maw:n` | max-width:none;
|
|
`mah` | max-height:;
|
|
`mah:n` | max-height:none;
|
|
`miw` | min-width:;
|
|
`mih` | min-height:;
|
|
|
|
### 字体
|
|
<!--rehype:wrap-class=row-span-2-->
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`f` | font:;
|
|
`f+` | font:1em Arial,sans-serif;
|
|
`fw` | font-weight:;
|
|
`fw:n` | font-weight:normal;
|
|
`fw:b` | font-weight:bold;
|
|
`fw:br` | font-weight:bolder;
|
|
`fw:lr` | font-weight:lighter;
|
|
`fs` | font-style:${italic};
|
|
`fs:n` | font-style:normal;
|
|
`fs:i` | font-style:italic;
|
|
`fs:o` | font-style:oblique;
|
|
`fv` | font-variant:;
|
|
`fv:n` | font-variant:normal;
|
|
`fv:sc` | font-variant:small-caps;
|
|
`fz` | font-size:;
|
|
`fza` | font-size-adjust:;
|
|
`fza:n` | font-size-adjust:none;
|
|
`ff` | font-family:;
|
|
`ff:s` | font-family:serif;
|
|
`ff:ss` | font-family:sans-serif;
|
|
`ff:c` | font-family:cursive;
|
|
`ff:f` | font-family:fantasy;
|
|
`ff:m` | font-family:monospace;
|
|
`ff:a` | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
|
`ff:t` | font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
|
|
`ff:v` | font-family: Verdana, Geneva, sans-serif;
|
|
`fef` | font-effect:;
|
|
`fef:n` | font-effect:none;
|
|
`fef:eg` | font-effect:engrave;
|
|
`fef:eb` | font-effect:emboss;
|
|
`fef:o` | font-effect:outline;
|
|
`fem` | font-emphasize:;
|
|
`femp` | font-emphasize-position:;
|
|
`femp:b` | font-emphasize-position:before;
|
|
`femp:a` | font-emphasize-position:after;
|
|
`fems` | font-emphasize-style:;
|
|
`fems:n` | font-emphasize-style:none;
|
|
`fems:ac` | font-emphasize-style:accent;
|
|
`fems:dt` | font-emphasize-style:dot;
|
|
`fems:c` | font-emphasize-style:circle;
|
|
`fems:ds` | font-emphasize-style:disc;
|
|
`fsm` | font-smooth:;
|
|
`fsm:a` | font-smooth:auto;
|
|
`fsm:n` | font-smooth:never;
|
|
`fsm:aw` | font-smooth:always;
|
|
`fst` | font-stretch:;
|
|
`fst:n` | font-stretch:normal;
|
|
`fst:uc` | font-stretch:ultra-condensed;
|
|
`fst:ec` | font-stretch:extra-condensed;
|
|
`fst:c` | font-stretch:condensed;
|
|
`fst:sc` | font-stretch:semi-condensed;
|
|
`fst:se` | font-stretch:semi-expanded;
|
|
`fst:e` | font-stretch:expanded;
|
|
`fst:ee` | font-stretch:extra-expanded;
|
|
`fst:ue` | font-stretch:ultra-expanded;
|
|
|
|
### 背景
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`bg` | background:#000;
|
|
`bg+` | background:#fff url() 0 0 no-repeat;
|
|
`bg:n` | background:none;
|
|
`bgc` | background-color:#fff;
|
|
`bgc:t` | background-color:transparent;
|
|
`bgi` | background-image:url();
|
|
`bgi:n` | background-image:none;
|
|
`bgr` | background-repeat:;
|
|
`bgr:n` | background-repeat:no-repeat;
|
|
`bgr:x` | background-repeat:repeat-x;
|
|
`bgr:y` | background-repeat:repeat-y;
|
|
`bgr:sp` | background-repeat:space;
|
|
`bgr:rd` | background-repeat:round;
|
|
`bga` | background-attachment:;
|
|
`bga:f` | background-attachment:fixed;
|
|
`bga:s` | background-attachment:scroll;
|
|
`bgp` | background-position:0 0;
|
|
`bgpx` | background-position-x:;
|
|
`bgpy` | background-position-y:;
|
|
`bgbk` | background-break:;
|
|
`bgbk:bb` | background-break:bounding-box;
|
|
`bgbk:eb` | background-break:each-box;
|
|
`bgbk:c` | background-break:continuous;
|
|
`bgcp` | background-clip:padding-box;
|
|
`bgcp:bb` | background-clip:border-box;
|
|
`bgcp:pb` | background-clip:padding-box;
|
|
`bgcp:cb` | background-clip:content-box;
|
|
`bgcp:nc` | background-clip:no-clip;
|
|
`bgo` | background-origin:;
|
|
`bgo:pb` | background-origin:padding-box;
|
|
`bgo:bb` | background-origin:border-box;
|
|
`bgo:cb` | background-origin:content-box;
|
|
`bgsz` | background-size:;
|
|
`bgsz:a` | background-size:auto;
|
|
`bgsz:ct` | background-size:contain;
|
|
`bgsz:cv` | background-size:cover;
|
|
|
|
### Lists
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`lis` | list-style:;
|
|
`lis:n` | list-style:none;
|
|
`lisp` | list-style-position:;
|
|
`lisp:i` | list-style-position:inside;
|
|
`lisp:o` | list-style-position:outside;
|
|
`list` | list-style-type:;
|
|
`list:n` | list-style-type:none;
|
|
`list:d` | list-style-type:disc;
|
|
`list:c` | list-style-type:circle;
|
|
`list:s` | list-style-type:square;
|
|
`list:dc` | list-style-type:decimal;
|
|
`list:dclz` | list-style-type:decimal-leading-zero;
|
|
`list:lr` | list-style-type:lower-roman;
|
|
`list:ur` | list-style-type:upper-roman;
|
|
`lisi` | list-style-image:;
|
|
`lisi:n` | list-style-image:none;
|
|
|
|
### Tables
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`tbl` | table-layout:;
|
|
`tbl:a` | table-layout:auto;
|
|
`tbl:f` | table-layout:fixed;
|
|
`cps` | caption-side:;
|
|
`cps:t` | caption-side:top;
|
|
`cps:b` | caption-side:bottom;
|
|
`ec` | empty-cells:;
|
|
`ec:s` | empty-cells:show;
|
|
`ec:h` | empty-cells:hide;
|
|
|
|
### 颜色
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`c` | color:#000;
|
|
`c:r` | color:rgb(0, 0, 0);
|
|
`c:ra` | color:rgba(0, 0, 0, .5);
|
|
`op` | opacity:;
|
|
|
|
### 文本
|
|
<!--rehype:wrap-class=row-span-4-->
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`va` | vertical-align:top;
|
|
`va:sup` | vertical-align:super;
|
|
`va:t` | vertical-align:top;
|
|
`va:tt` | vertical-align:text-top;
|
|
`va:m` | vertical-align:middle;
|
|
`va:bl` | vertical-align:baseline;
|
|
`va:b` | vertical-align:bottom;
|
|
`va:tb` | vertical-align:text-bottom;
|
|
`va:sub` | vertical-align:sub;
|
|
`ta` | text-align:left;
|
|
`ta:l` | text-align:left;
|
|
`ta:c` | text-align:center;
|
|
`ta:r` | text-align:right;
|
|
`ta:j` | text-align:justify;
|
|
`ta-lst` | text-align-last:;
|
|
`tal:a` | text-align-last:auto;
|
|
`tal:l` | text-align-last:left;
|
|
`tal:c` | text-align-last:center;
|
|
`tal:r` | text-align-last:right;
|
|
`td` | text-decoration:none;
|
|
`td:n` | text-decoration:none;
|
|
`td:u` | text-decoration:underline;
|
|
`td:o` | text-decoration:overline;
|
|
`td:l` | text-decoration:line-through;
|
|
`te` | text-emphasis:;
|
|
`te:n` | text-emphasis:none;
|
|
`te:ac` | text-emphasis:accent;
|
|
`te:dt` | text-emphasis:dot;
|
|
`te:c` | text-emphasis:circle;
|
|
`te:ds` | text-emphasis:disc;
|
|
`te:b` | text-emphasis:before;
|
|
`te:a` | text-emphasis:after;
|
|
`th` | text-height:;
|
|
`th:a` | text-height:auto;
|
|
`th:f` | text-height:font-size;
|
|
`th:t` | text-height:text-size;
|
|
`th:m` | text-height:max-size;
|
|
`ti` | text-indent:;
|
|
`ti:-` | text-indent:-9999px;
|
|
`tj` | text-justify:;
|
|
`tj:a` | text-justify:auto;
|
|
`tj:iw` | text-justify:inter-word;
|
|
`tj:ii` | text-justify:inter-ideograph;
|
|
`tj:ic` | text-justify:inter-cluster;
|
|
`tj:d` | text-justify:distribute;
|
|
`tj:k` | text-justify:kashida;
|
|
`tj:t` | text-justify:tibetan;
|
|
`to` | text-outline:;
|
|
`to+` | text-outline:0 0 #000;
|
|
`to:n` | text-outline:none;
|
|
`tr` | text-replace:;
|
|
`tr:n` | text-replace:none;
|
|
`tt` | text-transform:uppercase;
|
|
`tt:n` | text-transform:none;
|
|
`tt:c` | text-transform:capitalize;
|
|
`tt:u` | text-transform:uppercase;
|
|
`tt:l` | text-transform:lowercase;
|
|
`tw` | text-wrap:;
|
|
`tw:n` | text-wrap:normal;
|
|
`tw:no` | text-wrap:none;
|
|
`tw:u` | text-wrap:unrestricted;
|
|
`tw:s` | text-wrap:suppress;
|
|
`tsh` | text-shadow:hoff voff blur #000;
|
|
`tsh:r` | text-shadow:h v blur rgb(0, 0, 0);
|
|
`tsh:ra` | text-shadow:h v blur rgba(0, 0, 0, .5);
|
|
`tsh+` | text-shadow:0 0 0 #000;
|
|
`tsh:n` | text-shadow:none;
|
|
`lh` | line-height:;
|
|
`lts` | letter-spacing:;
|
|
`lts-n` | letter-spacing:normal;
|
|
`whs` | white-space:;
|
|
`whs:n` | white-space:normal;
|
|
`whs:p` | white-space:pre;
|
|
`whs:nw` | white-space:nowrap;
|
|
`whs:pw` | white-space:pre-wrap;
|
|
`whs:pl` | white-space:pre-line;
|
|
`whsc` | white-space-collapse:;
|
|
`whsc:n` | white-space-collapse:normal;
|
|
`whsc:k` | white-space-collapse:keep-all;
|
|
`whsc:l` | white-space-collapse:loose;
|
|
`whsc:bs` | white-space-collapse:break-strict;
|
|
`whsc:ba` | white-space-collapse:break-all;
|
|
`wob` | word-break:;
|
|
`wob:n` | word-break:normal;
|
|
`wob:k` | word-break:keep-all;
|
|
`wob:ba` | word-break:break-all;
|
|
`wos` | word-spacing:;
|
|
`wow` | word-wrap:;
|
|
`wow:nm` | word-wrap:normal;
|
|
`wow:n` | word-wrap:none;
|
|
`wow:u` | word-wrap:unrestricted;
|
|
`wow:s` | word-wrap:suppress;
|
|
`wow:b` | word-wrap:break-word;
|
|
|
|
### Border
|
|
<!--rehype:wrap-class=row-span-4-->
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`bd` | border:;
|
|
`bd+` | border:1px solid #000;
|
|
`bd:n` | border:none;
|
|
`bdbk` | border-break:close;
|
|
`bdbk:c` | border-break:close;
|
|
`bdcl` | border-collapse:;
|
|
`bdcl:c` | border-collapse:collapse;
|
|
`bdcl:s` | border-collapse:separate;
|
|
`bdc` | border-color:#000;
|
|
`bdc:t` | border-color:transparent;
|
|
`bdi` | border-image:url();
|
|
`bdi:n` | border-image:none;
|
|
`bdti` | border-top-image:url();
|
|
`bdti:n` | border-top-image:none;
|
|
`bdri` | border-right-image:url();
|
|
`bdri:n` | border-right-image:none;
|
|
`bdbi` | border-bottom-image:url();
|
|
`bdbi:n` | border-bottom-image:none;
|
|
`bdli` | border-left-image:url();
|
|
`bdli:n` | border-left-image:none;
|
|
`bdci` | border-corner-image:url();
|
|
`bdci:n` | border-corner-image:none;
|
|
`bdci:c` | border-corner-image:continue;
|
|
`bdtli` | border-top-left-image:url();
|
|
`bdtli:n` | border-top-left-image:none;
|
|
`bdtli:c` | border-top-left-image:continue;
|
|
`bdtri` | border-top-right-image:url();
|
|
`bdtri:n` | border-top-right-image:none;
|
|
`bdtri:c` | border-top-right-image:continue;
|
|
`bdbri` | border-bottom-right-image:url();
|
|
`bdbri:n` | border-bottom-right-image:none;
|
|
`bdbri:c` | border-bottom-right-image:continue;
|
|
`bdbli` | border-bottom-left-image:url();
|
|
`bdbli:n` | border-bottom-left-image:none;
|
|
`bdbli:c` | border-bottom-left-image:continue;
|
|
`bdf` | border-fit:repeat;
|
|
`bdf:c` | border-fit:clip;
|
|
`bdf:r` | border-fit:repeat;
|
|
`bdf:sc` | border-fit:scale;
|
|
`bdf:st` | border-fit:stretch;
|
|
`bdf:ow` | border-fit:overwrite;
|
|
`bdf:of` | border-fit:overflow;
|
|
`bdf:sp` | border-fit:space;
|
|
`bdlen` | border-length:;
|
|
`bdlen:a` | border-length:auto;
|
|
`bdsp` | border-spacing:;
|
|
`bds` | border-style:;
|
|
`bds:n` | border-style:none;
|
|
`bds:h` | border-style:hidden;
|
|
`bds:dt` | border-style:dotted;
|
|
`bds:ds` | border-style:dashed;
|
|
`bds:s` | border-style:solid;
|
|
`bds:db` | border-style:double;
|
|
`bds:dtds` | border-style:dot-dash;
|
|
`bds:dtdtds` | border-style:dot-dot-dash;
|
|
`bds:w` | border-style:wave;
|
|
`bds:g` | border-style:groove;
|
|
`bds:r` | border-style:ridge;
|
|
`bds:i` | border-style:inset;
|
|
`bds:o` | border-style:outset;
|
|
`bdw` | border-width:;
|
|
`bdt, bt` | border-top:;
|
|
`bdt+` | border-top:1px solid #000;
|
|
`bdt:n` | border-top:none;
|
|
`bdtw` | border-top-width:;
|
|
`bdts` | border-top-style:;
|
|
`bdts:n` | border-top-style:none;
|
|
`bdtc` | border-top-color:#000;
|
|
`bdtc:t` | border-top-color:transparent;
|
|
`bdr, br` | border-right:;
|
|
`bdr+` | border-right:1px solid #000;
|
|
`bdr:n` | border-right:none;
|
|
`bdrw` | border-right-width:;
|
|
`bdrst` | border-right-style:;
|
|
`bdrst:n` | border-right-style:none;
|
|
`bdrc` | border-right-color:#000;
|
|
`bdrc:t` | border-right-color:transparent;
|
|
`bdb, bb` | border-bottom:;
|
|
`bdb+` | border-bottom:1px solid #000;
|
|
`bdb:n` | border-bottom:none;
|
|
`bdbw` | border-bottom-width:;
|
|
`bdbs` | border-bottom-style:;
|
|
`bdbs:n` | border-bottom-style:none;
|
|
`bdbc` | border-bottom-color:#000;
|
|
`bdbc:t` | border-bottom-color:transparent;
|
|
`bdl, bl` | border-left:;
|
|
`bdl+` | border-left:1px solid #000;
|
|
`bdl:n` | border-left:none;
|
|
`bdlw` | border-left-width:;
|
|
`bdls` | border-left-style:;
|
|
`bdls:n` | border-left-style:none;
|
|
`bdlc` | border-left-color:#000;
|
|
`bdlc:t` | border-left-color:transparent;
|
|
`bdrs` | border-radius:;
|
|
`bdtrrs` | border-top-right-radius:;
|
|
`bdtlrs` | border-top-left-radius:;
|
|
`bdbrrs` | border-bottom-right-radius:;
|
|
`bdblrs` | border-bottom-left-radius:;
|
|
|
|
### 生成的内容
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`cnt` | content:'';
|
|
`cnt:n, ct:n` | content:normal;
|
|
`cnt:oq, ct:oq` | content:open-quote;
|
|
`cnt:noq, ct:noq` | content:no-open-quote;
|
|
`cnt:cq, ct:cq` | content:close-quote;
|
|
`cnt:ncq, ct:ncq` | content:no-close-quote;
|
|
`cnt:a, ct:a` | content:attr();
|
|
`cnt:c, ct:c` | content:counter();
|
|
`cnt:cs, ct:cs` | content:counters();
|
|
`ct` | content:;
|
|
`q` | quotes:;
|
|
`q:n` | quotes:none;
|
|
`q:ru` | quotes:'\00AB' '\00BB' '\201E' '\201C';
|
|
`q:en` | quotes:'\201C' '\201D' '\2018' '\2019';
|
|
`coi` | counter-increment:;
|
|
`cor` | counter-reset:;
|
|
|
|
### Outline
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`ol` | outline:;
|
|
`ol:n` | outline:none;
|
|
`olo` | outline-offset:;
|
|
`olw` | outline-width:;
|
|
`olw:tn` | outline-width:thin;
|
|
`olw:m` | outline-width:medium;
|
|
`olw:tc` | outline-width:thick;
|
|
`ols` | outline-style:;
|
|
`ols:n` | outline-style:none;
|
|
`ols:dt` | outline-style:dotted;
|
|
`ols:ds` | outline-style:dashed;
|
|
`ols:s` | outline-style:solid;
|
|
`ols:db` | outline-style:double;
|
|
`ols:g` | outline-style:groove;
|
|
`ols:r` | outline-style:ridge;
|
|
`ols:i` | outline-style:inset;
|
|
`ols:o` | outline-style:outset;
|
|
`olc` | outline-color:#000;
|
|
`olc:i` | outline-color:invert;
|
|
|
|
### Print
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`pgbb` | page-break-before:;
|
|
`pgbb:au` | page-break-before:auto;
|
|
`pgbb:al` | page-break-before:always;
|
|
`pgbb:l` | page-break-before:left;
|
|
`pgbb:r` | page-break-before:right;
|
|
`pgbi` | page-break-inside:;
|
|
`pgbi:au` | page-break-inside:auto;
|
|
`pgbi:av` | page-break-inside:avoid;
|
|
`pgba` | page-break-after:;
|
|
`pgba:au` | page-break-after:auto;
|
|
`pgba:al` | page-break-after:always;
|
|
`pgba:l` | page-break-after:left;
|
|
`pgba:r` | page-break-after:right;
|
|
`orp` | orphans:;
|
|
`wid` | widows:;
|
|
|
|
### Others
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`!` | !important
|
|
|
|
#### @f
|
|
|
|
```css
|
|
@font-face {
|
|
font-family:;
|
|
src:url(|);
|
|
}
|
|
```
|
|
|
|
#### @f+
|
|
|
|
```css
|
|
@font-face {
|
|
font-family: 'FontName';
|
|
src: url('FileName.eot');
|
|
src: url('FileName.eot?#iefix') format('embedded-opentype'),
|
|
url('FileName.woff') format('woff'),
|
|
url('FileName.ttf') format('truetype'),
|
|
url('FileName.svg#FontName') format('svg');
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
```
|
|
|
|
#### @i, @import
|
|
|
|
```css
|
|
@import url();
|
|
```
|
|
|
|
#### @kf
|
|
|
|
```css
|
|
@-webkit-keyframes identifier {
|
|
from { }
|
|
to { }
|
|
}
|
|
@-o-keyframes identifier {
|
|
from { }
|
|
to { }
|
|
}
|
|
@-moz-keyframes identifier {
|
|
from { }
|
|
to { }
|
|
}
|
|
@keyframes identifier {
|
|
from { }
|
|
to { }
|
|
}
|
|
```
|
|
|
|
#### @m, @media
|
|
|
|
```css
|
|
@media screen {
|
|
|
|
}
|
|
```
|
|
|
|
### transform
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`trf` | transform:;
|
|
`trf:r` | transform: rotate(angle);
|
|
`trf:rx` | transform: rotateX(angle);
|
|
`trf:ry` | transform: rotateY(angle);
|
|
`trf:rz` | transform: rotateZ(angle);
|
|
`trf:sc` | transform: scale(x, y);
|
|
`trf:sc3` | transform: scale3d(x, y, z);
|
|
`trf:scx` | transform: scaleX(x);
|
|
`trf:scy` | transform: scaleY(y);
|
|
`trf:scz` | transform: scaleZ(z);
|
|
`trf:skx` | transform: skewX(angle);
|
|
`trf:sky` | transform: skewY(angle);
|
|
`trf:t` | transform: translate(x, y);
|
|
`trf:t3` | transform: translate3d(tx, ty, tz);
|
|
`trf:tx` | transform: translateX(x);
|
|
`trf:ty` | transform: translateY(y);
|
|
`trf:tz` | transform: translateZ(z);
|
|
`trfo` | transform-origin:;
|
|
`trfs` | transform-style:preserve-3d;
|
|
|
|
### Other
|
|
<!--rehype:wrap-class=col-span-2 row-span-3-->
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`ac` | align-content:;
|
|
`ac:c` | align-content:center;
|
|
`ac:fe` | align-content:flex-end;
|
|
`ac:fs` | align-content:flex-start;
|
|
`ac:s` | align-content:stretch;
|
|
`ac:sa` | align-content:space-around;
|
|
`ac:sb` | align-content:space-between;
|
|
`ai` | align-items:;
|
|
`ai:b` | align-items:baseline;
|
|
`ai:c` | align-items:center;
|
|
`ai:fe` | align-items:flex-end;
|
|
`ai:fs` | align-items:flex-start;
|
|
`ai:s` | align-items:stretch;
|
|
`ap` | appearance:${none};
|
|
`as` | align-self:;
|
|
`as:a` | align-self:auto;
|
|
`as:b` | align-self:baseline;
|
|
`as:c` | align-self:center;
|
|
`as:fe` | align-self:flex-end;
|
|
`as:fs` | align-self:flex-start;
|
|
`as:s` | align-self:stretch;
|
|
`bfv` | backface-visibility:;
|
|
`bfv:h` | backface-visibility:hidden;
|
|
`bfv:v` | backface-visibility:visible;
|
|
`bg:ie` | filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
|
|
`cm` | /\* ${child} */
|
|
`colm` | columns:;
|
|
`colmc` | column-count:;
|
|
`colmf` | column-fill:;
|
|
`colmg` | column-gap:;
|
|
`colmr` | column-rule:;
|
|
`colmrc` | column-rule-color:;
|
|
`colmrs` | column-rule-style:;
|
|
`colmrw` | column-rule-width:;
|
|
`colms` | column-span:;
|
|
`colmw` | column-width:;
|
|
`d:ib+` | display: inline-block;<br /> *display: inline;<br />*zoom: 1;
|
|
`jc` | justify-content:;
|
|
`jc:c` | justify-content:center;
|
|
`jc:fe` | justify-content:flex-end;
|
|
`jc:fs` | justify-content:flex-start;
|
|
`jc:sa` | justify-content:space-around;
|
|
`jc:sb` | justify-content:space-between;
|
|
`mar` | max-resolution:res;
|
|
`mir` | min-resolution:res;
|
|
`op+` | opacity: ; filter: alpha(opacity=);
|
|
`op:ie` | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
`op:ms` | -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
|
|
`ord` | order:;
|
|
`ori` | orientation:;
|
|
`ori:l` | orientation:landscape;
|
|
`ori:p` | orientation:portrait;
|
|
`tov` | text-overflow:${ellipsis};
|
|
`tov:c` | text-overflow:clip;
|
|
`tov:e` | text-overflow:ellipsis;
|
|
`trs` | transition:prop time;
|
|
`trsde` | transition-delay:time;
|
|
`trsdu` | transition-duration:time;
|
|
`trsp` | transition-property:prop;
|
|
`trstf` | transition-timing-function:tfunc;
|
|
`us` | user-select:${none};
|
|
`wfsm` | -webkit-font-smoothing:${antialiased};
|
|
`wfsm:a` | -webkit-font-smoothing:antialiased;
|
|
`wfsm:n` | -webkit-font-smoothing:none;
|
|
`wfsm:s, wfsm:sa` | -webkit-font-smoothing:subpixel-antialiased;
|
|
`wm` | writing-mode:lr-tb;
|
|
`wm:btl` | writing-mode:bt-lr;
|
|
`wm:btr` | writing-mode:bt-rl;
|
|
`wm:lrb` | writing-mode:lr-bt;
|
|
`wm:lrt` | writing-mode:lr-tb;
|
|
`wm:rlb` | writing-mode:rl-bt;
|
|
`wm:rlt` | writing-mode:rl-tb;
|
|
`wm:tbl` | writing-mode:tb-lr;
|
|
`wm:tbr` | writing-mode:tb-rl;
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
### animation
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`anim` | animation:;
|
|
`anim-` | animation:name duration timing-function delay iteration-count direction fill-mode;
|
|
`animdel` | animation-delay:time;
|
|
`animdir` | animation-direction:normal;
|
|
`animdir:a` | animation-direction:alternate;
|
|
`animdir:ar` | animation-direction:alternate-reverse;
|
|
`animdir:n` | animation-direction:normal;
|
|
`animdir:r` | animation-direction:reverse;
|
|
`animdur` | animation-duration:0s;
|
|
`animfm` | animation-fill-mode:both;
|
|
`animfm:b` | animation-fill-mode:backwards;
|
|
`animfm:bt, animfm:bh` | animation-fill-mode:both;
|
|
`animfm:f` | animation-fill-mode:forwards;
|
|
`animic` | animation-iteration-count:1;
|
|
`animic:i` | animation-iteration-count:infinite;
|
|
`animn` | animation-name:none;
|
|
`animps` | animation-play-state:running;
|
|
`animps:p` | animation-play-state:paused;
|
|
`animps:r` | animation-play-state:running;
|
|
`animtf` | animation-timing-function:linear;
|
|
`animtf:cb` | animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
|
|
`animtf:e` | animation-timing-function:ease;
|
|
`animtf:ei` | animation-timing-function:ease-in;
|
|
`animtf:eio` | animation-timing-function:ease-in-out;
|
|
`animtf:eo` | animation-timing-function:ease-out;
|
|
`animtf:l` | animation-timing-function:linear;
|
|
|
|
### flex
|
|
|
|
:- | :-
|
|
:- | :-
|
|
`fx` | flex:;
|
|
`fxb` | flex-basis:;
|
|
`fxd` | flex-direction:;
|
|
`fxd:c` | flex-direction:column;
|
|
`fxd:cr` | flex-direction:column-reverse;
|
|
`fxd:r` | flex-direction:row;
|
|
`fxd:rr` | flex-direction:row-reverse;
|
|
`fxf` | flex-flow:;
|
|
`fxg` | flex-grow:;
|
|
`fxsh` | flex-shrink:;
|
|
`fxw` | flex-wrap: ;
|
|
`fxw:n` | flex-wrap:nowrap;
|
|
`fxw:w` | flex-wrap:wrap;
|
|
`fxw:wr` | flex-wrap:wrap-reverse;
|
|
|
|
XSL
|
|
----
|
|
|
|
### XSL
|
|
|
|
tmatch, tm
|
|
|
|
```xml
|
|
<xsl:template match="" mode=""></xsl:template>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
tname, tn
|
|
|
|
```xml
|
|
<xsl:template name=""></xsl:template>
|
|
```
|
|
|
|
call
|
|
|
|
```xml
|
|
<xsl:call-template name="" />
|
|
```
|
|
|
|
ap
|
|
|
|
```xml
|
|
<xsl:apply-templates select="" mode="" />
|
|
```
|
|
|
|
api
|
|
|
|
```xml
|
|
<xsl:apply-imports />
|
|
```
|
|
|
|
imp
|
|
|
|
```xml
|
|
<xsl:import href="" />
|
|
```
|
|
|
|
inc
|
|
|
|
```xml
|
|
<xsl:include href="" />
|
|
```
|
|
|
|
ch
|
|
|
|
```xml
|
|
<xsl:choose></xsl:choose>
|
|
```
|
|
|
|
xsl:when, wh
|
|
|
|
```xml
|
|
<xsl:when test=""></xsl:when>
|
|
```
|
|
|
|
ot
|
|
|
|
```xml
|
|
<xsl:otherwise></xsl:otherwise>
|
|
```
|
|
|
|
if
|
|
|
|
```xml
|
|
<xsl:if test=""></xsl:if>
|
|
```
|
|
|
|
par
|
|
|
|
```xml
|
|
<xsl:param name=""></xsl:param>
|
|
```
|
|
|
|
pare
|
|
|
|
```xml
|
|
<xsl:param name="" select="" />
|
|
```
|
|
|
|
var
|
|
|
|
```xml
|
|
<xsl:variable name=""></xsl:variable>
|
|
```
|
|
|
|
### XSL
|
|
|
|
vare
|
|
|
|
```xml
|
|
<xsl:variable name="" select="" />
|
|
```
|
|
|
|
wp
|
|
|
|
```xml
|
|
<xsl:with-param name="" select="" />
|
|
```
|
|
|
|
key
|
|
|
|
```xml
|
|
<xsl:key name="" match="" use="" />
|
|
```
|
|
|
|
elem
|
|
|
|
```xml
|
|
<xsl:element name=""></xsl:element>
|
|
```
|
|
|
|
attr
|
|
|
|
```xml
|
|
<xsl:attribute name=""></xsl:attribute>
|
|
```
|
|
|
|
attrs
|
|
|
|
```xml
|
|
<xsl:attribute-set name=""></xsl:attribute-set>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
cp
|
|
|
|
```xml
|
|
<xsl:copy select="" />
|
|
```
|
|
|
|
co
|
|
|
|
```xml
|
|
<xsl:copy-of select="" />
|
|
```
|
|
|
|
val
|
|
|
|
```xml
|
|
<xsl:value-of select="" />
|
|
```
|
|
|
|
each, for
|
|
|
|
```xml
|
|
<xsl:for-each select=""></xsl:for-each>
|
|
```
|
|
|
|
tex
|
|
|
|
```xml
|
|
<xsl:text></xsl:text>
|
|
```
|
|
|
|
com
|
|
|
|
```xml
|
|
<xsl:comment></xsl:comment>
|
|
```
|
|
|
|
msg
|
|
|
|
```xml
|
|
<xsl:message terminate="no"></xsl:message>
|
|
```
|
|
|
|
fall
|
|
|
|
```xml
|
|
<xsl:fallback></xsl:fallback>
|
|
```
|
|
|
|
### XSL
|
|
|
|
num
|
|
|
|
```xml
|
|
<xsl:number value="" />
|
|
```
|
|
|
|
nam
|
|
|
|
```xml
|
|
<namespace-alias stylesheet-prefix="" result-prefix="" />
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
pres
|
|
|
|
```xml
|
|
<xsl:preserve-space elements="" />
|
|
```
|
|
|
|
strip
|
|
|
|
```xml
|
|
<xsl:strip-space elements="" />
|
|
```
|
|
|
|
proc
|
|
|
|
```xml
|
|
<xsl:processing-instruction name=""></xsl:processing-instruction>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
sort
|
|
|
|
```xml
|
|
<xsl:sort select="" order="" />
|
|
```
|
|
|
|
choose+ A别名 xsl:choose>xsl:when+xsl:otherwise
|
|
|
|
```xml
|
|
<xsl:choose>
|
|
<xsl:when test=""></xsl:when>
|
|
<xsl:otherwise></xsl:otherwise>
|
|
</xsl:choose>
|
|
```
|
|
|
|
xsl 别名 !!!+xsl:stylesheet[version=1.0 xmlns:xsl=<http://www.w3.org/1999/XSL/Transform>]>{ | }
|
|
|
|
```xml
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>
|
|
```
|
|
<!--rehype:className=wrap-text -->
|
|
|
|
!!!
|
|
|
|
```xml
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
```
|
|
|
|
另见
|
|
--------
|
|
|
|
- [Emmet Cheat sheet](https://docs.emmet.io/cheat-sheet/) _(docs.emmet.io)_
|