【DAY3】好Emmet，不用嗎？

2018鐵人賽

JasonYang

團隊Lorem100+tab

2017-12-22 18:58:46

3446 瀏覽

分享至

Emmet的介紹與使用～好Emmet，不用嗎？

前一篇提到，我們要用VS code跟前端進行第一次接觸了，
一開始遇到html，想必沒有人提醒的新手一開始都是一個字一個字慢慢打出來的吧！
有了內建的emmet，不需要這麼麻煩了。
直接鍵入html:5然後按enter，就會出現下列架構了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>  
<body>
</body>
</html>

接下來！我們直接進入下一個重點emmet，
在emmet的加持下，可以避免iT人一直重複打一樣東西，
也算是變相保護鍵盤。
首先要記得兩件事：
1.不能空格。
2.使用enter或tab來輸入。（剛剛測試一下，sublime是只能用tab）

element tag:什麼都不用加，只要按enter或tab

任何的element tag都可以用
ex：

<--! div -->
<div></div>  

<--! p -->
<p></p>

child:>

剛開始寫程式的人應該不太懂child
其實不難，這是一個爸爸包孩子的概念
下面p就是div的child

<--! div>p -->
<div>  
    <p><p>
</div>

sibling:+

兄弟姊妹般，寫出跟自己同一層的element

<--! div+p -->
<div></div>  
<p><p>

climbing-up:^

當從爸爸層使用>到了子層，甚至是孫子層（沒有這種說法，只是比喻）
要往上找回叔伯姑姨
就會用到^

<--! div>h1^div>h2 -->
<div>
    <h1></h1>
</div>
<div>
    <h2></h2>
</div>

multiplication:*

當你需要很多重複的時候會用到

<!-- ui>li*5 -->
<ui>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ui>

括弧:（）

其實這個跟數學學過的很像，先算()內的東西

<!-- div>ul>(li>a)*5 -->
<div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

class:. 與 id:#

class和id在html一定會看見
目前id我自己也還沒有寫過，大多是用class。
class可以讓你指定到你要的element，
前端的習慣：
-.就會想到class
-#就會想到id

所以**.site-logo**
就可以理解成class="site-logo"
之後在寫css的時候會再次看到。

在.or#之前是可以加入各種element tag的，
如果不加則預設div。

<!-- h1.site-title -->
<h1 class="site-title"></h1>

<!-- div.site-logo或.site-logo -->
<div class="site-logo"></div>

編號:$ 與起始值:@

這個其實我還很少用到，這次算是新學習到了。
目前class name中還沒有需要用到數列，不過之後應該會常常用到。

<!-- ul>li.meal$*5 -->
<ul>
    <li class="meal1"></li>
    <li class="meal2"></li>
    <li class="meal3"></li>
    <li class="meal4"></li>
    <li class="meal5"></li>
</ul>

而@則是設定起始值
而非像上面的1開始數

<!-- ul>li.meal$@4*5 -->
<ul>
    <li class="meal4"></li>
    <li class="meal5"></li>
    <li class="meal6"></li>
    <li class="meal7"></li>
    <li class="meal8"></li>
</ul>

以上就是這次的emmet，
等等後面都會有一些框起來的東西是什麼？

<--!  -->

這個東西叫註解
快捷鍵是shift+alt+a（Mac）
在CSS一樣也是這個快捷鍵喔！
不過出來的是／* *／（CSS的註解）

特性是不會被瀏覽器編譯出來
可以在裡面輸入此段html你在寫什麼，
幫助他人或多日後的自己理解在寫什麼。
另一個功能是可以拿來把暫時不想顯示的htm給隱藏起來
是不是按出來變這樣？

<!--  --><ul>
    <li class="meal4"></li>
    <li class="meal5"></li>
    <li class="meal6"></li>
    <li class="meal7"></li>
    <li class="meal8"></li>
</ul>

那是因為你沒有反白
反白後再輸入快捷鍵即可！

<!-- <ul>
    <li class="meal4"></li>
    <li class="meal5"></li>
    <li class="meal6"></li>
    <li class="meal7"></li>
    <li class="meal8"></li>
</ul> -->