首頁 > 開發者 > 網站開發

Emmet最全提示說明

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前一篇文章簡單了說明了Emmet的使用:Emmet相關使用

今天我就將關於subline中Emmet外掛程式的snippets.json檔案進行詳細說明,

在snippets.json文檔中,我們可以看到Emmet可以支援多種文檔格式的文法提示

如:variables,css,html,xml,xsl,haml,scss,sass等,只要裝了Emmet外掛程式,我們就可以利用Emmet的簡潔高效的寫法來編寫自己的html文檔.

下面就其中的html來進行說明

1.輸入 !!!  ,會被擴充為

 <!doctype html>
2.輸入!!!4t,會被擴充為 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3.輸入!!!4s,會被擴充為 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4.輸入!!!xt,會被擴充為 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5.輸入!!!xs,會被擴充為 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

6..輸入!!!xxs,會被擴充為

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
7.輸入c,會被擴充為 

<!--  -->
8.輸入cc:ie6,會被擴充為 

<!--[if lte IE 6]>        <![endif]-->
9.輸入cc:ie,會被擴充為 
<!--[if IE]>        <![endif]-->
10.輸入cc:noie,會被擴充為 

<!--[if !IE]><!-->        <!--<![endif]-->
11.輸入!或者html:5,會被擴充為 

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body></body></html>
12.輸入a,會被擴充為 

<a href=""></a>
13.輸入a:link,會被擴充為 

<a href="http://"></a>
14.輸入a:mail,會被擴充為 

<a href="mailto:"></a>
15.輸入abbr,會被擴充為 

<abbr title=""></abbr>
16.輸入acronym(h5廢棄),會被擴充為 

<acronym title=""></acronym>
17.輸入base,會被擴充為 

<base href=""/>
18.輸入col,會被擴充為 

<col/>
19.輸入link:css,會被擴充為 

<link rel="stylesheet" href="style.css"/>
20.輸入link:print,會被擴充為 

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

21.輸入link:favicon,會被擴充為

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

22.輸入link:touch,會被擴充為<

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

23.輸入style,會被擴充為

<style></style>

24.輸入script:src,會被擴充為

<script src=""></script>

25.輸入img,會被擴充為

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

26.輸入embed,會被擴充為

<embed src="" type=""/>

27.輸入object,會被擴充為

<object data="" type=""></object>

28.輸入param,會被擴充為

<param name="" value=""/>

29.輸入area,會被擴充為

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

30.輸入area:d,會被擴充為

<area shape="default" href="" alt=""/>

31.輸入area:c,會被擴充為

<area shape="circle" coords="" href="" alt=""/>

32.輸入area:r,會被擴充為

<area shape="rect" coords="" href="" alt=""/>

33.輸入form:get,會被擴充為

<form action="" method="get"></form>

34.輸入form:post,會被擴充為

<form action="" method="post"></form>

35.輸入input:hidden,會被擴充為

<input name="" type="hidden"/>

36.輸入select:disabled,會被擴充為

<select name="" id="" disabled=""></select>

37.輸入menu:context,會被擴充為

<menu type="context"></menu>

38.輸入html:xml,會被擴充為

<html xmlns="http://www.w3.org/1999/xhtml"></html>

然後,還有很多簡寫的html元素縮寫,我就不一一列舉了,下面:

"bq": "blockquote",
"acr": "acronym",
"fig": "figure",
"figc": "figcaption",
"ifr": "iframe",
"emb": "embed",
"obj": "object",
"src": "source",
"cap": "caption",
"colg": "colgroup",
"fst": "fieldset",
"fst:d": "fieldset[disabled]",
"btn": "button",
"btn:b": "button[type=button]",
"btn:r": "button[type=reset]",
"btn:s": "button[type=submit]",
"btn:d": "button[disabled]",
"optg": "optgroup",
"opt": "option",
"tarea": "textarea",
"leg": "legend",
"sect": "section",
"art": "article",
"hdr": "header",
"ftr": "footer",
"adr": "address",
"dlg": "dialog",
"str": "strong",
"prog": "progress",
"fset": "fieldset",
"fset:d": "fieldset[disabled]",
"datag": "datagrid",
"datal": "datalist",
"kg": "keygen",
"out": "output",
"det": "details",
"cmd": "command",
"doc": "html>(head>meta[charset=UTF-8]+title{${1:Document}})+body",
"doc4": "html>(head>meta[http-equiv=\"Content-Type\" content=\"text/html;charset=${charset}\"]+title{${1:Document}})+body",


"html:4t":  "!!!4t+doc4[lang=${lang}]",
"html:4s":  "!!!4s+doc4[lang=${lang}]",
"html:xt":  "!!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]",
"html:xs":  "!!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]",
"html:xxs": "!!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]",
"html:5":   "!!!+doc[lang=${lang}]",


"ol+": "ol>li",
"ul+": "ul>li",
"dl+": "dl>dt+dd",
"map+": "map>area",
"table+": "table>tr>td",
"colgroup+": "colgroup>col",
"colg+": "colgroup>col",
"tr+": "tr>td",
"select+": "select>option",
"optgroup+": "optgroup>option",
"optg+": "optgroup>option"


如果對snippets.json詳細內容感興趣,或者想自己自訂擴充Ememt用法,可以下載該檔案並去Ememt官方網站上瞭解.











本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More