每天都在进步

73ic平台基于云端开发，每周迭代更新，你用的每天都是新的
  1. 首页
  2. 官方博客
  3. 技术
  4. 正文

前端开发利器 Emmet 介绍与基础语法教程

发布时间：2015-12-20 浏览次数： 分享网址

在前端开发的过程中，编写HTML，CSS代码始终占据了很大的工作比例。特别是手动编写HTML代码，效率特别低下，因为需要敲打各种“尖括号”，闭合标签等。而现在Emmet就是为了提高代码编写的效率而诞生的，它提供了一种非常简练的语法规则，然后立刻生成对应的HTML结构或者CSS代码，同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具：Zen Coding，那个比较老了，而现在的Emmet则是Zen Coding的升级版，由Zen Coding的原作者进行开发等.Emmet严格意义上来说， 。并不是一款软件或者工具，它是一款编辑器插件，必须要基于某个编辑器使用目前它支持如下编辑器：

崇高文本2 TextMate 1.x 日食/集锦 Coda 1.6和2.x. 浓咖啡 Chocolat（可以通过“Install Mixin”对话框安装） Komodo编辑/ IDE（工具→附加组件） 记事本+ + PSPad <textarea>的 CodeMirror2 / 3 括号

在上面列表点击你目前使用的编辑器，就可以获得对应的插件文件，安装之后就可以使用Emmet的相关功能了。由于Sublime text 2是目前最好最强大的前端开发代码编辑器，所以本文就以Sublime text 2为例，讲解Emmet的安装，基础语法。

在Sublime text 2中安装Emmet

Sbulime text 2安装插件肯定要通过包控制这个插件了，如果你还没有安装这个插件，抓紧先去安装一下吧。安装完成之后，我们摁下“shift + ctrl + p”呼出面板，输入“pci”即可锁定“Package Control：Install Package”这个功能，回车之后就可以看到一个列表，我们继续输入“emmet”即可找到这个插件，回车之后等待一会就安装完成了。 

Visual Studio中的Emmet 

在visual studio中的插件管理中搜索Web Essentials这样一个插件，直接安装就行了。

开始使用Emmet

Emmet可以快速的编写HTML和CSS以及实现其他的功能。它根据当前文件的“语言”来判断要使用HTML语法还是CSS语法来解析。例如当前文件的后缀为.html那Sublime text 2就会用HTML的方法来解析高亮这个文件，Emmet也会根据HTML的语法把你输入的指令编译成HTML结构。如果是在一个.c的C语言文件中，你根据Emmet的语法编写出来的指令，是不会被编译的。

此外，在没有后缀的文件中，你可以摁下“shift + ctrl + p”呼出面板，输入“seth”就可以选择当前文档是使用HTML的模式还是其他编程语言的模式来解释。下面就是一条Emmet的指令：

#page> div.logo + ul＃navigation> li * 5> a {Item $}

我们把它复制到Sublime text 2中已经打开的HTML文件中，这时候敲击一下TAB键，你就会发现这行指令变成了下面的HTML结构：

<div id =“page”>     <div class =“logo”> </ div>     <ul id =“navigation”>         <li> <a href="">第1项</a> </ li>         <li> <a href="">第2项</a> </ li>         <li> <a href="">第3项</a> </ li>         <li> <a href="">第4项</a> </ li>         <li> <a href="">第5项</a> </ li>     </ UL> </ DIV>

怎么样？很神奇吧，仅仅写一行代码，就可以生成这么一个复杂的HTML结构，而且还可以声称对应的类，id和内容。这行指令你现在可能还看不懂，下面会详细讲解语法，你现在只需要知道Emmet的工作流程：打开HTML或CSS文件 - >按语法编写指令 - >摁下TAB键 - >生成！

Emmet生成HTML结构基础语法

生成HTML文档初始结构HTML文档的初始结构，就是包括doctype，html，head，body以及meta等内容。你只需要输入一个“！”就可

1.生成html格式

输入html：5

 

2.简写Div

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

大家可以看到，不管你是否添加了格，埃米特都会自动生成需要的div元素。

含糊标签名称

这个技巧属于隐式标签名称特性，你不需要指定div或者li，Emmet会自动帮助你生成，如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

3.带有DOM导航的链式缩写

如果你使用埃米特来扩展简单的类名称生成格的话这个方式可以帮助你省去大量的时间你只需要记住如下语法。：

  • >子节点：在DOM树下一层添加创建一个元素

  • +同级别：在DOM树同一层添加创建一个元素

  • ^向上层：向上一层添加创建创建一个元素。

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

向上一层

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

如果需要的话你可以向上多层，如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

4.使用分组来简化你的代码结构

有的时候你可能会发现使用向上符号比较复杂，这时候可能使用分组更加的合理如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

一个更复杂一些的例子，如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

5.插入文本和属性

如果你需要生成HTML，内容和属性也是你常常需要添加的。很多开发人员只是使用埃米特来生成框架，然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。

从下面代码可以看到，你输入的文字和属性都可以分别通过大括号和中括号来生成。

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

6.添加多个类到一个元素 

这个非常简单，你只需要使用逗号来添加多个类，如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

7.重复添加

这可能是最让人舒服的操作了，帮助你重复添加元素：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

如果你整合分组功能，那么你将能够处理更复杂的HTML生成：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

8.自动列表记数 

如果你需要按顺序生成HTML元素，这个技巧你一定喜欢，使用$符号可以帮助你生成一系列数字，支持类，ID，属性，内容等等如下：

分享7个超实用的Emmet（zen coding）HTML代码使用技巧

注意如果你需要生成2位的数字，使用两个$符号即可。 


补充阅读：http：//docs.emmet.io/cheat-sheet/

 



句法


孩子：>

  • NAV> UL>利

  • <nav> <ul> <li> </ li> </ ul> </ nav>

兄弟姐妹：+

  • DIV + P + BQ

  • <div> </ div> <p> </ p> <blockquote> </ blockquote>

爬上：^

  • DIV + DIV> P>跨度+ EM ^ BQ

  • <div> </ div> <div> <p> <span> </ span> <em> </ em> </ p> <blockquote> </ blockquote> </ div>

  • DIV + DIV> P>跨度+ EM ^^ BQ

  • <div> </ div> <div> <p> <span> </ span> <em> </ em> </ p> </ div> <blockquote> </ blockquote>

分组:(）

  • DIV>（报头> UL>利* 2> A）+页脚>点

  • <div> <header> <ul> <li> <a href=""> </a> </ li> <li> <a href=""> </a> </ li> </ ul> < / header> <footer> <p> </ p> </ footer> </ div>

  • （DIV> DL>（DT + DD）* 3）+页脚>点

  • <div> <dl> <dt> </ dt> <dd> </ dd> <dt> </ dt> <dd> </ dd> <dt> </ dt> <dd> </ dd> </ dl> </ div> <footer> <p> </ p> </ footer>

乘法：*

  • UL>利* 5

  • <ul> <li> </ li> <li> </ li> <li> </ li> <li> </ li> <li> </ li> </ ul>

物品编号：$

  • UL> li.item $ * 5

  • <ul> <li class =“item1”> </ li> <li class =“item2”> </ li> <li class =“item3”> </ li> <li class =“item4”> </ li > <li class =“item5”> </ li> </ ul>

  • h $ [title = item $] {Header $} * 3

  • <h1 title =“item1”>标题1 </ h1> <h2 title =“item2”>标题2 </ h2> <h3 title =“item3”>标题3 </ h3>

  • UL> li.item $$$ * 5

  • <ul> <li class =“item001”> </ li> <li class =“item002”> </ li> <li class =“item003”> </ li> <li class =“item004”> </ li > <li class =“item005”> </ li> </ ul>

  • UL> li.item $ @ - * 5

  • <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li> </ul>

  • ul>li.item$@3*5

  • <ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li> </ul>

ID and CLASS attributes

  • #header

  • <div id="header"></div>

  • .title

  • <div></div>

  • form#search.wide

  • <form id="search"></form>

  • p.class1.class2.class3

  • <p class="class1 class2 class3"></p>

自定义属性

  • p [title =“Hello world”]

  • <p title =“Hello world”> </ p>

  • td [rowspan = 2 colspan = 3 title]

  • <td rowspan =“2”colspan =“3”title =“”> </ td>

  • [a ='value1'b =“value2”]

  • <div a =“value1”b =“value2”> </ div>

文字：{}

  • a {点击我}

  • <a href="">点击我</a>

  • p> {Click} + a {here} + {继续}

  • <p>点击<a href="">此处</a>继续</ p>

隐式标签名称

  • 。类

  • <div class =“class”> </ div>

  • EM>的.class

  • <em> <span class =“class”> </ span> </ em>

  • UL>的.class

  • <ul> <li class =“class”> </ li> </ ul>

  • 表> .row> .COL

  • <table> <tr class =“row”> <td class =“col”> </ td> </ tr> </ table>


 


HTML

所有未知缩写都将转换为标签，例如foo→ <foo></foo>。

  • ！

  • html的别名：5

    <！DOCTYPE html> <html lang =“en”> <head> <meta charset =“UTF-8”/> <title> 文件 </ title> </ head> <body>    </ body> </ html>

  • 一个

  • <a href =““></A>

  • 一条链接

  • <a href =“http：//“></A>

  • 答：邮件

  • <a href =“mailto：“></A>

  • 简称

  • <abbr title =““></简称>

  • 首字母缩略词，acr

  • <acronym title =““></缩写>

  • 基础

  • <base href =““/>

  • BASEFONT

  • <basefont />

  • BR

  • <br />

  • 帧

  • <frame />

  • 小时

  • <hr />

  • BDO

  • <bdo dir =““></ BDO>

  • BDO，R

  • <bdo dir="rtl"></bdo>

  • bdo:l

  • <bdo dir="ltr"></bdo>

  • col

  • <col />

  • link

  • <link rel="stylesheet" href="" />

  • link:css

  • <link rel="stylesheet" href="style.css" />

  • link:print

  • <link rel="stylesheet" href="print.css" media="print" />

  • link:favicon

  • <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

  • link:touch

  • <link rel="apple-touch-icon" href="favicon.png" />

  • link:rss

  • <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

  • link:atom

  • <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

  • link:import, link:im

  • <link rel="import" href="component.html" />

  • meta

  • <meta />

  • meta:utf

  • <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  • meta:win

  • <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

  • meta:vp

  • <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

  • meta:compat

  • <meta http-equiv =“X-UA-Compatible”content =“ IE = 7 ”/>

  • 样式

  • <风格></样式>

  • 脚本

  • <SCRIPT></ SCRIPT>

  • 脚本：SRC

  • <script src =““></ SCRIPT>

  • IMG

  • <img src =““alt =”“/>

  • img：srcset，img：s

  • <img srcset =““src =”“alt =”“/>

  • img：sizes，img：z

  • <img sizes =““srcset =”“src =”“alt =”“/>

  • 图片

  • <图象></图片>

  • 来源，src

  • <source />

  • source：src，src：sc

  • <source src =““type =”“/>

  • source：srcset，src：s

  • <source srcset =““/>

  • 来源：media，src：m

  • <source media =“（min-width：）”srcset =““/>

  • source：type，src：t

  • <source srcset =““type =” image / “/>

  • 来源：尺寸，src：z

  • <source sizes =““srcset =”“/>

  • source：media：type，src：mt

  • <source media =“（min-width：）”srcset =““type =” image / “/>

  • 来源：媒体：尺寸，src：mz

  • <source media =“（min-width：） ”sizes =““srcset =”“/>

  • source：sizes：type，src：zt

  • <source sizes =““srcset =”“type =” image / “/>

  • IFRAME

  • <iframe src =““frameborder =”0“></ IFRAME>

  • 嵌

  • <embed src =““type =”“/>

  • 宾语

  • <object data =““type =”“></对象>

  • PARAM

  • <param name =““value =”“/>

  • 地图

  • <map name =““></地图>

  • 区域

  • <area shape =““coords =”“href =”“alt =”“/>

  • 面积：d

  • <area shape =“default”href =““alt =”“/>

  • 区域：C

  • <area shape =“circle”coords =““href =”“alt =”“/>

  • 面积，R

  • <area shape =“rect”coords =““href =”“alt =”“/>

  • 面积：P

  • <area shape =“poly”coords =““href =”“alt =”“/>

  • 形成

  • <form action =““></ FORM>

  • 形式：获得

  • <form action =““method =”get“></ FORM>

  • 形式：邮寄

  • <form action =““method =”post“></ FORM>

  • 标签

  • <label for =““></标签>

  • 输入

  • <input type =“ text ”/>

  • INP

  • <input type =“ text ”name =““id =”“/>

  • 输入：隐藏，输入：h

  • 输入的别名[type = hidden name]

    <input type =“hidden”name =““/>

  • 输入：文本，输入：t

  • inp的别名

    <input type =“ text ”name =““id =”“/>

  • 输入：搜索

  • inp的别名[type = search]

    <input type =“search”name =““id =”“/>

  • 输入：电子邮件

  • inp的别名[type = email]

    <input type =“email”name =““id =”“/>

  • 输入：网址

  • inp [type = url]的别名

    <input type =“url”name =““id =”“/>

  • 输入：密码，输入：p

  • inp [type =密码]的别名

    <input type =“password”name =““id =”“/>

  • 输入：日期时间

  • inp的别名[type = datetime]

    <input type =“datetime”name =““id =”“/>

  • 输入：日期

  • inp的别名[type = date]

    <input type =“date”name =““id =”“/>

  • 输入：日期时间本地

  • inp的别名[type = datetime-local]

    <input type =“datetime-local”name =““id =”“/>

  • 输入：一个月

  • inp [type = month]的别名

    <input type =“month”name =““id =”“/>

  • 输入：周

  • inp的别名[type = week]

    <input type =“week”name =““id =”“/>

  • 输入：时间

  • inp [type = time]的别名

    <input type =“time”name =““id =”“/>

  • 输入：电话

  • inp的别名[type = tel]

    <input type =“tel”name =““id =”“/>

  • 输入：数

  • inp的别名[type = number]

    <input type =“number”name =““id =”“/>

  • 输入：彩色

  • inp [type = color]的别名

    <input type =“color”name =““id =”“/>

  • 输入：复选框，输入：c

  • inp的别名[type = checkbox]

    <input type =“checkbox”name =““id =”“/>

  • 输入：无线电，输入：r

  • inp [type = radio]的别名

    <input type =“radio”name =““id =”“/>

  • 输入：范围

  • inp的别名[type = range]

    <input type =“range”name =““id =”“/>

  • 输入：文件，输入：f

  • inp [type = file]的别名

    <input type =“file”name =““id =”“/>

  • 输入：提交，输入：s

  • <input type =“submit”value =““/>

  • 输入：图像，输入：i

  • <input type =“image”src =““alt =”“/>

  • 输入：按钮，输入：b

  • <input type =“button”value =““/>

  • ISINDEX

  • <isindex />

  • 输入：复位

  • 输入别名：按钮[type = reset]

    <input type =“reset”value =““/>

  • 选择

  • <select name =““id =”“></选择>

  • 选择：禁用，选择：d

  • 选择[禁用。]的别名

    <select name =““id =”“disabled =”disabled“></选择>

  • 选项，选择

  • <option value =““></选项>

  • textarea的

  • <textarea name =““id =”“cols =” 30 “rows =” 10 “></ textarea>的

  • 华盖

  • <marquee behavior =““方向=”“></选取框>

  • 菜单：上下文，菜单：c

  • 菜单的别名[type = context]>

    <menu type =“context”></菜单>

  • 菜单：工具栏，菜单：t

  • 菜单的别名[type = toolbar]>

    <menu type =“toolbar”></菜单>

  • 视频

  • <video src =““></视频>

  • 音频

  • <audio src =““></音频>

  • HTML：XML

  • <html xmlns =“http://www.w3.org/1999/xhtml”></ HTML>

  • 凯基

  • <keygen />

  • 命令

  • <command />

  • 按钮：提交，按钮：s，btn：s

  • 按钮的别名[type = submit]

    <button type =“submit”></按钮>

  • 按钮：复位，按钮：r，btn：r

  • 按钮的别名[type = reset]

    <button type =“reset”></按钮>

  • 按钮：禁用，按钮：d，btn：d

  • 按钮的别名[已禁用。]

    <button disabled =“disabled”></按钮>

  • fieldset：disabled，fieldset：d，fset：d，fst：d

  • fieldset的别名[disabled。]

    <fieldset disabled =“disabled”></字段集>

  • BQ

  • blockquote的别名

    <BLOCKQUOTE></ BLOCKQUOTE>

  • 图

  • 图的别名

    <图></图>

  • FIGC

  • figcaption的别名

    <figcaption></ figcaption>

  • PIC

  • 图片的别名

    <图象></图片>

  • IFR

  • iframe的别名

    <iframe src =““frameborder =”0“></ IFRAME>

  • EMB

  • 别名的嵌入

    <embed src =““type =”“/>

  • OBJ

  • 对象的别名

    <object data =““type =”“></对象>

  • 帽

  • 标题的别名

    <字幕></字幕>

  • COLG

  • colgroup的别名

    <COLGROUP></ COLGROUP>

  • fst，fset

  • fieldset的别名

    <字段集></字段集>

  • BTN

  • 按钮的别名

    <按钮></按钮>

  • optg

  • optgroup的别名

    <OPTGROUP></ OPTGROUP>

  • 利亚

  • textarea的别名

    <textarea name =““id =”“cols =” 30 “rows =” 10 “></ textarea>的

  • 腿

  • 传说的别名

    <图例></图例>

  • 教派

  • 部分的别名

    <节></节>

  • 艺术

  • 文章的别名

    <文章></文章>

  • HDR

  • 标题的别名

    <头></报头>

  • FTR

  • 页脚的别名

    <页脚></页脚>

  • ADR

  • 别名的地址

    <地址></地址>

  • DLG

  • 对话框的别名

    <对话框></对话框>

  • 海峡

  • 别名强者

    的<strong></强>

  • PROG

  • Alias of progress

    <progress></progress>

  • mn

  • Alias of main

    <main></main>

  • tem

  • Alias of template

    <template></template>

  • datag

  • Alias of datagrid

    <datagrid></datagrid>

  • datal

  • Alias of datalist

    <datalist></datalist>

  • kg

  • Alias of keygen

    <keygen />

  • out

  • Alias of output

    <output></output>

  • det

  • Alias of details

    <details></details>

  • cmd

  • Alias of command

    <command />

  • doc

  • Alias of html>(head>meta[charset=${charset}]+title[ERR:未定义的系统标签({1:Document}})+body

    <html> <head>    <meta charset="UTF-8" />    <title>Document</title> </head> <body>    </body> </html>

  • doc4

  • Alias of html>(head>meta[http-equiv="Content-Type" content="text/html;charset=${charset}"]+title{1:Document}})+body

    <html> <head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title>Document</title> </head> <body>    </body> </html>

  • ri:dpr, ri:d

  • Alias of img:s

    <img srcset="" src="" alt="" />

  • ri:viewport, ri:v

  • Alias of img:z

    <img sizes="" srcset="" src="" alt="" />

  • ri:art, ri:a

  • Alias of pic>src:m+img

    <picture>    <source media="(min-width: )" srcset="" />    <img src="" alt="" /> </picture>

  • ri:type, ri:t

  • Alias of pic>src:t+img

    <picture>    <source srcset="" type="image/" />    <img src="" alt="" /> </picture>

  • html:4t

  • Alias of !!!4t+doc4[lang=${lang}]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title>Document</title> </head> <body>    </body> </html>

  • html:4s

  • Alias of !!!4s+doc4[lang=${lang}]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title>Document</title> </head> <body>    </body> </html>

  • html:xt

  • Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

    <!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>

  • html:xs

  • Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

    <!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>

  • html:xxs

  • Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

    <!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>

  • html:5

  • Alias of !!!+doc[lang=${lang}]

    <!DOCTYPE html> <html> <head>    <meta charset="UTF-8" />    <title>Document</title> </head> <body>    </body> </html>

  • ol+

  • Alias of ol>li

    <ol>    <li></li> </ol>

  • ul+

  • Alias of ul>li

    <ul>    <li></li> </ul>

  • dl+

  • Alias of dl>dt+dd

    <dl>    <dt></dt>    <dd></dd> </dl>

  • map+

  • Alias of map>area

    <map name="">    <area shape="" coords="" href="" alt="" /> </map>

  • table+

  • Alias of table>tr>td

    <table>    <tr>        <td></td>    </tr> </table>

  • colgroup+, colg+

  • Alias of colgroup>col

    <colgroup>    <col /> </colgroup>

  • tr+

  • Alias of tr>td

    <tr>    <td></td> </tr>

  • select+

  • Alias of select>option

    <select name="" id="">    <option value=""></ option> </ select>

  • optgroup +，optg +

  • optgroup>选项的别名

    <optgroup> <option value =““></ option> </ optgroup>

  • PIC +

  • 图片的别名>来源：srcset + img

    <picture> <source srcset =““/> <img src =”“alt =”“/> </ picture>

  • ！

  • <！DOCTYPE html>

  • ！4吨

  • <！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 Transitional // EN”“http://www.w3.org/TR/html4/loose.dtd”>

  • ！4S

  • <！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 // EN”“http://www.w3.org/TR/html4/strict.dtd”>

  • ！XT

  • <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

  • ！XS

  • <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  • ！XXS

  • <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.1 // EN”“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

  • C

  • <！ - $ {child} - >

  • CC：IE6

  • <！ - [if lte IE 6]> $ {child}<！[ENDIF] - >

  • CC：即

  • <！ - [if IE]> $ {child}<！[ENDIF] - >

  • CC：NOIE

  • <！ - [if！IE]> <！ - > $ {child}<！ - <[ENDIF]！ - >

CSS

CSS模块使用模糊搜索来查找未知缩写，例如ov:h== ov-h== ovh== oh。

如果未找到缩写，则将其转换为属性名称：foo-bar→foo-bar: |;

您可以使用连字符添加前缀来生成供应商前缀属性： -foo


视觉格式

  • POS

  • 位置：相对 ;

  • POS：■

  • 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;

Margin & Padding

  • 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:;

Box Sizing

  • 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:;

Font

  • f

  • font:;

  • f+

  • font:1em Arial,sans-serif;

  • fw

  • font-weight:;

  • fw:n

  • font-weight:normal;

  • fw:b

  • font-weight:bold;

  • fw:br

  • 字体重量：大胆;

  • FW：LR

  • 字体重量：打火机;

  • FS

  • 字体样式：$ {}斜体;

  • FS：N

  • 字体风格：正常;

  • FS：我

  • 字体样式：斜体;

  • FS：○

  • 字体风格：倾斜;

  • FV

  • 字体变形：;

  • FV：N

  • 字体变形：正常;

  • FV：SC

  • 字体变：小型股;

  • FZ

  • 字体大小：;

  • FZA

  • 字体大小调整：;

  • FZA：N

  • 字体大小调整：无;

  • FF

  • 字体系列：;

  • FF：■

  • FONT-FAMILY：衬线;

  • FF：SS

  • FONT-FAMILY：无衬线;

  • FF：C

  • FONT-FAMILY：草书;

  • FF：F

  • FONT-FAMILY：幻想;

  • FF：M

  • FONT-FAMILY：等宽;

  • FF：一

  • 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

  • 字体效果：;

  • FEF：N

  • 字体效应：无;

  • FEF：如

  • 字体效果：雕刻;

  • FEF：EB

  • 字体效果：浮雕;

  • FEF：○

  • 字体效果：轮廓;

  • 有限元

  • 字体强调：;

  • FEMP

  • 字体强调位置：;

  • FEMP：乙

  • 字体强调位置：前;

  • FEMP：一

  • 字体强调位置：后;

  • FEMS

  • 字体强调风格：;

  • 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;

Text

  • 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

  • 文字阴影：ħ v 模糊 RGBA（0，0，0，。5）;

  • TSH +

  • text-shadow：0 0 0 ＃000 ;

  • TSH：N

  • 文字阴影：无;

  • LH

  • 行高：;

  • LTS

  • 字母间距：;

  • LTS-N

  • 字母间距：正常;

  • WHS

  • 空格：;

  • WHS：N

  • 空白：正常;

  • WHS：P

  • 空白：预;

  • WHS：NW

  • 空白：NOWRAP;

  • WHS：PW

  • 空白：预缠绕;

  • WHS：PL

  • 空白：预线;

  • WHSC

  • 空白崩溃：;

  • WHSC：N

  • 空白崩溃：正常;

  • WHSC：克

  • 空白崩溃：保所有;

  • WHSC：L

  • 白空间合拢：松动;

  • WHSC：BS

  • 空白崩溃：打破严格;

  • WHSC：BA

  • 空白崩溃：盈亏所有;

  • WOB

  • 字断：;

  • WOB：N

  • 字断：正常;

  • WOB：K

  • 字突破：保所有;

  • WOB：BA

  • 字断：盈亏所有;

  • WOS

  • 字间距：;

  • 哇

  • 自动换行：;

  • 哇：纳米

  • 自动换：正常;

  • 哇：N

  • word-wrap:none;

  • wow:u

  • word-wrap:unrestricted;

  • wow:s

  • word-wrap:suppress;

  • wow:b

  • word-wrap:break-word;

Background

  • 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;

Color

  • c

  • color:#000;

  • c:r

  • color:rgb(0, 0, 0);

  • c:ra

  • color:rgba(0, 0, 0, .5);

  • op

  • opacity:;

Generated content

  • 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

  • 概括偏移：;

  • OLW

  • 轮廓宽度：;

  • OLW：TN

  • 轮廓宽度：薄;

  • OLW：M

  • 轮廓宽度：介质;

  • OLW：TC

  • 轮廓宽度：厚;

  • OLS

  • 大纲样式：;

  • OLS：N

  • 大纲样式：无;

  • OLS：DT

  • 大纲样式：星罗棋布;

  • OLS：DS

  • 大纲样式：虚线;

  • OLS：■

  • 大纲样式：固体;

  • OLS：DB

  • 概括式：双;

  • OLS：g ^

  • 大纲样式：槽;

  • 醇，R

  • 大纲样式：脊;

  • OLS：我

  • 大纲样式：插图;

  • OLS：○

  • 概括式的：首先，

  • OLC

  • outline-color：＃000 ;

  • OLC：我

  • 轮廓色：反转;

表

  • TBL

  • 表格的布局：;

  • TBL：一

  • 表格的布局：汽车;

  • TBL：F

  • 表格的布局：固定;

  • CPS

  • 带字幕的一面：;

  • CPS：T

  • 标题侧：顶部;

  • CPS：乙

  • 标题侧：底部;

  • EC

  • 空细胞：;

  • EC：■

  • 空细胞：显示;

  • EC：H

  • 空细胞：隐藏;

边界

  • BD

  • 边界：;

  • BD +

  • 边框：1px solid ＃000 ;

  • BD：N

  • 边界：无;

  • bdbk

  • 边境休息：关闭 ;

  • bdbk：C

  • 边境断：关闭;

  • BDCL

  • 边界崩溃：;

  • BDCL：C

  • 边界崩溃：崩溃;

  • BDCL：■

  • 边界崩溃：独立;

  • BDC

  • border-color：＃000 ;

  • BDC：T

  • 边框颜色：透明;

  • BDI

  • 边界图像：网址（）;

  • BDI：N

  • 边界图像：无;

  • BDTI

  • 边框顶部图像：网址（）;

  • BDTI：N

  • 边框顶部图像：无;

  • bdri

  • 右边框图像：网址（）;

  • bdri：N

  • 右边框图像：无;

  • bdbi

  • 下边框图像：网址（）;

  • bdbi：N

  • 下边框图像：无;

  • bdli

  • 左边框的图像：网址（）;

  • bdli：N

  • 左边框的图像：无;

  • bdci

  • 边框边角图像：网址（）;

  • bdci：N

  • 边框边角图像：无;

  • bdci：C

  • 边框边角图像：继续;

  • bdtli

  • 边框左上角的图像：网址（）;

  • bdtli：N

  • 边框左上角图像：无;

  • bdtli：C

  • 边框左上角图像：继续;

  • bdtri

  • 边框右上角的图像：网址（）;

  • bdtri：N

  • 边框右上角的图像：无;

  • bdtri：C

  • 边框右上角的图像：继续;

  • bdbri

  • 边框右下角的图像：网址（）;

  • bdbri：N

  • 边框右下角的图像：无;

  • bdbri：C

  • 边框右下角的图像：继续;

  • 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：一

  • 边界长度：汽车;

  • BDSP

  • 边框间距：;

  • BDS

  • 边框样式：;

  • BDS：N

  • 边框样式：无;

  • BDS：H

  • 边框样式：隐藏;

  • BDS：DT

  • 边框样式：星罗棋布;

  • BDS：DS

  • 边框样式：虚线;

  • BDS：■

  • 边框样式：固体;

  • BDS：DB

  • 边框样式：双;

  • BDS：的DTD

  • 边框样式：点划线;

  • BDS：dtdtds

  • 边框样式：圆点点划;

  • BDS：W

  • 边框样式：波;

  • BDS：g ^

  • 边框样式：槽;

  • BDS，R

  • 边框样式：脊;

  • BDS：我

  • 边框样式：插图;

  • BDS：○

  • 边框样式：首先，

  • BDW

  • 边框宽度：;

  • bdt，bt

  • 边境顶：;

  • BDT +

  • border-top：1px solid ＃000 ;

  • BDT：N

  • 边框顶部：无;

  • bdtw

  • 边框顶部宽度：;

  • bdts

  • 边境顶式：;

  • bdts：N

  • 边境顶式：无;

  • 英国属土公民

  • border-top-color：＃000 ;

  • 英国属土公民：T

  • 边框顶色：透明;

  • bdr，br

  • 右边框：;

  • BDR +

  • border-right：1px solid ＃000 ;

  • BDR：N

  • 右边框：无;

  • bdrw

  • 右边框宽度：;

  • bdrst

  • 右边框样式：;

  • bdrst：N

  • 右边框样式：无;

  • BDRC

  • border-right-color：＃000 ;

  • BDRC：T

  • 右边框颜色：透明;

  • bdb，bb

  • 底部边框：;

  • BDB +

  • border-bottom：1px solid ＃000 ;

  • BDB：N

  • 底部边框：无;

  • bdbw

  • 边框底部宽度为：;

  • bdbs

  • 下边框样式：;

  • bdbs：N

  • 下边框样式：无;

  • bdbc

  • border-bottom-color：＃000 ;

  • bdbc：T

  • 边框底颜色：透明;

  • bdl，bl

  • 左边框：;

  • BDL +

  • border-left：1px solid ＃000 ;

  • BDL：N

  • 左边框：无;

  • bdlw

  • 左边框宽度：;

  • BDLS

  • 左边框的风格：;

  • BDLS：N

  • 左边框风格：无;

  • BDLC

  • border-left-color：＃000 ;

  • BDLC：T

  • 左边框颜色：透明;

  • 是BDR

  • 边界半径：;

  • bdtrrs

  • 边框右上角半径：;

  • bdtlrs

  • 边框左上角的半径：;

  • bdbrrs

  • border-bottom-right-radius:;

  • bdblrs

  • border-bottom-left-radius:;

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;

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

  • @font-face {    font-family:;    src:url(|); }

  • @f+

  • @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

  • @import url();

  • @kf

  • @-webkit-keyframes identifier {    from { }    to { } } @-o-keyframes identifier {    from { }    to { } } @-moz-keyframes identifier {    from { }    to { } } @keyframes identifier {    from { }    to { } }

  • @m, @media

  • @media screen {    }

  • 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;

  • anim

  • animation:;

  • anim-

  • 动画：名称 持续 时间 - 功能 延迟 迭代 - 计数 方向 填充模式 ;

  • animdel

  • 动画延迟：时间 ;

  • animdir

  • 动画方向：正常 ;

  • animdir：一

  • 动画方向：备用;

  • animdir：AR

  • 动画方向：交替反转;

  • animdir：N

  • 动画方向：正常;

  • animdir，R

  • 动画方向：反向;

  • animdur

  • 动画持续时间：0秒;

  • animfm

  • 动画填充模式：两者 ;

  • animfm：乙

  • 动画填充模式：向后;

  • animfm：bt，animfm：bh

  • 动画填充模式：两者;

  • animfm：F

  • 动画填充模式：转发;

  • animic

  • animation-iteration-count：1 ;

  • animic：我

  • 动画迭代数：无限;

  • animn

  • animation-name：none ;

  • animps

  • 动画播放状态：跑步 ;

  • animps：P

  • 动画播放状态：暂停;

  • animps，R

  • 动画播放状态：运行;

  • animtf

  • 动画定时功能：线性 ;

  • animtf：CB

  • 动画定时功能：立方贝塞尔（0.1，0.7，1.0，0.1）;

  • animtf：电子

  • 动画定时功能：缓解;

  • animtf：EI

  • 动画定时功能：易于在;

  • animtf：EIO

  • 动画定时功能：易于进出;

  • animtf：EO

  • 动画定时功能：缓解出;

  • animtf：L

  • 动画定时功能：线性;

  • 美联社

  • 外观：$ {无};

  • 如

  • 对齐自：;

  • 作为一个

  • 对齐自：汽车;

  • 为：B

  • 对齐自：基线;

  • 如：C

  • 对齐自：中心;

  • 如：FE

  • 对齐自：柔性端;

  • 如：FS

  • 对齐自：柔性启动;

  • 屁股

  • ALIGN-自：拉伸;

  • BFV

  • 背面能见度：;

  • BFV：H

  • 背面能见度：隐藏;

  • BFV：v

  • 背面能见度：可见;

  • BG：即

  • filter：progid：DXImageTransform.Microsoft.AlphaImageLoader（src =' x .png'，sizingMethod =' crop '）;

  • 厘米

  • / * $ {child} * /

  • 科尔姆

  • 列：;

  • colmc

  • 列数：;

  • colmf

  • 栏填写：;

  • colmg

  • 列的差距：;

  • colmr

  • 列规则：;

  • colmrc

  • 列治色：;

  • colmrs

  • 列规则式：;

  • colmrw

  • 列规则宽度：;

  • colms

  • 列跨度：;

  • colmw

  • 列宽：;

  • d：IB +

  • display：inline-block; *显示：内联; * zoom：1;

  • FX

  • 柔性：;

  • FXB

  • 柔性基础：;

  • FXD

  • 弯曲方向：;

  • FXD：C

  • 挠曲方向：柱;

  • FXD：CR

  • 挠曲方向：列反向;

  • FXD，R

  • 挠曲方向：行;

  • FXD：RR

  • 挠曲方向：行反向;

  • FXF

  • 柔性流程：;

  • FXG

  • FLEX-成长：;

  • fxsh

  • 弯曲收缩：;

  • FXW

  • 柔性包装： ;

  • FXW：N

  • 柔性包裹物：NOWRAP;

  • FXW：W

  • 弯曲缠绕：包裹;

  • FXW：WR

  • 柔性包裹物：包裹后退;

  • JC

  • 证明内容：;

  • JC：C

  • 证明内容：中心;

  • JC：FE

  • 证明内容：柔性端;

  • JC：FS

  • 证明内容：柔性启动;

  • JC：SA

  • 证明内容：空间周围;

  • JC：SB

  • 证明内容：空间之间;

  • 损伤

  • 最大分辨率：res ;

  • MIR

  • 最低分辨率：res ;

  • OP +

  • 不透明度： ; filter：alpha（opacity =）;

  • OP：即

  • 滤波器：的progid：DXImageTransform.Microsoft.Alpha（不透明度为100）;

  • OP：MS

  • -MS-滤波器： '的progid：DXImageTransform.Microsoft.Alpha（不透明度为100）';

  • ORD

  • 订购：;

  • ORI

  • 取向：;

  • ORI：L

  • 方向：景观;

  • ORI：P

  • 方向：纵向;

  • TOV

  • 文本溢出：$ {省略号};

  • TOV：C

  • 文本溢出：剪辑;

  • TOV：电子

  • 文本溢出：省略号;

  • TRF

  • 转变：;

  • TRF，R

  • 变换：旋转（角度）;

  • TRF：RX

  • transform：rotateX（angle）;

  • TRF：RY

  • transform：rotateY（angle）;

  • TRF：RZ

  • transform：rotateZ（angle）;

  • TRF：SC

  • 变换：scale（x，y）;

  • TRF：SC3

  • transform：scale3d（x，y，z）;

  • TRF：SCX

  • transform：scaleX（x）;

  • TRF：SCY

  • 变换：scaleY（y）;

  • TRF：SCZ

  • 变换：scaleZ（z）;

  • TRF：SKX

  • transform：skewX（angle）;

  • TRF：天空

  • 变换：skewY（角度）;

  • 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-style：preserve-3d ;

  • TRS

  • 过渡：支持 时间 ;

  • trsde

  • 过渡延迟：时间 ;

  • trsdu

  • 过渡期：时间 ;

  • trsp

  • 过渡性质：道具 ;

  • trstf

  • transition-timing-function：tfunc ;

  • 我们

  • 用户选择：$ {无};

  • WFSM

  • -webkit-字体平滑：$ {抗锯齿};

  • WFSM：一

  • -webkit-字体平滑：抗锯齿;

  • WFSM：N

  • -webkit-字体平滑：无;

  • wfsm：s，wfsm：sa

  • -webkit-字体平滑：子像素抗锯齿;

  • WM

  • 写作模式：lr-tb ;

  • WM：BTL

  • 写作模式：BT-LR;

  • WM：BTR

  • 写作模式：BT-RL;

  • WM：LRB

  • 写作模式：LR-BT;

  • WM：轻轨

  • 写入模式：LR-TB;

  • WM：RLB

  • 写作模式：RL-BT;

  • WM：RLT

  • 写模式：RL-TB;

  • WM：TBL

  • 写入模式：TB-LR;

  • WM：TBR

  • 写入模式：TB-RL;


 


XSL

  • tmatch，tm

  • <xsl：template match =““mode =”“></ XSL：模板>

  • tname，tn

  • <xsl：template name =““></ XSL：模板>

  • 呼叫

  • <xsl：call-template name =““/>

  • 美联社

  • <xsl：apply-templates select =““mode =”“/>

  • API

  • <xsl：apply-imports />

  • 恶魔

  • <xsl：import href =““/>

  • INC

  • <xsl：include href =““/>

  • CH

  • 的<xsl：选择></ XSL：选择>

  • xsl：什么时候，wh

  • <xsl：when test =““></ XSL：当>

  • OT

  • 的<xsl：否则></ XSL：否则>

  • 如果

  • <xsl：if test =““></ XSL：如果>

  • 平价

  • <xsl：param name =““></ XSL：PARAM>

  • 削减

  • <xsl：param name =““select =”“/>

  • VAR

  • <xsl：variable name =““></ XSL：可变>

  • 瓦尔

  • <xsl：variable name =““select =”“/>

  • WP

  • <xsl：with-param name =““select =”“/>

  • 键

  • <xsl：key name =““匹配=”“use =”“/>

  • ELEM

  • <xsl：element name =““></ XSL：元件>

  • ATTR

  • <xsl：attribute name =““></ XSL：属性>

  • ATTRS

  • <xsl：attribute-set name =““></ XSL：属性集>

  • CP

  • <xsl：copy select =““/>

  • 合作

  • <xsl：copy-of select =““/>

  • VAL

  • <xsl：value-of select =““/>

  • 每一个，为

  • <xsl：for-each select =““></的xsl：for-each>的

  • TEX

  • 的<xsl：文本></ XSL：文本>

  • COM

  • 的<xsl：评论></ XSL：评论>

  • 味精

  • <xsl：message terminate =“no”></ XSL：消息>

  • 秋季

  • 的<xsl：回退></ XSL：回退>

  • NUM

  • <xsl：number value =““/>

  • 南

  • <namespace-alias stylesheet-prefix =““result-prefix =”“/>

  • PRES

  • <xsl：preserve-space elements =““/>

  • 跳闸

  • <xsl：strip-space elements =““/>

  • PROC

  • <xsl：processing-instruction name =““></ XSL：处理指令>

  • 分类

  • <xsl：sort select =““order =”“/>

  • 选择+

  • xsl的别名：选择> xsl：when + xsl：否则

    <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 version =“1.0”encoding =“UTF-8”？> <xsl：stylesheet version =“1.0”xmlns：xsl =“http://www.w3.org/1999/XSL/Transform”></ XSL：样式>

  • ！

  • <？xml version =“1.0”encoding =“UTF-8”？>


 


打印保存责任编辑：本站编辑 发表评论>>
上一篇文章： 下一篇文章：

热门文章