[前端][HTML]怎樣使用sublime Text 3編寫HTML

1.下載並安裝Sublime Text 3.

2.打開Sublime Text 3界面。
 

歡迎頁面

3.按下Ctrl+N,新建頁面。

新建頁面

4. 按下Ctrl+S,另存爲你所指定的文件名,使用.html後綴(後綴很重要,Sublime將會根據後綴判斷語言類型並幫你開啓相應的自動補全)。例如,文件名爲test.html

此時,當前標籤頁的文件名已經變成了test.html

5.輸入<h,如圖彈出相應代碼補全候選目錄後,可以看到html位於第一個,按下回車,自動補全:

6.如圖,Sublime Text 3爲我們自動生成了html頁面的框架,我們再不必費心費力地輸入大量起始內容了:

 

注:其中的<!DOCTYPE html>爲HTML5中的new feature

7.在<title>和</title>之間輸入網頁名稱,它就是瀏覽器標籤頁上的名稱。例如,輸入index.

8.在<body>和</body>之間輸入 <h2後回車,Sublime Text 3將會爲你添加二級標題的代碼補全。例如,輸入一個標題爲Chapter 1後,按下Ctrl+S保存文件。

9.不必關閉Sublime,直接使用任意一款流行的瀏覽器打開你的test.html文件;

 

瀏覽器當前標籤名即爲你輸入的title:index,地址欄內容爲你的html文件本地路徑。

Chapter 1爲你剛剛輸入的二級標題。

 10.不要關閉瀏覽器,在Sublime中輸入<p按下回車,Sublime將產生段落補全代碼,在<p>和</p>之間輸入Hello World Wide Web!後按下Ctrl+S保存文件。

11.刷新瀏覽器,可以看到html顯示內容發生了變化:(Chrome瀏覽器中刷新操作爲右鍵菜單單擊重新加載,或按下Ctrl+R)

 12.至此,使用Sublime編寫HTML的入門部分就完成了,還實現了編寫代碼的同時用瀏覽器立即手動追蹤顯示效果的變化。我們還可以使用win10中的分屏將Sublime與瀏覽器並列在一起,便於觀察。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章