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

23,015 Responses

  1. HomerFaw表示:

    https://apotheekmax.com/# Online apotheek Nederland zonder recept

  2. Malcolmseern表示:

    Apotheek online bestellen Apotheek online bestellen Online apotheek Nederland zonder recept

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

  4. Rubentax表示:

    Нужны деньги? Выкупим ваши онколекарства!

    Остались неиспользованные онко лекарства после лечения? Не спешите их выбрасывать! Мы предлагаем выгодный и конфиденциальный выкуп онкопрепаратов, а также медикаментов и таблеток, по всей России через интернет.

    Продам ваши рецептурные препараты! Мы осуществляем скупку онко лекарств и других медикаментов.

    Как это работает?

    Выкуп напрямую: Мы покупаем лекарства непосредственно у вас, гарантируя конфиденциальность сделки.
    Онлайн-продажа: Просто оставьте заявку на нашем сайте, и наш специалист свяжется с вами для обсуждения деталей и оценки стоимости. Вы можете продать лекарства и препараты быстро и удобно! Те, кто продают онко лекарства, доверяют нам!
    Выгодные цены: Предлагаем конкурентоспособные цены на выкуп ваших лекарств.
    Если вы ищете надежный и быстрый способ продать онко лекарства онлайн и получить за них деньги, обращайтесь к нам! Мы поможем вам!
    https://telegra.ph/Prodat-neispolzovannye-onko-lekarstva-79969668120-VykupSkupka-medikamentov-tabletok-preparatov-cherez-internet-04-02
    Свяжитесь с нами по номеру +79969668120, чтобы узнать больше!

  5. PeterDak表示:

    Exposure to phthalates during pregnancy can affect a newborn’s brain development, study finds
    гей порно геей

    Phthalates — the synthetic chemicals used in everyday products for food packaging, personal care, toys and more — have been linked to abnormal neurological development in infants.

    Now, scientists may have discovered a biological pathway for how this phenomenon could occur. Researchers found that in utero exposure to phthalates is linked with altered metabolism of neurotransmitters and amino acids involved in brain maturation, according to a study published Wednesday in the journal Nature Communications.

    The report is the first to use untargeted metabolomics — the study of all small molecules or metabolites in a biological system — to connect a mother’s phthalate exposure to a newborn’s metabolites, and those metabolites to neurological development, said senior study author Dr. Donghai Liang via email.
    “This represents an important step forward in understanding how prenatal chemical exposures shape infant development at the molecular level,” added Liang, an associate professor of environmental health at Emory University’s Rollins School of Public Health in Atlanta.

    First introduced in the 1920s, phthalates are used to make plastics softer and more flexible, primarily in polyvinyl chloride (PVC) products such as vinyl flooring, medical devices, children’s toys, food packaging or shower curtains. The chemicals also help lubricate substances and carry fragrances in various personal care products including deodorant; nail polish; perfumes; hair gels, sprays or shampoos; soaps; and body lotions.

    Phthalates are also endocrine disruptors that have been linked to preterm birth, infant genital abnormalities, childhood obesity, asthma, cancer, cardiovascular issues, and low sperm count and testosterone in men.

    “We conducted this study because phthalates are everywhere in our daily lives,” Liang said, hence their nickname “everywhere chemicals.”

    Harming infant health
    The findings are based on mother-newborn pairs enrolled in the Atlanta African American Maternal-Child Cohort between 2016 and 2018. In urine samples collected from 216 mothers between eight weeks and 14 weeks of gestation at visit one and 145 participants between 24 and 30 weeks’ gestation at visit two, the authors measured eight phthalate metabolites. Participants were around age 24 on average, and their levels of some phthalate metabolites were higher than the average determined by the National Health and Nutrition Examination Survey.

    Within a day or two of birth, the authors collected the babies’ blood via a heel stick.

    The team found prenatal phthalate levels were associated with lower levels of tyrosine, an amino acid and precursor to the thyroid hormone thyroxine. Thyroxine was also abnormally low in those with in utero phthalate exposure, and low thyroxine has been previously associated with greater vulnerability to illness and neurodevelopmental issues in newborns, the authors said. Tyrosine is also a precursor to the neurotransmitters dopamine, norepinephrine and epinephrine, all of which partly contribute to the body’s fight-or-flight response. Low levels of these neurotransmitters can lead to various problems, including anxiety, depression and trouble focusing.

    Prenatal phthalate exposure was also linked with lower levels of the essential amino acid tryptophan, which converts into 5-hydroxytryptophan (or 5-HTP), which then turns into serotonin. Both 5-HTP and serotonin were also low. Serotonin has several critical roles in the body, including mood regulation, sleep, learning, memory, digestion and the body’s response to stress. Previous research has linked low serotonin with mood disorders such as depression and anxiety, sleep problems, and digestive issues.

  6. Malcolmseern表示:

    online apotheek de online drogist kortingscode Online apotheek Nederland met recept

  7. Derekgroum表示:

    Kamagra online bestellen: Kamagra Original – Kamagra Gel

  8. Michaeltor表示:

    Apoteket online: Apoteket online – Apotek hemleverans recept

  9. Malcolmseern表示:

    de online drogist kortingscode Beste online drogist Apotheek online bestellen

  10. HomerFaw表示:

    http://apotheekmax.com/# Betrouwbare online apotheek zonder recept

  11. Michaeltor表示:

    Apotek hemleverans idag: apotek online – Apoteket online

  12. Sakti111表示:

    Saved as a favorite, I really like your blog!

  13. JosephFluor表示:

    пояснения https://futbolka-skam.ru

  14. JosephFluor表示:

    Подробнее здесь https://futbolka-alt.ru

  15. JosephFluor表示:

    ссылка на сайт https://lirika-futbolka.ru

  16. HomerFaw表示:

    https://apotheekmax.com/# Online apotheek Nederland met recept

  17. Davidmeast表示:

    посетить веб-сайт https://obnal-futbolka.ru

  18. Davidmeast表示:

    перенаправляется сюда https://futbolka-obnal.ru

發佈回覆給「Malcolmseern」的留言 取消回覆

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