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

1,915 Responses

  1. DichaelDax表示:

    В нашем мире, где диплом становится началом отличной карьеры в любом направлении, многие ищут максимально простой путь получения образования. Факт наличия официального документа об образовании трудно переоценить. Ведь именно он открывает двери перед людьми, стремящимися начать трудовую деятельность или учиться в ВУЗе.
    В данном контексте наша компания предлагает оперативно получить этот необходимый документ. Вы имеете возможность купить диплом нового или старого образца, и это будет отличным решением для всех, кто не смог завершить образование, утратил документ или желает исправить плохие оценки. Любой диплом изготавливается с особой аккуратностью, вниманием к мельчайшим нюансам, чтобы в итоге получился документ, 100% соответствующий оригиналу.
    Плюсы такого подхода состоят не только в том, что можно максимально быстро получить свой диплом. Весь процесс организован просто и легко, с профессиональной поддержкой. От выбора требуемого образца до точного заполнения персональной информации и доставки по стране — все будет находиться под абсолютным контролем наших специалистов.
    Для тех, кто ищет быстрый способ получения необходимого документа, наша компания предлагает выгодное решение. Купить диплом – это значит избежать длительного процесса обучения и сразу перейти к достижению своих целей, будь то поступление в ВУЗ или старт карьеры.

    https://diploman-russiyan.com

  2. Лучшая Букмекерская контора на просторах 1win

  3. Davidtes表示:

    price of lisinopril 30 mg cheapest price for lisinopril india lisinopril prinivil zestril

  4. WilliamRhype表示:

    https://nolvadex.life/# how to get nolvadex

  5. Топовая Букмекерская контора на просторах 1win

  6. 1win885piodo表示:

    Отличная Букмекерская контора, всем советую 1win

  7. RandallTaulp表示:

    lisinopril 40 mg for sale: lisinopril 60 mg daily – lisinopril 15mg

  8. Zencortex表示:

    I do like the way you have presented this issue and it does indeed supply me personally some fodder for consideration. Nonetheless, because of just what I have seen, I simply just trust when the feed-back pile on that men and women keep on issue and don’t embark on a soap box involving the news of the day. Yet, thank you for this outstanding piece and whilst I can not necessarily concur with this in totality, I respect your perspective.

  9. Davidtes表示:

    lisinopril 419 lisinopril 10 mg tablet price 40 mg lisinopril for sale

  10. Rattling excellent visual appeal on this web site, I’d value it 10 10.

  11. GichardPheve表示:

    В нашем мире, где диплом является началом отличной карьеры в любой области, многие пытаются найти максимально быстрый и простой путь получения образования. Наличие официального документа переоценить невозможно. Ведь диплом открывает двери перед каждым человеком, желающим начать трудовую деятельность или продолжить обучение в университете.
    В данном контексте мы предлагаем оперативно получить этот важный документ. Вы имеете возможность приобрести диплом старого или нового образца, что становится выгодным решением для человека, который не смог закончить обучение, потерял документ или хочет исправить свои оценки. дипломы производятся с особой тщательностью, вниманием ко всем нюансам, чтобы на выходе получился полностью оригинальный документ.
    Плюсы данного подхода заключаются не только в том, что можно максимально быстро получить диплом. Весь процесс организовывается удобно, с профессиональной поддержкой. От выбора необходимого образца до правильного заполнения личных данных и доставки в любое место России — все под полным контролем квалифицированных специалистов.
    Для тех, кто ищет быстрый способ получения необходимого документа, наша компания может предложить отличное решение. Купить диплом – значит избежать продолжительного обучения и сразу переходить к важным целям: к поступлению в ВУЗ или к началу успешной карьеры.

    https://diploman-russiyan.com

  12. Лучшая Букмекерская контора на просторах 1win

  13. 1win886piodo表示:

    Топовая Букмекерская контора, всем советую 1win

  14. Great site ! I recommend everyone to watch it!escort paris

  15. Michaelcew表示:

    http://mexicoph24.life/# mexico pharmacies prescription drugs

  16. Pedroereva表示:

    medication from mexico pharmacy: Online Pharmacies in Mexico – mexican mail order pharmacies

  17. 1win887piodo表示:

    Топовая Букмекерская контора, рекомендую 1win

  18. Marcelabelp表示:

    http://mexicoph24.life/# best mexican online pharmacies

  19. 1win888piodo表示:

    Надежная Букмекерская контора, рекомендую 1win

  20. Zrwpmu表示:

    cost nizoral 200mg – lotrisone cost sporanox 100 mg pill

  21. Лучшая Букмекерская контора 1win

  22. Rickysem表示:

    reputable mexican pharmacies online mexico pharmacy mexican pharmaceuticals online

  23. Рекомендую топовую Букмекерскую контору 1win

  24. Xmojxc表示:

    famciclovir uk – famciclovir sale valcivir 1000mg uk

  25. StephenDeery表示:

    Thanks for the auspicious writeup. It in reality used to be a entertainment account it. Glance complex to far added agreeable from you! By the way, how can we keep in touch?
    полумаска фильтрующая респиратор

  26. Irgmxj表示:

    cheap lamisil 250mg – terbinafine online order buy griseofulvin online cheap

  27. Отличный сайт! Всем рекомендую! земляные работы

  28. Uutdqx表示:

    semaglutide drug – purchase glucovance desmopressin uk

發佈留言

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