3. 用vscode的live server打造方便的開發環境

#vscode #html ＃網站設計 #程式碼

超級前端人 2022-02-06 00:40:55 ‧ 2125 瀏覽

分享至

什麼是live server?

如果有看我之前的文章就會知道它是一個vscode的插件，可以即時預覽更新的程式碼，這類型的功能叫做hot reload，能更快速的開發。

假設沒有用會怎麼樣?

如果沒有開發經驗的人應該還不知道痛苦，有經驗的應該都知道一直按重刷，你的手會不聽使喚。

接著上一集的程式碼

<!DOCTYPE html>
<html lang="en"><!--本站為英文版(繁體中文為 zh-hant 或 zh-tw)-->
<head>
    <meta charset="UTF-8"><!--宣告檔案室UFT-8編碼，加上，防止亂碼-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--用當前瀏覽器的版本渲染-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--前一篇介紹的-->
    <title>my first web</title><!--網站標題-->
</head>
<body>
    <p>this is the first web</p>
    
</body>
</html>

如果有看我前幾集的人應該都熟悉了<head></head>和<body></body>還有<html></html>的作用了(如果還沒看過，可以按下下面的連結)，但是上面的程式碼應該還有一些是沒看過的，沒關係，我今天帶你看。

html快速入門：http://www.pcnet.idv.tw/pcnet/html/html.htm

<!DOCTYPE html>

有沒有人跟我一樣，看到了這個就嚇到了，其實這個符號是宣告這份文件是一份html的文件。

介紹文件：https://www.fooish.com/html/doctype.html

<meta xxx>

UFT-8編碼

編碼就是一種增加字元數的設計，畢竟，世界上千千萬萬種語言，文字數量難以想像，而有人就想到了使用編碼的方式來表示各種語言。例如：© -> &copy。還有更多編碼的方式，而uft-8只是其中一種。早期的中文其實大家更傾向於使用另一個編碼big-5，而後因為uft-8的穩定性而勝過它。

uft-8 維基百科：https://en.wikipedia.org/wiki/UTF-8
big5 維基百科：https://en.wikipedia.org/wiki/Big5

<meta http-equiv="X-UA-Compatible" content="IE=edge">

這個宣告的標前其實很複雜，如果初學可以先不用加上，假設你對此有興趣，你可以參考以下文章

【HTML教學】X-UA-Compatible設置IE兼容模式： https://injerry.pixnet.net/blog/post/57042465

設定Live server來看看上一篇做的網站

設定live server
首先，按下左側列的延伸模組(藍色箭頭)，然後在輸入框輸入live server(白色箭頭)(通常打到live就會跑出來)，接著按下Live server的標誌(紅色箭頭)，最後按下右邊的安裝(綠色按鈕)(我的已經安裝過了所以沒有顯示)，等待片刻，直到安裝完成(畫面跟我一樣)，然後重新打開(重做上篇的動作，把資料夾拉到vscode圖示 )。重啟後，按下右下角的Go Live的按鈕。
按go live

看成果拉

按下去後它應該會用你的預設瀏覽器開啟你的網頁，如果沒有，你可以自己去到http://127.0.0.1:5500，你應該會很有成就感，終於完成人生中第一個網站了。
我的網站
好啦，這是我做的，之後有機會再來介紹。

結尾

今天介紹了常見的head中的meta標籤，還有vscode的live server，講真的在一開始學就搞清楚head裡面擺的東東，真的很重要。最後，如果記不的裡面的程式碼是正常的，要善常運用Google來查詢，就算再厲害的高手，腦子裡並不是充滿著看起來可怕的程式碼，而是充滿著思考邏輯和解決事情的能力。