Emmet 介紹 – 縮寫篇

縮寫這樣的編輯方式是Emmet的核心功能,可以在輸入簡短的代碼後轉換成結構複雜的HTML,而且使用方式跟使用CSS的選取器雷同,所以非常易於使用。例如:

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>(header>ul>li*2>a)+footer>p
------

<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)+footer>p
------

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

項目編號:$

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>
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>
p>{Click }+a{here}+{ to continue}
------

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

ID and 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 world!" colspan=3]
------

<td title="Hello world!" colspan="3"></td>

You may also like...

7,776 Responses

  1. En iyi promosyonlara sahip casinolar Sweet bonanza

  2. En iyi cevrimici kumarhaneyi kesfedin Sweet bonanza

  3. hishypesports表示:

    I was able to find good information from your content.

  4. The next time I read a blog, I hope that it won’t disappoint me as much as this particular one. After all, Yes, it was my choice to read, however I truly thought you would have something interesting to talk about. All I hear is a bunch of whining about something you could possibly fix if you weren’t too busy searching for attention.

  5. Guvenilir bir kumarhanede sans?n?z Sweet bonanza

  6. iwin68表示:

    You should take part in a contest for one of the most useful sites online. I most certainly will recommend this blog!

  7. Bu kumarhanedeki en iyi oyunlar Sweet bonanza

  8. Gsalrq表示:

    order gasex sale – ashwagandha pills buy generic diabecon

  9. ngentot表示:

    Very good write-up. I definitely appreciate this website. Continue the good work!

  10. Great site! I recommend to everyone!web design in fort smith

  11. kontol besar表示:

    Great information. Lucky me I recently found your blog by chance (stumbleupon). I’ve book marked it for later!

  12. Kazanmak icin harika bir kumarhane Sweet bonanza

  13. sex表示:

    I blog quite often and I really appreciate your information. This great article has really peaked my interest. I’m going to bookmark your blog and keep checking for new information about once a week. I opted in for your Feed as well.

  14. link bokep表示:

    Hello! I simply would like to give you a huge thumbs up for your great info you have right here on this post. I’ll be returning to your blog for more soon.

  15. sex表示:

    Having read this I thought it was extremely enlightening. I appreciate you finding the time and energy to put this short article together. I once again find myself spending way too much time both reading and commenting. But so what, it was still worthwhile!

  16. Sizin icin en iyi online casino Sweet bonanza

  17. Spot on with this write-up, I absolutely think this amazing site needs far more attention. I’ll probably be back again to see more, thanks for the advice!

  18. En iyi kumarhaneyi tavsiye ederim Sweet bonanza

  19. logo design表示:

    Hello there! I could have sworn I’ve visited this blog before but after going through many of the posts I realized it’s new to me. Anyhow, I’m certainly pleased I found it and I’ll be book-marking it and checking back often!

  20. Guvenilir bir kumarhanede sans?n?z Sweet bonanza

  21. Puravive表示:

    Absolutely indited subject matter, Really enjoyed studying.

  22. AI for Kids表示:

    I could not refrain from commenting. Well written.

  23. JosephAerox表示:

    Военный адвокат Запорожье. Бесплатная консультация
    адвокат по вопросам ТЦК Запорожье
    — это опытный специалист имеющий высшее юридическое образование, сдавший квалификационный государственный экзамен на право осуществления адвокатской деятельностью и специализирующийся в основном на военных делах
    Вся правовая помощь военного адвоката осуществляется в индивидуальном порядке, грамотно, четко и в соответствии с действующими нормативно-правовыми актами.

    Мы как военные юристы действуем не против органов Украины или министерства обороны, мы действуем во благо Украины — наших защитников и граждан Украины, которые попали в тяжелую жизненную ситуацию связанную с незнанием военного и действующего законодательства.

    Поскольку, проявив патриотизм и чувство гражданской ответственности – став на защиту суверенитета страны, граждане участвующие и помогавшие в обороне после, становятся никому не нужными, особенно если военнослужащий стал инвалидом, потерял часть тела или конечность, и не может самостоятельно защитить свои права. Именно в таких ситуациях мы как военные адвокаты приходим на помощь, и добиваемся в установленном законом порядке справедливости, необходимых выплат, установление статуса, оформление пенсий, льгот и т.п.

    Тоже касается, и получение отсрочки от мобилизации, когда например, безосновательно призывают сына у которого отец инвалид 2 группы, или мать прикованная из-за тяжелой болезни к постели, и требующая постороннего ухода. Это же относится и к военнослужащим, рапорта которых не регистрируются в канцелярии воинской части и полностью игнорируются, под прикрытием суеты боевых действий..

    Именно в таких ситуациях, мы приходим на помощь и с помощью ЗАКОННЫХ методов правовой защиты, используя свой опыт полученный при ведении аналогичных военных дел добиваемся справедливости.

  24. Bu kumarhanedeki en iyi oyunlar Sweet bonanza

  25. Guvenilir bir kumarhanede oynay?n Sweet bonanza

  26. Jampmi表示:

    buy tenormin 100mg online – buy atenolol paypal order carvedilol 25mg pills

  27. You have brought up a very fantastic points, thankyou for the post.

  28. Excellent post. I’m dealing with a few of these issues as well..

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。