Emmet使用手册

[ 默认分类 ]

<div class="field-item even" property="content:encoded">

<h3>
介绍</h3>

<p>Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具:</p>
<p></p>
<p>基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动你得生产力,但大多数的实现都有这样一个缺点:你必须先定义你得代码片段,并且不能再运行时进行拓展。</p>
<p>Emmet把片段这个概念提高到了一个新的层次:你可以设置CSS形式的能够动态被解析的表达式,然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。</p>
<div class="gg-ad clearfix" style="text-align:center;">
<script type="text/javascript">
<!--//--><![CDATA[// ><!--

/46860,创建于2014-3-16*/
var cpro_id = "u1490106";

//--><!]]>
</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js"; type="text/javascript"></script></div>
<h3>

使用示例:</h3>

<p>在编辑器中输入缩写代码:ul>li*5 ,然后按下拓展键(默认为tab),即可得到代码片段:</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<h3>下载和安装</h3>
官网下载
<p>因为我也是Sublime Text的使用者,所以下面为大家介绍一下sublime text中Emmet的安装方法:</p>
<p>步骤一:首先你需要为sublime text安装Package Control组件:</p>

  1. 按Ctrl+`调出sublime text的console
  2. 粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installedpackagespath();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
  3. 重启Sublime Text
  4. 在Perferences->package settings中看到package control,则表示安装成功
<p>步骤二:使用Package Control安装Emmet插件:</p>
  1. 按Ctrl+Shift+P命令板
  2. 输入install然后选择install Package,然后输入emmet找到 Emmet Css Snippets,点击就可以自动完成安装。
<h3> 使用方法</h3> <p>emmet的使用方法也非常简单,以sublime text为例,直接在编辑器中输入HTML或CSS的代码的缩写,然后按tab键就可以拓展为完整的代码片段。(如果与已有的快捷键有冲突的话,可以自行在编辑器中将拓展键设为其他快捷键)</p> <h2> 语法:</h2> <h4> 后代:></h4> <p>缩写:nav>ul>li</p>
<span class="tag"><<span class="title">nav</span>></span>
    <span class="tag"><<span class="title">ul</span>></span>
        <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"></<span class="title">ul</span>></span>
<span class="tag"></<span class="title">nav</span>></span>

<h4>

兄弟:+</h4>

<p>缩写:div+p+bq</p>

<span class="tag"><<span class="title">div</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">p</span>></span><span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">blockquote</span>></span><span class="tag"></<span class="title">blockquote</span>></span>

<h4>

上级:^</h4>

<p>缩写:div+div>p>span+em^bq</p>

<span class="tag"><<span class="title">div</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span>></span>
    <span class="tag"><<span class="title">p</span>></span><span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"><<span class="title">em</span>></span><span class="tag"></<span class="title">em</span>></span><span class="tag"></<span class="title">p</span>></span>
    <span class="tag"><<span class="title">blockquote</span>></span><span class="tag"></<span class="title">blockquote</span>></span>
<span class="tag"></<span class="title">div</span>></span>

<p>缩写:div+div>p>span+em^^bq</p>

<span class="tag"><<span class="title">div</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span>></span>
    <span class="tag"><<span class="title">p</span>></span><span class="tag"><<span class="title">span</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"><<span class="title">em</span>></span><span class="tag"></<span class="title">em</span>></span><span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">blockquote</span>></span><span class="tag"></<span class="title">blockquote</span>></span>

<h4>

分组:()</h4>

<p>缩写:div>(header>ul>li*2>a)+footer>p</p>

<span class="tag"><<span class="title">div</span>></span>
    <span class="tag"><<span class="title">header</span>></span>
        <span class="tag"><<span class="title">ul</span>></span>
            <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
            <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">li</span>></span>
        <span class="tag"></<span class="title">ul</span>></span>
    <span class="tag"></<span class="title">header</span>></span>
    <span class="tag"><<span class="title">footer</span>></span>
        <span class="tag"><<span class="title">p</span>></span><span class="tag"></<span class="title">p</span>></span>
    <span class="tag"></<span class="title">footer</span>></span>
<span class="tag"></<span class="title">div</span>></span>

<p>缩写:(div>dl>(dt+dd)*3)+footer>p</p>

<span class="tag"><<span class="title">div</span>></span>
    <span class="tag"><<span class="title">dl</span>></span>
        <span class="tag"><<span class="title">dt</span>></span><span class="tag"></<span class="title">dt</span>></span>
        <span class="tag"><<span class="title">dd</span>></span><span class="tag"></<span class="title">dd</span>></span>
        <span class="tag"><<span class="title">dt</span>></span><span class="tag"></<span class="title">dt</span>></span>
        <span class="tag"><<span class="title">dd</span>></span><span class="tag"></<span class="title">dd</span>></span>
        <span class="tag"><<span class="title">dt</span>></span><span class="tag"></<span class="title">dt</span>></span>
        <span class="tag"><<span class="title">dd</span>></span><span class="tag"></<span class="title">dd</span>></span>
    <span class="tag"></<span class="title">dl</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">footer</span>></span>
    <span class="tag"><<span class="title">p</span>></span><span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">footer</span>></span>

<h4>

乘法:*</h4>

<p>缩写:ul>li*5</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<h4>

自增符号:$</h4>

<p>缩写:ul>li.item$*5</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item1"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item2"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item3"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item4"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item5"</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<p>缩写:h$[title=item$]{Header $}*3</p>

<span class="tag"><<span class="title">h1</span> <span class="attribute">title</span>=<span class="value">"item1"</span>></span>Header 1<span class="tag"></<span class="title">h1</span>></span>
<span class="tag"><<span class="title">h2</span> <span class="attribute">title</span>=<span class="value">"item2"</span>></span>Header 2<span class="tag"></<span class="title">h2</span>></span>
<span class="tag"><<span class="title">h3</span> <span class="attribute">title</span>=<span class="value">"item3"</span>></span>Header 3<span class="tag"></<span class="title">h3</span>></span>

<p>缩写:ul>li.item$$$*5</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item001"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item002"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item003"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item004"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item005"</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<p>缩写:ul>li.item$@-*5</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item5"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item4"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item3"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item2"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item1"</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<p>缩写:ul>li.item$@3*5</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item3"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item4"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item5"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item6"</span>></span><span class="tag"></<span class="title">li</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"item7"</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<h4>

ID和类属性</h4>

<p>缩写:#header</p>

<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"header"</span>></span><span class="tag"></<span class="title">div</span>></span>

<p>缩写:.title</p>

<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"title"</span>></span><span class="tag"></<span class="title">div</span>></span>

<p>缩写:form#search.wide</p>

<span class="tag"><<span class="title">form</span> <span class="attribute">id</span>=<span class="value">"search"</span> <span class="attribute">class</span>=<span class="value">"wide"</span>></span><span class="tag"></<span class="title">form</span>></span>

<p>缩写:p.class1.class2.class3</p>

<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"class1 class2 class3"</span>></span><span class="tag"></<span class="title">p</span>></span>

<h4>

自定义属性</h4>

<p>缩写:p[title="Hello world"]</p>

<span class="tag"><<span class="title">p</span> <span class="attribute">title</span>=<span class="value">"Hello world"</span>></span><span class="tag"></<span class="title">p</span>></span>

<p>缩写:td[rowspan=2 colspan=3 title]</p>

<span class="tag"><<span class="title">td</span> <span class="attribute">rowspan</span>=<span class="value">"2"</span> <span class="attribute">colspan</span>=<span class="value">"3"</span> <span class="attribute">title</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">td</span>></span>

<p>缩写:[a='value1' b="value2"]</p>

<span class="tag"><<span class="title">div</span> <span class="attribute">a</span>=<span class="value">"value1"</span> <span class="attribute">b</span>=<span class="value">"value2"</span>></span><span class="tag"></<span class="title">div</span>></span>

<h4>

文本:{}</h4>

<p>缩写:a{Click me}</p>

<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>Click me<span class="tag"></<span class="title">a</span>></span>

<p>缩写:p>{Click }+a{here}+{ to continue}</p>

<span class="tag"><<span class="title">p</span>></span>Click <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span>here<span class="tag"></<span class="title">a</span>></span> to continue<span class="tag"></<span class="title">p</span>></span>

<h4>

隐式标签</h4>

<p>缩写:.class</p>

<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"class"</span>></span><span class="tag"></<span class="title">div</span>></span>

<p>缩写:em>.class</p>

<span class="tag"><<span class="title">em</span>></span><span class="tag"><<span class="title">span</span> <span class="attribute">class</span>=<span class="value">"class"</span>></span><span class="tag"></<span class="title">span</span>></span><span class="tag"></<span class="title">em</span>></span>

<p>缩写:ul>.class</p>

<span class="tag"><<span class="title">ul</span>></span>
    <span class="tag"><<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"class"</span>></span><span class="tag"></<span class="title">li</span>></span>
<span class="tag"></<span class="title">ul</span>></span>

<p>缩写:table>.row>.col</p>

<span class="tag"><<span class="title">table</span>></span>
    <span class="tag"><<span class="title">tr</span> <span class="attribute">class</span>=<span class="value">"row"</span>></span>
        <span class="tag"><<span class="title">td</span> <span class="attribute">class</span>=<span class="value">"col"</span>></span><span class="tag"></<span class="title">td</span>></span>
    <span class="tag"></<span class="title">tr</span>></span>
<span class="tag"></<span class="title">table</span>></span>

<h3>

HTML</h3>

<p>所有未知的缩写都会转换成标签,例如,foo → <foo></foo></p>
<p>缩写:!</p>

<span class="doctype"><!doctype html></span>
<span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span>
<span class="tag"><<span class="title">head</span>></span>
    <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span>></span>
    <span class="tag"><<span class="title">title</span>></span>Document<span class="tag"></<span class="title">title</span>></span>
<span class="tag"></<span class="title">head</span>></span>
<span class="tag"><<span class="title">body</span>></span>

<span class="tag"></<span class="title">body</span>></span>
<span class="tag"></<span class="title">html</span>></span>

<p>缩写:a</p>

<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">a</span>></span>

<p>缩写:a:link</p>

<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://"</span>></span><span class="tag"></<span class="title">a</span>></span>

<p>缩写:a:mail</p>

<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"mailto:"</span>></span><span class="tag"></<span class="title">a</span>></span>

<p>缩写:abbr</p>

<span class="tag"><<span class="title">abbr</span> <span class="attribute">title</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">abbr</span>></span>

<p>缩写:acronym</p>

<span class="tag"><<span class="title">acronym</span> <span class="attribute">title</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">acronym</span>></span>

<p>缩写:base</p>

<span class="tag"><<span class="title">base</span> <span class="attribute">href</span>=<span class="value">""</span> /></span>

<p>缩写:basefont</p>

<span class="tag"><<span class="title">basefont</span> /></span>

<p>缩写:br</p>

<span class="tag"><<span class="title">br</span> /></span>

<p>缩写:frame</p>

<span class="tag"><<span class="title">frame</span> /></span>

<p>缩写:hr</p>

<span class="tag"><<span class="title">hr</span> /></span>

<p>缩写:bdo</p>

<span class="tag"><<span class="title">bdo</span> <span class="attribute">dir</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">bdo</span>></span>

<p>缩写:bdo:r</p>

<span class="tag"><<span class="title">bdo</span> <span class="attribute">dir</span>=<span class="value">"rtl"</span>></span><span class="tag"></<span class="title">bdo</span>></span>

<p>缩写:bdo:l</p>

<span class="tag"><<span class="title">bdo</span> <span class="attribute">dir</span>=<span class="value">"ltr"</span>></span><span class="tag"></<span class="title">bdo</span>></span>

<p>缩写:col</p>

<span class="tag"><<span class="title">col</span> /></span>

<p>缩写:link</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">""</span> /></span>

<p>缩写:link:css</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"style.css"</span> /></span>

<p>缩写:link:print</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"print.css"</span> <span class="attribute">media</span>=<span class="value">"print"</span> /></span>

<p>缩写:link:favicon</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"shortcut icon"</span> <span class="attribute">type</span>=<span class="value">"image/x-icon"</span> <span class="attribute">href</span>=<span class="value">"favicon.ico"</span> /></span>

<p>缩写:link:touch</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"apple-touch-icon"</span> <span class="attribute">href</span>=<span class="value">"favicon.png"</span> /></span>

<p>缩写:link:rss</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"alternate"</span> <span class="attribute">type</span>=<span class="value">"application/rss+xml"</span> <span class="attribute">title</span>=<span class="value">"RSS"</span> <span class="attribute">href</span>=<span class="value">"rss.xml"</span> /></span>

<p>缩写:link:atom</p>

<span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"alternate"</span> <span class="attribute">type</span>=<span class="value">"application/atom+xml"</span> <span class="attribute">title</span>=<span class="value">"Atom"</span> <span class="attribute">href</span>=<span class="value">"atom.xml"</span> /></span>

<p>缩写:meta</p>

<span class="tag"><<span class="title">meta</span> /></span>

<p>缩写:meta:utf</p>

<span class="tag"><<span class="title">meta</span> <span class="attribute">http-equiv</span>=<span class="value">"Content-Type"</span> <span class="attribute">content</span>=<span class="value">"text/html;charset=UTF-8"</span> /></span>

<p>缩写:meta:win</p>

<span class="tag"><<span class="title">meta</span> <span class="attribute">http-equiv</span>=<span class="value">"Content-Type"</span> <span class="attribute">content</span>=<span class="value">"text/html;charset=windows-1251"</span> /></span>

<p>缩写:meta:vp</p>

<span class="tag"><<span class="title">meta</span> <span class="attribute">name</span>=<span class="value">"viewport"</span> <span class="attribute">content</span>=<span class="value">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span> /></span>

<p>缩写:meta:compat</p>

<span class="tag"><<span class="title">meta</span> <span class="attribute">http-equiv</span>=<span class="value">"X-UA-Compatible"</span> <span class="attribute">content</span>=<span class="value">"IE=7"</span> /></span>

<p>缩写:style</p>

<span class="tag"><<span class="title">style</span>></span><span class="css"></span><span class="tag"></<span class="title">style</span>></span>

<p>缩写:script</p>

<span class="tag"><<span class="title">script</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>

<p>缩写:script:src</p>

<span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">""</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span>

<p>缩写:img</p>

<span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:iframe</p>

<span class="tag"><<span class="title">iframe</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">frameborder</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">iframe</span>></span>

<p>缩写:embed</p>

<span class="tag"><<span class="title">embed</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">type</span>=<span class="value">""</span> /></span>

<p>缩写:object</p>

<span class="tag"><<span class="title">object</span> <span class="attribute">data</span>=<span class="value">""</span> <span class="attribute">type</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">object</span>></span>

<p>缩写:param</p>

<span class="tag"><<span class="title">param</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:map</p>

<span class="tag"><<span class="title">map</span> <span class="attribute">name</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">map</span>></span>

<p>缩写:area</p>

<span class="tag"><<span class="title">area</span> <span class="attribute">shape</span>=<span class="value">""</span> <span class="attribute">coords</span>=<span class="value">""</span> <span class="attribute">href</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:area:d</p>

<span class="tag"><<span class="title">area</span> <span class="attribute">shape</span>=<span class="value">"default"</span> <span class="attribute">href</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:area:c</p>

<span class="tag"><<span class="title">area</span> <span class="attribute">shape</span>=<span class="value">"circle"</span> <span class="attribute">coords</span>=<span class="value">""</span> <span class="attribute">href</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:area:r</p>

<span class="tag"><<span class="title">area</span> <span class="attribute">shape</span>=<span class="value">"rect"</span> <span class="attribute">coords</span>=<span class="value">""</span> <span class="attribute">href</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:area:p</p>

<span class="tag"><<span class="title">area</span> <span class="attribute">shape</span>=<span class="value">"poly"</span> <span class="attribute">coords</span>=<span class="value">""</span> <span class="attribute">href</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:form</p>

<span class="tag"><<span class="title">form</span> <span class="attribute">action</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">form</span>></span>

<p>缩写:form:get</p>

<span class="tag"><<span class="title">form</span> <span class="attribute">action</span>=<span class="value">""</span> <span class="attribute">method</span>=<span class="value">"get"</span>></span><span class="tag"></<span class="title">form</span>></span>

<p>缩写:form:post</p>

<span class="tag"><<span class="title">form</span> <span class="attribute">action</span>=<span class="value">""</span> <span class="attribute">method</span>=<span class="value">"post"</span>></span><span class="tag"></<span class="title">form</span>></span>

<p>缩写:label</p>

<span class="tag"><<span class="title">label</span> <span class="attribute">for</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">label</span>></span>

<p>缩写:input</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> /></span>

<p>缩写:inp</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:hidden</p>
<p>别名:input[type=hidden name]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"hidden"</span> <span class="attribute">name</span>=<span class="value">""</span> /></span>

<p>缩写:input:h</p>
<p>别名:input:hidden</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"hidden"</span> <span class="attribute">name</span>=<span class="value">""</span> /></span>

<p>缩写:input:text, input:t</p>
<p>别名:inp</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:search</p>
<p>别名:inp[type=search]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"search"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:email</p>
<p>别名:inp[type=email]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"email"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:url</p>
<p>别名:inp[type=url]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"url"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:password</p>
<p>别名:inp[type=password]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:p</p>
<p>别名:input:password</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"password"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:datetime</p>
<p>别名:inp[type=datetime]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"datetime"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:date</p>
<p>别名:inp[type=date]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"date"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:datetime-local</p>
<p>别名:inp[type=datetime-local]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"datetime-local"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:month</p>
<p>别名:inp[type=month]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"month"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:week</p>
<p>别名:inp[type=week]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"week"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:time</p>
<p>别名:inp[type=time]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"time"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:number</p>
<p>别名:inp[type=number]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"number"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:color</p>
<p>别名:inp[type=color]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"color"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:checkbox</p>
<p>别名:inp[type=checkbox]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:c</p>
<p>别名:input:checkbox</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"checkbox"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:radio</p>
<p>别名:inp[type=radio]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:r</p>
<p>别名:input:radio</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"radio"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:range</p>
<p>别名:inp[type=range]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"range"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:file</p>
<p>别名:inp[type=file]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"file"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:f</p>
<p>别名:input:file</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"file"</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> /></span>

<p>缩写:input:submit</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:input:s</p>
<p>别名:input:submit</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:input:image</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"image"</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:input:i</p>
<p>别名:input:image</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"image"</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">alt</span>=<span class="value">""</span> /></span>

<p>缩写:input:button</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:input:b</p>
<p>别名:input:button</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:isindex</p>

<span class="tag"><<span class="title">isindex</span> /></span>

<p>缩写:input:reset</p>
<p>别名:input:button[type=reset]</p>

<span class="tag"><<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"reset"</span> <span class="attribute">value</span>=<span class="value">""</span> /></span>

<p>缩写:select</p>

<span class="tag"><<span class="title">select</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">select</span>></span>

<p>缩写:option</p>

<span class="tag"><<span class="title">option</span> <span class="attribute">value</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">option</span>></span>

<p>缩写:textarea</p>

<span class="tag"><<span class="title">textarea</span> <span class="attribute">name</span>=<span class="value">""</span> <span class="attribute">id</span>=<span class="value">""</span> <span class="attribute">cols</span>=<span class="value">"30"</span> <span class="attribute">rows</span>=<span class="value">"10"</span>></span><span class="tag"></<span class="title">textarea</span>></span>

<p>缩写:menu:context</p>
<p>别名:menu[type=context]></p>

<span class="tag"><<span class="title">menu</span> <span class="attribute">type</span>=<span class="value">"context"</span>></span><span class="tag"></<span class="title">menu</span>></span>

<p>缩写:menu:c</p>
<p>别名:menu:context</p>

<span class="tag"><<span class="title">menu</span> <span class="attribute">type</span>=<span class="value">"context"</span>></span><span class="tag"></<span class="title">menu</span>></span>

<p>缩写:menu:toolbar</p>
<p>别名:menu[type=toolbar]></p>

<span class="tag"><<span class="title">menu</span> <span class="attribute">type</span>=<span class="value">"toolbar"</span>></span><span class="tag"></<span class="title">menu</span>></span>

<p>缩写:menu:t</p>
<p>别名:menu:toolbar</p>

<span class="tag"><<span class="title">menu</span> <span class="attribute">type</span>=<span class="value">"toolbar"</span>></span><span class="tag"></<span class="title">menu</span>></span>

<p>缩写:video</p>

<span class="tag"><<span class="title">video</span> <span class="attribute">src</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">video</span>></span>

<p>缩写:audio</p>

<span class="tag"><<span class="title">audio</span> <span class="attribute">src</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">audio</span>></span>

<p>缩写:html:xml</p>

<span class="tag"><<span class="title">html</span> <span class="attribute">xmlns</span>=<span class="value">"http://www.w3.org/1999/xhtml"</span>></span><span class="tag"></<span class="title">html</span>></span>

<p>缩写:keygen</p>

<span class="tag"><<span class="title">keygen</span> /></span>

<p>缩写:command</p>

<span class="tag"><<span class="title">command</span> /></span>

<p>缩写:bq</p>
<p>别名:blockquote</p>

<span class="tag"><<span class="title">blockquote</span>></span><span class="tag"></<span class="title">blockquote</span>></span>

<p>缩写:acr</p>
<p>别名:acronym</p>

<span class="tag"><<span class="title">acronym</span> <span class="attribute">title</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">acronym</span>></span>

<p>缩写:fig</p>
<p>别名:figure</p>

<span class="tag"><<span class="title">figure</span>></span><span class="tag"></<span class="title">figure</span>></span>

<p>缩写:figc</p>
<p>别名:figcaption</p>

<span class="tag"><<span class="title">figcaption</span>></span><span class="tag"></<span class="title">figcaption</span>></span>

<p>缩写:ifr</p>
<p>别名:iframe</p>

<span class="tag"><<span class="title">iframe</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">frameborder</span>=<span class="value">"0"</span>></span><span class="tag"></<span class="title">iframe</span>></span>

<p>缩写:emb</p>
<p>别名:embed</p>

<span class="tag"><<span class="title">embed</span> <span class="attribute">src</span>=<span class="value">""</span> <span class="attribute">type</span>=<span class="value">""</span> /></span>

<p>缩写:obj</p>
<p>别名:object</p>

<span class="tag"><<span class="title">object</span> <span class="attribute">data</span>=<span class="value">""</span> <span class="attribute">type</span>=<span class="value">""</span>></span><span class="tag"></<span class="title">object</span>></span>

<p>缩写:src</p>
<p>别名:source</p>

<span class="tag"><<span class="title">source</span>></span><span class="tag"></<span class="title">source</span>></span>

<p>缩写:cap</p>
<p>别名:caption</p>

<span class="tag"><<span class="title">caption</span>></span><span class="tag"></<span class="title">caption</span>></span>

<p>缩写:colg</p>
<p>别名:colgroup</p>

<span class="tag"><<span class="title">colgroup</span>></span><span class="tag"></<span class="title">colgroup</span>></span>

<p>缩写:fst, fset</p>
<p>别名:fieldset</p>

<span class="tag"><<span class="title">fieldset</span>></span><span class="tag"></<span class="title">fieldset</span>></span>

<p>缩写:btn</p>
<p>别名:button</p>

<span class="tag"><<span class="title">button</span>></span><span class="tag"></<span class="title">button</span>></span>

<p>缩写:btn:b</p>
<p>别名:button[type=button]</p>

<span class="tag"><<span class="title">button</span> <span class="attribute">type</span>=<span class="value">"button"</span>></span><span class="tag"></<span class="title">button</span>></span>

<p>缩写:btn:r</p>
<p>别名:button[type=reset]</p>

<span class="tag"><<span class="title">button</span> <span class="attribute">type</span>=<span class="value">"reset"</span>></span><span class="tag"></<span class="title">button</span>></span>

<p>缩写:btn:s</p>
<p>别名:button[type=submit]</p>

<span class="tag"><<span class="title">button</span> <span class="attribute">type</span>=<span class="value">"submit"</span>></span><span class="tag"></<span class="title">button</span>></span>

<h4>

关于更多的HTML以及CSS的缩写请查看:</h4>

<p class="btns-zone">直击官网文档</p>
<p class="download-a5">Download cheat sheet</p>
<p>特别声明:文中演示代码来自于官网API:http://docs.emmet.io/cheat-sheet/</p>
</div>

#none

2017年10月06日821 次浏览

随机

扫一扫
查看手机版