一、web前端開發工具

常見的五種web前端開發工具：

● sublime

● Hbuilder

● VS Code

● Atom

● Brackets

作為web前端開發工具，當我們靈活利用編輯器的快捷方式時，會極大地提高我們書寫程式碼的效率。二、第一個web前端快捷方式

在我們剛踏入web前端學習領域時，看到別人能快速生成一個html標準文件是十分羨慕的。如何去操作，其實並不難。

操作步驟：在文件中輸入英文感嘆號"!" >> 再按住tab鍵即可

如果你不能達到下圖中的效果，請嘗試安裝 Emmet 外掛

三、快捷鍵的擴充套件下面講解前端常用的一些快捷方式，最後以tab鍵結束。其中第9條真的是太太太有用了，初學你不看會後悔一輩子。

1、快速生成多個元素，比如5個div

2、給元素增加class或者id屬性

舉個栗子，給div增加屬性

● 增加class屬性使用.

div.first

+ tab鍵

● 增加id屬性使用#

div#first + tab鍵

3、給元素增加內容，使用{}

4、兩個元素是兄弟元素，使用+

5、後代元素，使用>

7、上級元素使用^

當使用 的指令之後，再繼續寫下去，那麼後續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標籤，那麼我需要先用 “^” 提升一下層次。

8、$的使用

● $出現一次，正序從 1 開始

● $出現一次，倒序

● $出現多次，正序從0開始

● 使用 @N 指定開始的序號

8、分組：()

用括號進行分組，表示一個程式碼塊，分組內部的巢狀和層級關係和分組外部無關

9、lorem生成隨機文字