前端開發快速編寫HTML結構標籤之Emmet表達式

體驗

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

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

父子關係 >

div>ul>li

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

兄弟相鄰 +

div+p+bq

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

找父親 ^

div+div>p>span+em^bq

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

找任意數量的^運算符

div+div>p>span+em^^bq

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

乘法 *

ul>li*5

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

分組 ()

div>(hreader>ul>li*2>a)+footer>p

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

(div>dl>(dt+dd)*3)+footer>p

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

加 id 和 class 屬性

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

加自定義屬性

td[title="hello" colspan=3]

<td title="hello" colspan="3"></td>

注意：

您不必指定屬性值：td[colspan title] 會 <td colspan="" title=""> 在每個空屬性內使用製表符產生

您可以使用單引號或雙引號來引用屬性值。

如果值不包含空格，則無需引用它們：td[title=hello colspan=3]可以。

編號 $

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>

您可以$連續使用多個以零填充數字：

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 class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

要更改計數器的基本值，在$之後添加@N修飾符：

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

上述說的，一起使用：

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

文本 {}

a{Click Me}

<a href="">Click Me</a>

請注意：{text}被當做一個獨立的元素（例如div,p等等）來解析和使用，但是當寫在元素的右邊的時候有一個特殊的含義，舉個例子：a{click}和a>{click}將產生同樣的輸出結果，但是a{click}+b{here}和a>{click}+b{here}將會產生不同的結果，如下所示:

a{click}+b{here}
<a href="">click</a><b>here</b>

a>{click}+b{here}
<a href="">click<b>here</b></a>

在後面第二個例子中，<b> 標籤放置在 <a> 元素的裏面，這就是兩種情況的不同之處：當 {text} 寫在元素的右邊是不會更改父級上下文，這裏有一個更復雜的例子來顯示爲什麼這點很重要:

p>{Click }+a{here}+{ tocontinue}

<p>Click <a href="">here</a> to continue</p>

在這個例子中，要編寫Click here to continue 到 <p> 元素的內部，我們必須使用>運算符將文本移動到樹形結構p標籤的裏面，但是對於a元素來說，我們不能這麼做，因爲我們只需要帶有here文本的 <a> 元素，而不修改父級上下文。

爲了進行比較，這是不帶子運算符>的相同emmet縮寫：

p{Click }+a{here}+{ tocontinue}

<p>Click </p>
<a href="">here</a> tocontinue

縮寫注意

不能在元素和運算符之間使用空格，因爲空格是Emmet停止縮寫解析的停止符號。

錯誤添加空格：(header > ul.nav > li*5) + footer

隱式標籤名稱

在許多情況下，您可以跳過鍵入標籤名稱的操作，而Emmet會根據上下文選擇對應的標籤來代替。

例如，div.content 您可以簡單地將 .content，其編寫並擴展爲 <div class="content"></div> 。

1. 如果父級是塊級元素，則默認隱式標籤是div
2. 如果父級是行內元素，則默認隱式標籤是span
3. 如果父級是特殊層級元素，則默認隱式標籤是對應父級的子元素，例如:
4. li 爲 ul 和 ol
5. tr爲table，tbody，thead和tfoot
6. td 對於 tr
7. option 爲 select 和 optgroup

例子：

.wrap>.content       div.wrap>div.content

em>.info             em>span.info

ul>.item*3           ul>li.item*3  

table>#row$*4>[colspan=2]         table>tr#row$*4>td[colspan=2]

生成僞文本 Lorem ipsum

展開lorem或lipsum縮寫即可獲得

lorem200

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, accusamus. Alias, at ut. Impedit at numquam deserunt eum, dolorem provident voluptate facilis expedita, a ex illum inventore eaque enim perferendis reiciendis repellat non magni quam natus dignissimos optio! Doloribus modi incidunt commodi magnam ab, ad repellat dolorum accusantium nulla autem laboriosam eligendi deserunt suscipit dolorem reiciendis fuga praesentium blanditiis ipsam dolore corrupti eaque ex? Ratione error repudiandae sequi repellat similique eveniet! Commodi accusantium, harum quos quas quidem illo quibusdam? Facere odit, incidunt, inventore nesciunt quibusdam dolorum eos, iure quo maxime doloremque aliquam amet nihil officia architecto. Odit aut, consequuntur aspernatur sit repellendus nemo accusamus distinctio debitis voluptatum corporis error deserunt obcaecati velit dolore qui cupiditate nesciunt harum maxime voluptas accusantium, ipsam tempora quasi? Natus eius exercitationem debitis aspernatur aliquam aperiam a ipsam aliquid provident vitae totam, hic nobis! Voluptates tempore nam in incidunt illum placeat, quod quos ex atque deleniti cum distinctio, mollitia provident libero consectetur officia, vitae quasi ea ad at harum reprehenderit nesciunt dicta ipsam? Deserunt fugit sint excepturi nemo cumque quae ullam, totam aliquam, rerum vel placeat explicabo! Tempora ratione dolorem praesentium dolores eligendi tempore aut eos laudantium porro, voluptatem maiores ullam alias enim quos aliquam veritatis.

ul.generic-lsit>lorem10.item*4

<ul class="generic-lsit">
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, perferendis?</li>
    <li>Nostrum inventore culpa minus sapiente porro tempora cupiditate asperiores ipsam.</li>
    <li>Ad iste fugiat laborum rem quam aliquid dolor nobis dignissimos?</li>
    <li>Nisi odio, ex consequatur exercitationem perferendis eum alias cum illo.</li>
</ul>