說一個Sublime Text 2插件、emmet（原名：zen Coding)

時間 2019-11-26

標籤一個 sublime text 插件 emmet 原名 zen coding 欄目 HTML 简体版

原文原文鏈接

工具/原料

sublime Text 2html
安裝emmet插件web

方法/步驟

生成html文檔初始結構：工具

!<tab>測試

<!doctype html>ui

<html lang="en">spa

<head>插件

       <meta charset="UTF-8">orm

       <title>Document</title>xml

</head>htm

<body></body>

</html>

html:5<tab>

<!doctype html>

<html lang="en">

<head>

       <meta charset="UTF-8">

       <title>Document</title>

</head>

<body></body>

</html>

html:xs<tab>

<!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:4s<tab>

<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>
生成帶有id,class的標籤：

Emmet默認標籤是div

#id<tab>

     <div id="id"></div>

p#id<tab>

      <p id="id"></p>

h1#id<tab>

     <h1 id="id"></h1>

span#id<tab>

     <span id="id"></span>

.class<tab>

     <div class="class"></div>

p.class<tab>

     <p class="class"></p>

h1.class<tab>

    <h1 class="class"></h1>

span.class<tab>

     <span class="class"></span>

輸入多個class 添加兩個.class1.class2

.class1.class2<tab>

    <div class="class1 class2"></div>
語法：

語法：

>：生成後輩

div>span>p>h1 <tab>

<div>

       <span>

              <p>

                     <h1></h1>

              </p>

       </span>

</div>

+：生成同輩

div+span+p+h1 <tab>

<div></div>

<span></span>

<p></p>

<h1></h1>

^：生產叔輩

div>span>p^h1<tab>

<div>

       <span>

              <p></p>

       </span>

       <h1></h1>

</div>

*：生成重複多分

ul>li*3 <tab>

<ul>

       <li></li>

       <li></li>

       <li></li>

</ul>

（）：生成分組

ul>(li.li_1*3)+(li.li_2*3)<tab>

<ul>

       <li class="li_1"></li>

       <li class="li_1"></li>

       <li class="li_1"></li>



       <li class="li_2"></li>

       <li class="li_2"></li>

       <li class="li_2"></li>

</ul>

[attr]:生成屬性

a[href=index.html title=index]<tab>

<a href="index.html" title="index"></a>input[type=button]

input[type=submit name=submit]<tab>

<input type="submit" name="submit">

$：生成編號 $的個數就是數字的個數 @指定開始的數字 @–倒序

ul>li.li_$*3<tab>

<ul>

       <li class="li_1"></li>

       <li class="li_2"></li>

       <li class="li_3"></li>

</ul>

ul>li.li_$@0*3，

<ul>

       <li class="li_0"></li>

       <li class="li_1"></li>

       <li class="li_2"></li>

</ul>

ul>li.li_$@-*3

<ul>

       <li class="li_3"></li>

       <li class="li_2"></li>

       <li class="li_1"></li>

</ul>

{}:生成內容

p{$}*3<tab>

<p>1</p>

<p>2</p>

<p>3</p>

a[href=index.html]{click}+a[href=test.html]{mouseover}<tab>

<a href="index.html">click</a>

<a href="test.html">mouseover</a>

高級：

Lorem*: 生成測試文本，*表示0-無限個默認30個單詞

p>lorem2<tab>

<p>Lorem ipsum.</p>

p>lorem4<tab>

<p>Lorem ipsum dolor sit.</p>

p>lorem6<tab>

<p>Lorem ipsum dolor sit amet, consectetur.</p>

p>lorem<tab>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, delectus nostrum pariatur accusamus necessitatibus maiores ut natus id sit ab vel assumenda ratione harum quas adipisci eveniet temporibus praesentium ducimus!</p>

套接做用

<ul>

       <li></li>

       <li></li>

       <li></li>

</ul>

全選後，ctrl+shirt+g,輸入div.demo1>h1{test1}+div.test2<tab>

<div class="demo1">

       <h1>test1</h1>

       <div class="test2">

              <ul>

                     <li></li>

                     <li></li>

                     <li></li>

              </ul>

       </div>

</div>

文本轉換成html標籤

1.小學生

2.中學生

3.大學生

4.研究生

5.博士生

全選後：Ctrl+shift+g 輸入:ul>li*>a<tab>

<ul>

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

去除全部序號

ul>li*>a|t<tab>

<ul>

       <li><a href="">小學生</a></li>

       <li><a href="">中學生</a></li>

       <li><a href="">大學生</a></li>

       <li><a href="">研究生</a></li>

       <li><a href="">博士生</a></li>

</ul>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。