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

7,727 Responses

  1. StephenDeery表示:

    Hello Dear, are you in fact visiting this website regularly, if so afterward you will absolutely take fastidious knowledge.

    http://www.gasts.de/modules.php?name=Your_Account&op=userinfo&username=uvicoВ 
    lovisribca.ru/search.phpВ 
    newspromworld.ru/page/2В 
    forexsnews.ru/page/3В 
    textualheritage.org/en/the-materials-of-the-conference-el-manusctipt-2014/82.htmlВ 

  2. Eu recomendo o melhor cassino Blaze

  3. Thank you for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our local library but I think I learned more from this post. I’m very glad to see such fantastic information being shared freely out there.

  4. I am only commenting to make you be aware of what a magnificent encounter my wife’s child gained reading through your webblog. She mastered a good number of details, not to mention how it is like to possess a marvelous giving nature to get certain people without problems fully grasp specified tricky things. You undoubtedly exceeded people’s expectations. Many thanks for offering these good, healthy, informative and in addition unique thoughts on the topic to Mary.

  5. dog houses need not be elegant, it only needs to be a design that makes it easier for us to clean..

  6. I’ve bookmarked your weblog due to the fact I genuinely like it.

  7. Some really nice stuff on this internet site , I enjoy it.

  8. I’d must consult you here. Which isn’t some thing Which i do! I love to reading an article that may get people to believe. Also, appreciate your permitting me to comment!

  9. One more issue is video games are typically serious as the name indicated with the main focus on studying rather than enjoyment. Although, it has an entertainment feature to keep your young ones engaged, every single game is generally designed to work towards a specific experience or programs, such as math or research. Thanks for your publication.

  10. Отличный сайт! Всем рекомендую!Ремонт холодильников

  11. I’ve also been meditating on the identical idea personally lately. Happy to see somebody on the same wavelength! Nice article.

  12. In my opinion, when the ratio concerning daily life being a lever, values is its own “point”, while using proper rocker, it might become a amazing someone.

  13. Bnixjk表示:

    buy zovirax paypal – order duphaston without prescription dydrogesterone price

  14. Terence表示:

    Howdy! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying
    to get my blog to rank for some targeted keywords but I’m not seeing very good gains.
    If you know of any please share. Thanks! You can read similar article here:
    Good escape room

  15. O lugar perfeito para jogar jogos de cassino Blaze

  16. Seu cassino online favorito Blaze

  17. Eu recomendo o cassino mais popular Blaze

  18. GichardPheve表示:

    Hello, I think your website might be having browser compatibility issues. When I look at your blog in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, superb blog!
    tadalafil cialis 5mg preco

  19. Jogue com prazer neste cassino Blaze

  20. My husband and i felt now joyful Ervin could finish up his inquiry with the precious recommendations he was given in your web pages. It’s not at all simplistic just to happen to be making a gift of methods that many people may have been trying to sell. Therefore we understand we need the writer to give thanks to for that. These explanations you made, the easy website menu, the relationships you will make it possible to foster – it’s got all astounding, and it’s really leading our son and the family consider that that subject matter is thrilling, and that is extremely serious. Thanks for all the pieces!

  21. Hi. I want to ask a little something…is the following a wordpress web log as we are planning to be switching over to WP. Moreover did you make this template yourself? Thanks a lot.

  22. I’m impressed, I have to admit. Genuinely rarely will i encounter a blog that’s both educative and entertaining, and let me tell you, you’ve hit the nail to the head. Your notion is outstanding; the problem is something which not enough persons are speaking intelligently about. I’m happy i came across this in my search for some thing about it.

  23. Hi there, just became alert to your blog through Google, and found that it’s really informative. I am gonna watch out for brussels. I’ll be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!

  24. You have brought up a very superb points , thankyou for the post.

  25. I really like seeing websites that understand the value of providing a quality useful resource for free. I wish I had your blogging style.

  26. This is an excellent article and I totally understand where your coming from in the third section. Perfect read, I’ll regularly follow the other reads.

  27. I’m really enjoying the theme/design of your web site. Do you ever run into any web browser compatibility issues? A number of my blog audience have complained about my website not operating correctly in Explorer but looks great in Firefox. Do you have any advice to help fix this problem?

  28. I have realized that in unwanted cameras, extraordinary receptors help to focus automatically. The actual sensors associated with some surveillance cameras change in contrast, while others start using a beam associated with infra-red (IR) light, especially in low lighting. Higher specs cameras from time to time use a mix of both systems and may have Face Priority AF where the digital camera can ‘See’ any face while keeping your focus only in that. Thank you for sharing your thinking on this blog.

  29. when taking your watch for a repair, always look for a reputable and experienced watch repairman“

發佈留言

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