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

5,985 Responses

  1. College of Pittsburgh Press.

  2. Post w​as cre᠎ated  wi᠎th G​SA Con​tent G᠎en er at or D emover sion.

  3. Museum of American Finance occupied the former banking hall from 2007 to 2018; it was replaced by Will & Wall, a multi-function event venue.

  4. Oh my goodness! Amazing article dude! Thank you, However I am experiencing problems with your RSS. I don’t know the reason why I am unable to subscribe to it. Is there anyone else getting the same RSS problems? Anybody who knows the solution can you kindly respond? Thanx!

  5. Shareholders not directly own the belongings of the fund and are entitled to a share of the earnings, equivalent to curiosity or dividends, and would be entitled to any residual value if the fund undergoes liquidation.

  6. Taking a look at how a lot modern CEOs receives a commission, you might imagine that they get to resolve their very own salary.

  7. Qatar Petroleum (December 26, 2019).

  8. Aaronwag表示:

    заказ номера на автомобиль https://dublikaty-gosnomer77.ru/

  9. Indonesia Sharia Stock Index (ISSI), An index that measures the stock price performance of all listed stocks in Major Board and Improvement Board of the IDX that included on Sharia Securities Checklist issued by the Monetary Providers Authority.

  10. Oh my goodness! Incredible article dude! Thank you, However I am having troubles with your RSS. I don’t understand why I cannot join it. Is there anybody else having identical RSS issues? Anyone who knows the answer can you kindly respond? Thanx.

  11. Donaldlib表示:

    строительство домов под ключ https://spbstroymax.ru/

  12. This site was… how do you say it? Relevant!! Finally I’ve found something which helped me. Thanks a lot.

  13. winbox88表示:

    An interesting discussion is definitely worth comment. I think that you ought to write more on this topic, it might not be a taboo matter but typically people don’t discuss such issues. To the next! Kind regards.

  14. Профессиональный сервисный центр по ремонту сотовых телефонов, смартфонов и мобильных устройств.
    Мы предлагаем: ремонт смартфонов
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  15. Very good write-up. I certainly love this site. Thanks!

  16. Отличный выбор для фитнеса дома, для достижения желаемых результатов.
    Spirit Fitness – залог успешного тренировочного процесса, который оценят даже самые требовательные спортсмены.
    Уникальные характеристики Spirit Fitness, для тренировки с комфортом и эффективностью.
    Spirit Fitness – ваш верный спутник в спорте, который будет радовать вас каждый день.

    Почувствуйте силу и энергию тренажеров Spirit Fitness, для достижения идеальной формы.
    Фитнес-тренажеры Spirit Fitness – ваш выбор для здоровья, которые подарят вам радость от движения.
    Тренируйтесь с удовольствием на тренажерах Spirit Fitness, для активных и здоровых людей.
    Spirit Fitness – это забота о вашем здоровье, для достижения физического совершенства.

    Spirit Fitness – для вашего фитнеса, для занятий на высшем уровне.
    Spirit Fitness – лучший помощник в тренировке, которые подарят вам радость от физических упражнений.
    Spirit Fitness – ваш персональный тренер в доме, который поможет вам формировать красивое тело.
    Осуществите свои фитнес-мечты с Spirit Fitness, который сделает вас сильнее и здоровее.
    купить тренажер для дома https://trenazhery-spirit-fitness.ks.ua/ .

  17. Keep track of deductible items like mortgage interest, charitable contributions, unreimbursed job expenses, expenses related to a home business, and student loan interest.

  18. The customer receives the notification on their smartphone, letting them know a promotion or discount has been delivered directly to their device.

  19. What is Dynamic Asset Allocation Strategy?

  20. I’m very pleased to discover this website. I want to to thank you for ones time just for this fantastic read!! I definitely appreciated every bit of it and i also have you bookmarked to look at new stuff on your blog.

  21. RIM soon began to introduce BlackBerry units for the patron market as well, beginning with the BlackBerry Pearl 8100-the primary BlackBerry telephone to include multimedia features equivalent to a digicam.

  22. You ought to be a part of a contest for one of the highest quality blogs on the net. I will recommend this site!

發佈留言

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