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,972 Responses

  1. Robertengep表示:

    https://mexstarpharma.com/# mexican border pharmacies shipping to usa

  2. Simplify your projects and boost productivity with easy-to-use project management software.

  3. Tpower Login表示:

    Very good article! We will be linking to this particularly great content on our site. Keep up the good writing.

  4. JeremyPsymn表示:

    http://mexstarpharma.com/# medication from mexico pharmacy

  5. Everything is very open with a very clear clarification of the issues. It was definitely informative. Your site is useful. Thanks for sharing.

  6. AnthonyPress表示:

    indian pharmacy online shopping pharmacy india buy prescription drugs from india

  7. Hermanswoff表示:

    reddit canadian pharmacy: onlinecanadianpharmacy 24 – online canadian pharmacy reviews

  8. That is a very good tip especially to those fresh to the blogosphere. Short but very precise info… Many thanks for sharing this one. A must read article!

  9. Robertengep表示:

    https://easyrxindia.shop/# п»їlegitimate online pharmacies india

  10. Very nice post. I certainly love this site. Thanks!

  11. This is a topic that’s near to my heart… Take care! Where are your contact details though?

  12. Pretty! This was an incredibly wonderful article. Many thanks for supplying these details.

  13. I love looking through a post that will make men and women think. Also, thanks for allowing for me to comment.

  14. Eugeneaftek表示:

    Tiny shards of plastic are increasingly infiltrating our brains, study says
    гей порно геей
    Human brain samples collected at autopsy in early 2024 contained more tiny shards of plastic than samples collected eight years prior, according to a preprint posted online in May. A preprint is a study which has not yet been peer-reviewed and published in a journal.

    “The concentrations we saw in the brain tissue of normal individuals, who had an average age of around 45 or 50 years old, were 4,800 micrograms per gram, or 0.5% by weight,” said lead study author Matthew Campen, a regents’ professor of pharmaceutical sciences at the University of New Mexico in Albuquerque.
    “Compared to autopsy brain samples from 2016, that’s about 50% higher,” Campen said. “That would mean that our brains today are 99.5% brain and the rest is plastic.”

    That increase, however, only shows exposure and does not provide information about brain damage, said Phoebe Stapleton, an associate professor of pharmacology and toxicology at Rutgers University in Piscataway, New Jersey, who was not involved in the preprint.

    “It is unclear if, in life, these particles are fluid, entering and leaving the brain, or if they collect in neurological tissues and promote disease,” she said in an email. “Further research is needed to understand how the particles may be interacting with the cells and if this has a toxicological consequence.”

    The brain samples contained 7% to 30% more tiny shards of plastic than samples from the cadavers’ kidneys and liver, according to the preprint.

    “Studies have found these plastics in the human heart, the great blood vessels, the lungs, the liver, the testes, the gastrointestinal tract and the placenta,” said pediatrician and biology professor Dr. Philip Landrigan, director of the Program for Global Public Health and the Common Good and the Global Observatory on Planetary Health at Boston College.

    “It’s important not to scare the hell out of people, because the science in this space is still evolving, and nobody in the year 2024 is going to live without plastic,” said Landrigan, who was not involved with the preprint.

  15. 1xbet_dqEt表示:

    Ставки на спорт с 1xbet: всегда уверенный выигрыш, бонусы и акции 1xbet: уникальные предложения для игроков, 1xbet: ваш путь к успешным ставкам, 1xbet: быстрые выплаты и мгновенные выигрыши, 1xbet – это мир возможностей для ставок, 1xbet – ваш гид в мире спортивных ставок, 1xbet ценит каждого клиента и предлагает первоклассное обслуживание, 1xbet радует своих клиентов высокими коэффициентами и шансами на победу, 1xbet: попробуй свою удачу и выиграй крупный джекпот, 1xbet: ваш надежный партнер в мире ставок, 1xbet предлагает удобный интерфейс и интуитивно понятную навигацию, 1xbet – легендарный букмекер с безупречной репутацией, 1xbet предоставляет возможность делать ставки на вашу любимую команду, 1xbet обеспечивает полную конфиденциальность и безопасность ваших данных, 1xbet предлагает актуальные ставки на спорт и киберспорт, 1xbet: мировой лидер в индустрии онлайн-ставок, 1xbet: ультрасовременные технологии и инновации, 1xbet: высокий уровень сервиса и профессионализм.
    1xbet program 1xbet program .

  16. Sv110表示:

    There is certainly a great deal to find out about this subject. I like all of the points you have made.

  17. Having read this I thought it was very enlightening. I appreciate you spending some time and energy to put this informative article together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile.

  18. google spam表示:

    That is a great tip especially to those fresh to the blogosphere. Brief but very precise information… Thank you for sharing this one. A must read article!

  19. Can’t wait to read more from you on this subject!프라그마틱

  20. bad medical表示:

    You are so interesting! I don’t think I have read a single thing like this before. So good to find somebody with genuine thoughts on this issue. Really.. thank you for starting this up. This site is something that’s needed on the web, someone with a little originality.

發佈留言

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