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

  1. Thanks a lot for this particular tips I has been exploring all Google to discover it!

  2. You lost me personally, friend. What i’m stating is, I imagine I recieve what youre saying. I’m sure what you’re saying, however you simply appear to have forgotten that could be other folks within the globe who view this issue for what it truly is and may even perhaps not think you. You will be switching away much people who appeared to be lovers of your respective website.

  3. Woah! I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and visual appeal. I must say you’ve done a superb job with this. In addition, the blog loads very quick for me on Chrome. Outstanding Blog!

  4. Giamatti, while scenery chewing with the best, can graciously be referred to as giving a “cameo” in the film considering his very limited screen time.

  5. I’m a blog crazed person and i love to read cool blog like yours.:`*’”

  6. well, earning money is a bit tricky and hard sometimes. you really got to be very creative if you want to earn more,.

  7. Hiya, I am really glad I’ve found this information. Nowadays bloggers publish only about gossips and net and this is actually irritating. A good blog with interesting content, this is what I need. Thanks for keeping this website, I’ll be visiting it. Do you do newsletters? Cant find it.

  8. This web site may be a walk-through it really is the knowledge you wished in regards to this and didn’t know who need to. Glimpse here, and you’ll certainly discover it.

  9. I think this is among the most vital info for me. And i’m satisfied studying your article. However should commentary on few normal things, The website taste is ideal, the articles is in reality excellent . Excellent activity, cheers.

  10. This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your excellent post. Also, I have shared your site in my social networks!

  11. The next occasion I read a blog, Hopefully that it doesnt disappoint me just as much as this one. Get real, I know it was my replacement for read, but I actually thought youd have some thing fascinating to mention. All I hear can be a number of whining about something you could fix if you ever werent too busy searching for attention.

  12. gassafe表示:

    What your declaring is entirely genuine. I know that everyone need to say the exact same factor, but I just believe that you put it in a way that all of us can comprehend. I also enjoy the photographs you set in right here. They in shape so well with what youre trying to say. Im sure youll achieve so numerous men and women with what youve got to say.

  13. You made some decent points there. I seemed on the internet for the problem and found most people will associate with with your website.

  14. There are certainly a lot of details prefer that to consider. That is a wonderful specify talk about. I offer the thoughts above as general inspiration but clearly you can find questions like the one you raise up the location where the biggest thing will likely be doing work in honest great faith. I don?t know if recommendations have emerged around such things as that, but More than likely that your job is clearly recognized as a fair game. Both youngsters have the impact of just a moment’s pleasure, through out their lives.

  15. Great site. A lot of helpful info here. I¡¯m sending it to some pals ans additionally sharing in delicious. And obviously, thank you on your sweat!

  16. oh well, online promotion also takes a lot of work just like offline promotion of products and services“

  17. Greetings, May I grab your page picture and implement it on my own blog page?

  18. I would like to add if you do not now have an insurance policy or you do not belong to any group insurance, you could possibly well make use of seeking the aid of a health insurance broker. Self-employed or individuals with medical conditions normally seek the help of an health insurance broker. Thanks for your post.

  19. “Xanax (Alprazolam) is used to treat anxiety disorders and panic attacks. Alprazolam is in a class of “

  20. Hello! I merely would choose to make a enormous thumbs up for that excellent information you may have here for this post. I’ll be returning to your blog for much more soon.

  21. Hi! Someone in my Facebook group shared this site with us so I came to take a look. I’m definitely enjoying the information. I’m bookmarking and will be tweeting this to my followers! Terrific blog and fantastic style and design.

  22. I was suggested this web site via my cousin. I’m not certain whether this submit is written through him as no one else realize such targeted about my problem. You are incredible! Thank you!

  23. Wow, wonderful blog layout! How long have you ever been blogging for? you made running a blog glance easy. The full look of your website is great, let alone the content!

  24. Hey I am browsing your article on my Blackberry and I was imagining how cool it will be on my soon to be purchased ipad. Fleeting thought…. Anyway thanks!

  25. One of the more impressive blogs Ive seen. Thanks so much for keeping the internet classy for a change. Youve got style, class, bravado. I mean it. Please keep it up because without the internet is definitely lacking in intelligence

  26. Thank you for sharing superb informations. Your site is so cool. I am impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for more articles. You, my pal, ROCK! I found just the info I already searched everywhere and just could not come across. What a perfect website.

  27. art posters are great for room decoration too, i use art posters on my bedroom as decorations::

  28. I haven’t checked in here for some time as I thought it was getting boring, but the last few posts are great quality so I guess I’ll add you back to my daily bloglist. You deserve it friend

  29. Awesome! I appreciate your blog post to this matter. It has been useful. my blog: how to make a girl fall in love

發佈留言

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