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

4,551 Responses

  1. I’d like to thank you for the efforts you’ve put in writing this website. I’m hoping to view the same high-grade content by you later on as well. In fact, your creative writing abilities has motivated me to get my own blog now 😉

  2. Отличный сайт! Рекомендую!взлом замков москва

  3. En guvenilir kumarhanede kazan?n Sweet bonanza

  4. facade tarot表示:

    Very good post. I’m dealing with some of these issues as well..

  5. Your style is very unique in comparison to other people I have read stuff from. Thank you for posting when you’ve got the opportunity, Guess I’ll just bookmark this blog.

  6. Danrcki表示:

    Привет, друзья!
    Где приобрести диплом специалиста?
    Мы изготавливаем дипломы любой профессии по приятным тарифам.
    asteroid-bowling.ru/index.html

  7. Seveceginiz bir kumarhane Sweet bonanza

  8. En guvenilir online casino Sweet bonanza

  9. Good post. I learn something new and challenging on sites I stumbleupon on a daily basis. It’s always exciting to read articles from other authors and use something from other websites.

  10. Your style is really unique in comparison to other folks I’ve read stuff from. Many thanks for posting when you’ve got the opportunity, Guess I will just bookmark this blog.

  11. I really love your blog.. Very nice colors & theme. Did you create this site yourself? Please reply back as I’m attempting to create my own personal site and would like to know where you got this from or just what the theme is named. Appreciate it!

  12. Отличный сайт! Рекомендую!взлом замков

  13. bestiptv1表示:

    Way cool! Some extremely valid points! I appreciate you writing this write-up and also the rest of the website is also very good.

  14. Kumar oynamak icin en iyi secim Sweet bonanza

  15. I seriously love your blog.. Great colors & theme. Did you create this site yourself? Please reply back as I’m attempting to create my own website and would love to know where you got this from or what the theme is called. Kudos.

  16. Having read this I believed it was very enlightening. I appreciate you finding the time and energy to put this information together. I once again find myself personally spending a lot of time both reading and posting comments. But so what, it was still worth it.

  17. Sizin icin harika bir kumarhane Sweet bonanza

  18. Отличный сайт! Рекомендую!https://openzamok.ru/взлом замков

  19. Very good article. I’m facing some of these issues as well..

  20. After looking over a few of the articles on your site, I truly appreciate your way of writing a blog. I book marked it to my bookmark webpage list and will be checking back soon. Please visit my web site too and let me know how you feel.

  21. Slot resmi表示:

    After I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and now every time a comment is added I receive four emails with the same comment. There has to be a way you are able to remove me from that service? Many thanks.

  22. Lhaneevige表示:

    It’s amazing in favor of me to have a website, which is good in favor of my experience. thanks admin
    регистрация казино либет

  23. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thanks

  24. Ewptio表示:

    buy calan – order tenoretic online cheap buy tenoretic no prescription

  25. Hello! I could have sworn I’ve been to this blog before but after looking at a few of the articles I realized it’s new to me. Nonetheless, I’m certainly delighted I came across it and I’ll be bookmarking it and checking back regularly.

  26. Dknruc表示:

    buy leflunomide 20mg without prescription – purchase alfacalcidol pill cartidin order

  27. Lhaneevige表示:

    That is very fascinating, You are an overly skilled blogger. I have joined your rss feed and look ahead to in the hunt for extra of your fantastic post. Additionally, I have shared your website in my social networks
    islamidusunce.net

  28. ngentot pepek表示:

    This is a topic that is near to my heart… Best wishes! Where are your contact details though?

  29. En iyi kumarhaneyi tavsiye ederim Sweet bonanza

  30. Jamesbut表示:

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

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

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

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

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

發佈留言

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