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

18,797 Responses

  1. Joshuareoto表示:

    buying prescription drugs in mexico online https://certpharm.com/# Best Mexican pharmacy online

  2. Great postings, Thanks a lot!
    bwin online casino bonus https://casinosonlinenew.com/poker-online-real-money/ bank account for online casino

  3. AnthonyNum表示:

    mexican pharmacy: Legit online Mexican pharmacy – mexican pharmacy online

  4. AnthonyNum表示:

    Best Mexican pharmacy online: mexican pharmacy online – Legit online Mexican pharmacy

  5. DonaldTyclE表示:

    Velocidad critica
    Aparatos de balanceo: esencial para el rendimiento fluido y efectivo de las dispositivos.

    En el entorno de la ciencia avanzada, donde la rendimiento y la seguridad del sistema son de alta trascendencia, los dispositivos de calibración tienen un función fundamental. Estos aparatos dedicados están desarrollados para ajustar y asegurar componentes giratorias, ya sea en dispositivos manufacturera, automóviles de movilidad o incluso en dispositivos domésticos.

    Para los especialistas en soporte de aparatos y los ingenieros, utilizar con dispositivos de calibración es crucial para asegurar el funcionamiento uniforme y seguro de cualquier dispositivo giratorio. Gracias a estas herramientas innovadoras sofisticadas, es posible minimizar considerablemente las vibraciones, el estruendo y la carga sobre los cojinetes, extendiendo la longevidad de componentes costosos.

    De igual manera relevante es el tarea que tienen los equipos de calibración en la asistencia al usuario. El asistencia especializado y el soporte regular usando estos aparatos habilitan ofrecer asistencias de gran nivel, incrementando la satisfacción de los usuarios.

    Para los dueños de emprendimientos, la contribución en equipos de ajuste y medidores puede ser esencial para mejorar la rendimiento y desempeño de sus dispositivos. Esto es principalmente importante para los empresarios que gestionan pequeñas y medianas organizaciones, donde cada detalle vale.

    Además, los equipos de balanceo tienen una amplia utilización en el área de la protección y el supervisión de nivel. Permiten localizar probables fallos, reduciendo arreglos elevadas y daños a los equipos. Más aún, los datos recopilados de estos aparatos pueden utilizarse para mejorar procedimientos y mejorar la presencia en buscadores de búsqueda.

    Las zonas de implementación de los equipos de ajuste cubren numerosas industrias, desde la producción de bicicletas hasta el supervisión ambiental. No interesa si se habla de importantes fabricaciones productivas o reducidos locales caseros, los dispositivos de calibración son fundamentales para garantizar un funcionamiento productivo y sin presencia de paradas.

  6. Whoa tons of terrific facts!
    mejor app casino online https://findscasino.info/mbl-betting/ online casino mit 10 euro startguthaben

  7. JamesFrito表示:

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

  8. Nicely put. Cheers.
    riverboat casino online https://casinonair.com/new-jersey-online-casinos/ astropay card casinos online

  9. CalvinRhymn表示:

    п»їbest mexican online pharmacies: mexican pharmacy online – Cert Pharm

  10. LarrykeW表示:

    Legit online Mexican pharmacy Mexican Cert Pharm Cert Pharm

  11. Colinputty表示:

    ?? Ваша экосистема Apple — выгодно и без хлопот!
    iPhone 16 Pro Max со скидкой 20% ?? + MacBook M4 в рассрочку 0% ?? + Apple Watch Ultra 2025 в подарок ??.
    ? Оригинал с гарантией. ? Доставка за 1 день. ? Акции до -40% только в Vodka_Online.
    Успейте — техника Apple улетает как горячие пирожки! ??
    Прочитать подробнее и купить айфон:https://telegra.ph/Apple-Watch-SE-2025-luchshaya-cena-v-RF-03-02
    #купить_iPhone_16_Pro_Max #рассрочка_на_MacBook #Apple_Watch_2025_подарок #скидки_Apple_РФ #Telegram_магазин_гаджетов.

  12. Joshuareoto表示:

    pharmacies in mexico that ship to usa https://certpharm.com/# Best Mexican pharmacy online

  13. AnthonyNum表示:

    mexican pharmacy: mexico drug stores pharmacies – mexican pharmacy online

  14. LarrykeW表示:

    mexican pharmacy online Legit online Mexican pharmacy Mexican Cert Pharm

  15. Thanks. Ample facts.
    free online virtual casino https://combatcasino.info/review-ducky-luck/ online casino western union

  16. You should take part in a contest for one of the best blogs on the web. I will recommend this site!

  17. Nicely put, With thanks!
    cool cat online casino instant play https://findscasino.info/casinos/ goldfish casino slot game online

  18. Joshuareoto表示:

    best online pharmacies in mexico https://certpharm.com/# mexican pharmacy online

  19. CalvinRhymn表示:

    mexican pharmaceuticals online: Mexican Cert Pharm – mexican pharmacy online

  20. AnthonyNum表示:

    Mexican Cert Pharm: mexican pharmacy – mexican pharmacy

  21. LarrykeW表示:

    Best Mexican pharmacy online mexican pharmacy online mexican pharmacy

  22. Joshuareoto表示:

    reputable mexican pharmacies online http://certpharm.com/# mexican online pharmacies prescription drugs

  23. Rodneytah表示:

    http://certpharm.com/# mexican pharmacy online

發佈留言

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